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

前言

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

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

介绍KUN

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

KUN 能力

为什么选择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. 1. 为KUN容器实现新的脚手架，用于创建KUN的前端应用

2. 2. 在发布产物平台/离线包预置平台增加 KUN产物 (JSBundle/ByteCode)

3. 3. 在前端监控体系增加KUN容器异常监控

4. 4. 在性能平台增加统计KUN容器启动时长、白屏率、加载失败率等数据

KUN在闲鱼的落地

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

业务落地

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

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

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

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

开发流程

1.准备工作

• • 安装