KUN 应用开发流程【实用教程】

作者:闲鱼技术——古尘

前言

本文从KUN在闲鱼落地为出发点,介绍如何通过KUN实现Web和Flutter技术增强你的移动应用程序。

在结合了Web和Flutter的各自优势,以及它们背后良好的生态和社区支持,你能用它来覆盖你的所有上层业务,达到更佳的动态化效果。

介绍KUN

KUN 是一个让开发者使用 Javascript,HTML,CSS进行开发,使用Flutter进行增强的跨端开发框架。

为什么选择KUN

首先我们分析下Flutter与H5的情况

  • Flutter:
    • 优点:UI达到像素级跨端水平,业务逻辑一致性得到保证
    • 缺点:工程打包成本较高,仍依赖发版,缺乏页面级动态性
  • H5:
    • 优点:页面动态性强,发版迅速
    • 缺点:体验性较差,复杂交互实现困难

KUN是结合闲鱼技术在flutter技术领域的天然优势,去混合连接 JS 生态 & Flutter 生态,通过更加开放 & 更加轻量化的设计,在效率、体验、通用性上去取的最佳平衡。

KUN工程化体系

KUN很好的复用前端的工程化体系

  • KUN实现了标准W3C的子集,能很好的接入前端体系。这样可以让业务同学"零"学习成本就可以上手 KUN 的开发,同时使用 Web 技术开发的应用也能很容易地迁移到 KUN 上。

  • 作为世界上最活跃的开发者群体 -- Web 开发者,以及庞大的前端生态体系,KUN允许开发者使用社区中已有的 100W+ npm 包来帮助业务提升开发效率

  • 成熟的前端配套开发工具,你可以使用 VSCode、WebStrom 进行代码的编写,使用代码提示和 ESLint 规则检测来保证代码质量,使用 jest 等单元测试工具来,使用 webpack 进行代码的打包等等。

KUN对原有前端工程化的改变

  1. 为KUN容器实现新的脚手架,用于创建KUN的前端应用
  2. 在发布产物平台/离线包预置平台增加 KUN产物 (JSBundle/ByteCode)
  3. 在前端监控体系增加KUN容器异常监控
  4. 在性能平台增加统计KUN容器启动时长、白屏率、加载失败率等数据

KUN在闲鱼的落地

闲鱼超市/我发布的/闲鱼号

读者可以下载<mark>最新版闲鱼客户端</mark>打开闲鱼超市/我发布的/闲鱼号,体验KUN容器带来的体验升级。

后续KUN将会接入更多闲鱼核心业务。今年闲鱼双十一会场会使用KUN容器。这是一次对KUN的机遇和挑战。

回到主题,为了保证前端业务在KUN容器中落地,KUN打通了闲鱼的前端开发链路。

下面介绍下如何使用KUN进行开发

开发流程

1.准备工作

  • 安装前端依赖
    • 安装 NodeJS
    • 安装 DEF 前端集成开发环境

DEF 是由 淘宝前端团队 发起的工程化前端开发生态体系。通过配套的规范、工具、流程定义、权限管理以及数据日志提高前端开发效率,保证团队开发过程的一致性和可复制性,提升代码质量和安全。

$ npm install tnpm -g --registry=http://registry.npm.alibaba-inc.com
$ tnpm install @ali/def@next -g
  • 安装 Rax 套件

Rax 是阿里巴巴应用最广泛的跨端解决方案,支持开发者通过类 React DSL 编写 Web、小程序、Flutter 等不同容器的跨端应用。

  • 申请发布环境
    • Def(前端代码发布平台)(后面计划接入闲鱼自研前端发布平台-魔鱼)
      • 仓库发布类型选择 跨端发布
      • 项目创建使用闲鱼CLI创建
      • 其他详见Def发布流程
    • ZCache(客户端资源离线包缓存)

ZCache 可以让前端在 ZCache 发布平台将页面使用的 html、js、css 等资源打包,客户端会在合适的时机下载或者直接预置的方式将资源保存到本地,使得用户在浏览页面的时候不需要再去下载资源,有效提升 Web、Weex 、Kun等页面的加载性能,改善用户体验。

2.接入闲鱼KUN基础库

将闲鱼前端基础库改造适配KUN容器

比如:@ali/pcom-fin-windvane,代码中增加isKun(在KUN容器运行时存在全局变量kun),由于KUN容器实现了80%+集团动态化标准,因此只需要改动部分库来适配KUN容器

@ali/pcom-fin-windvane 是封装了客户端提供给前端的JSAPI的前端基础库

var isKun = typeof kun !== 'undefined'; //判断当前环境是否为KUN容器

@ali/pcom-fin-windvane:

业务中使用KUN后,需要改动的库:

"alias": {
 "@ali/pcom-fin-mtop": "node_modules/@ali/pcom-fin-mtop",
 "@ali/pcom-fin-api-fallback": "node_modules/@ali/pcom-fin-api-fallback",
 "@ali/pcom-fin-user": "node_modules/@ali/pcom-fin-user",
 "@ali/pcom-fin-windvane": "node_modules/@ali/pcom-fin-windvane",
 "@ali/pcom-fin-umidware": "node_modules/@ali/pcom-fin-umidware",
 "@ali/pcom-fin-tracker": "node_modules/@ali/pcom-fin-tracker",
 "@ali/uni-user": "node_modules/@ali/uni-user"
 },

3. 开发

前端

开发环节不在本篇文章赘述,Rax 遵循 React 的语法,详情可以查看 Rax 文档 自行学习或上网查阅 React 资料专项学习,这里只做开发流程说明。

build.json 是整个Rax应用构建相关的配置文件

需要将inlineStyle设置为true,KUN容器目前只支持JS产物/ByteCode产物,KUN计划在S2实现Html+CSS+JS三种产物方式,将开发体验对齐H5开发。

{
 "targets": ["kun", "web"],
 "kun": {
 "mpa": true
 },
 "web": {
 "mpa": true
 },
 "plugins": ["@ali/build-plugin-rax-app-def", "@ali/hmr-watch-node-modules"],
 "inlineStyle": true
}

客户端

如果实现复杂&体验好的组件,比如我发布的页面的降价面板的刻度尺(读者可以通过闲鱼我发布的页面点击降价按钮进行体验),这个就需要在客户端进行组件定义。

  • 定义刻度尺组件

  • 组件实现
    实现一个刻度尺Widget,这里可以将闲鱼沉淀的组件定义到KUN容器,让前端体验能够获得更复杂的交互(如 左滑删除、视频组件、嵌套滚动、Lottie、相册等)

  • 前端调用
    组件定义的属性是与前端同学约定,为后续实现一码多端组件

一码多端组件是支持H5和KUN容器的组件,保证前端业务能够实现降级H5展示

4. 调试

  • 使用devtools(与Chrome Devtools能力对齐)
    • 浏览器访问devtools://devtools/bundled/inspector.html?ws=x.x.x.x:9222 x.x.x.x表示当前手机IP
    • devtools实现日志输出/节点查看/样式调试/查看源文件/滚动联动/网络请求等能力

为了解决获取手机IP的问题,前端同学开发了@ali/rax-kun-devtools插件,在扫码的同时,自动打开浏览器访问devtools。原理是rax-app为插件扩展了运行时定制的能力。<mark>before.start.run</mark>和<mark>after.start.compile</mark>

before.start.run -- 调用时机:webpack执行之前
after.start.compile --调用时机:编译结束,每次重新编译都会执行
具体可见rax-app运行时定制能力


  • alert,按照前端开发习惯,KUN容器也实现了弹框显示的能力
  • 使用Android Studio查看JS日志和客户端 Flutter日志,用dart devtools排查页面在容器中的性能。【推荐】客户端同学开发KUN页面使用

5. 埋点

  • 接入Flutter埋点库,通过桥接方式将方法暴露给JS侧。
  • Flutter实际调用的是Android/iOS封装的methodChannel,与客户端埋点对齐
    接入flutter封装的埋点库,业务数据统计口径统一按照客户端方式进行拉取

按照不同具体业务场景,KUN容器也提供了容器报表数据,从router时间/loadBundle时间/evalBundle时间/mtop时间/白屏时间/首屏加载时间多个维度分析

6. 发布

  • DEF发布平台,在预发/正式进行发布
  • 使用Zcache离线包缓存拉取机制,提高离线包产物加载的成功率,目前离线包下载成功率在99%左右。通过不同的离线包安装方式保证加载成功率。

ZCache 包主要有以下三种安装方式:

  1. 访问时安装:在用户首次访问后安装,之后每次定时更新时会尝试更新到新版本。如果用户长时间未使用就会将这个 ZCache 包淘汰掉,并移除所有本地文件。

  2. 闲时安装:不需要用户访问,就会在定时更新期间主动安装。

  3. 启动安装:采用启动安装的方式,提前推送和预热资源,提高用户体验。

7. 异常监控

  • JS触发Error事件,在quickjs内部会回抛异常出来,将该异常数据统一上报到flutter高可用itrace中,进行实时异常监控。并设置5分钟异常钉钉告警

iTrace Flutter 高可用能够全面监控Flutter应用线上的运行情况,洞悉用户真实体感,让用户体验提升更简单。

  • KUN容器实现了window.onerror和window.onunhandledrejection,前端可以使用前端自己的异常监控体系进行监控(JSTracker

JSTracker是端到端的前端监控与数据分析平台,覆盖用户体验、安全生产等方向,打造实时监控、多端覆盖、智能化的数据平台

8. 降级

触发降级的场景

URL中带降级链接
kun_downgrade_url为降级链接

降级链接中会增加kun_downgrade=true,来表示是KUN降级过来https://xxx?kun_downgrade=true&...

XXX.html?kun=true&kun_downgrade_url=XXXX

前端控制版本降级

/* global __kun_downgrade__ */
import { isKun } from 'universal-env';
export const downgrade = () => {
 if (isKun) {
 const config = {
 url:'XXX', // 指定降级URL
 //配置支持区分平台ios、android
 ios: {
 //可以根据系统版本、手淘版本、kun版本、设备型号确认降级条件
 osVersion: '',
 appVersion: '<7.8.6',
 kunVersion: '',
 deviceModel: []
 },
 android: {
 osVersion: '',
 appVersion: '<7.8.6',
 kunVersion: '',
 deviceModel: []
 }
 };
 __kun_downgrade__(config);
 }
};

后记

本篇文章简单总结了KUN 从准备、开发、调试、监控、发布的流程,让大家对KUN的开发流程有所了解。在此提下<strong>KUN的<mark>初衷</mark></strong>

我们希望在面向中小规模的大前端/大终端的组织中,找到一种真正适合的、长期性的、通用型解决方案。解决包括我们闲鱼技术团队在内的,大前端/大终端所面临的前端用户体验低、客户端效能低、团队技术割裂、技术协作成本高等一系列问题。

随着KUN在闲鱼业务中的逐步落地,大前端/大终端变得不再遥远。
最后引KUN的开篇文章那句话:

KUN是一个新物种,让我们尽力去完善它???

参考资料

【1】Rax官网

【2】这一年,我对终端组织与技术架构的思考

【3】大终端领域的新物种-KUN

作者:闲鱼技术

%s 个评论

要回复文章请先登录注册