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对原有前端工程化的改变

为KUN容器完成新的脚手架，用于创立KUN的前端运用
在发布产品渠道/离线包预置渠道添加 KUN产品 (JSBundle/ByteCode)
在前端监控体系添加KUN容器反常监控
在功能渠道添加计算KUN容器发动时长、白屏率、加载失败率等数据

KUN在闲鱼的落地

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

读者能够下载最新版闲鱼客户端翻开闲鱼超市/我发布的/闲鱼号，体会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为插件扩展了运行时定制的才能。before.start.run和after.start.compile

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 包主要有以下三种装置方法：

拜访时装置：在用户初次拜访后装置，之后每次守时更新时会尝试更新到新版别。假如用户长时刻未运用就会将这个 ZCache 包淘汰掉，并移除一切本地文件。

闲时装置：不需求用户拜访，就会在守时更新期间主动装置。

发动装置：采用发动装置的方法，提前推送和预热资源，进步用户体会。

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的开发流程有所了解。在此提下KUN的初衷

咱们期望在面向中小规划的大前端/大终端的安排中，找到一种真实合适的、长期性的、通用型解决方案。解决包含咱们闲鱼技能团队在内的，大前端/大终端所面对的前端用户体会低、客户端效能低、团队技能分裂、技能协作本钱高等一系列问题。

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

KUN是一个新物种，让咱们尽力去完善它

参考资料

【1】Rax官网

【2】这一年，我对终端安排与技能架构的思考

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

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

前语

介绍KUN

为什么挑选KUN

KUN工程化体系

KUN在闲鱼的落地

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

开发流程

1.准备工作

2.接入闲鱼KUN根底库

3. 开发

前端

客户端

4. 调试

5. 埋点

6. 发布

7. 反常监控

8. 降级

跋文

作者信息

推广

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

前语

介绍KUN

为什么挑选KUN

KUN工程化体系

KUN在闲鱼的落地

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

开发流程

1.准备工作

2.接入闲鱼KUN根底库

3. 开发

前端

客户端

4. 调试

5. 埋点

6. 发布

7. 反常监控

8. 降级

跋文

相关文章

发行平台如何实现iOS证书更新自动化的工作流

[Flutter] ProxyWidget和Element更新的正确姿势

iOS 汇编入门教程（一）：ARM64 汇编基础

阿里巴巴在 Envoy Gateway 的演进历程浅析

作者信息

推广