前端跨平台演进及低代码组件化跨平台落地实践-京东云开发者社区

本文将讲述前端跨平台技术的演进，以及为何选型Flutter跨平台。Flutter结合如今大红大紫的低代码（Low-Code），实现研发到业务、平台到具体场景的轻、快、易；实现业务应用的快速交付、降低业务应用的开发成本。

### 1 前端跨平台演进

#### 1.1 为什么需要跨平台技术

任何一个稳定的政治经济体，无论什么时候，竞争都是激烈的，无论哪行哪业。移动互联网更是如此，全球经济内存抖动、新冠隔三差五的继承多态、国内经济人口结构的内存溢出泄露、反垄断、K12等一系列蝴蝶效应，任何一个公司都可能会恒大，一个公司的任何一个部门都可能被GC。所以如何将好想法快速落地、快速试错，成为备受关注的问题。提升研发效率、缩短研发周期，保障产品快速试错并能快速迭代新功能，让新产品新功能以最快的速度同时抵达多端用户。

Android 应用采用 Java 或 Kotlin 编写，iOS 应用采用 Objective-C 或 Swift 编写，Web 端采用 HTML /CSS/JavaScript 编写。当需要开发支持多端的应用，每一端都需要独立研发、测试，一直到上线，以及后续的维护工作，工作量成倍增涨，势必延长研发周期。

为了解决多端独立开发的问题，跨平台技术便应运而生，各大互联网公司为此都投入大量人力，于是出现了各种跨平台技术框架，面对移动领域的跨平台技术方案的层出不穷，又该如何做技术选型呢？

#### 1.2 移动端技术选型要素

![](//img1.jcloudcs.com/developer.jdcloud.com/49231b1c-2d64-42bc-b6f0-895d25685ab020220302150330.png)

1. 研发效率：最大化代码复用，减少多端差异的适配工作量，降低开发成本，专注业务开发，实现“write once，run everywhere”的终极目标。效率提升是贯穿整个业务的生命周期线，即便业务上线后，可持续降低后续的维护成本，加快新feature的迭代速度，这是一个持续的效率收益。当然，这里不得不说，任何一门新技术在开发启动学习阶段会有一些成本，但上手后的收益是长期的。
2. 动态化：突破渠道的更新频率，可快速迭代新功能，这一点不仅是跨平台技术的诉求，也是Native技术必备的杀手锏，这也是评估跨端技术的一个重要考核点。
3. 多端一致性：好产品在多端UI设计上，往往是整体风格统一，所以业务方采用原生各自独立开发完成后，还需额外花不少时间来修改UI以保证多端一致性；可见，各端独立实现开发方式，带来的效率滞后，不仅仅是Android和iOS各开发一份代码的工作量，还有双端UI的一致性对齐的工作。
4. 性能体验：一般地，跨端技术方案拥有以上多重优势，但在性能方面比原生流畅更差些。牺牲部分体验换来效率提升，这一点也是情理之中，试想一下，跨平台技术方案同时兼得这4点，那么原生技术恐怕已退出历史舞台，早已是跨平台技术的天下，所以往往跨平台技术的性能优劣便成为核心指标。

#### 1.3 跨平台技术类别

![](//img1.jcloudcs.com/developer.jdcloud.com/2f91d825-dfb7-4a56-9b08-f333d9e2aa7220220302150357.png)

1. Web技术：主要依赖于WebView的技术，功能支持受限，性能体验很差，比如PhoneGap、Cordova、小程序。
2. 原生渲染：使用JavaScript作为编程语言，通过中间层转化为原生控件来渲染UI界面，比如React Native、Weex。
3. 自渲染技术：自行实现一套渲染框架，可通过调用skia等方式完成自渲染，而不依赖于原生控件，比如Flutter、Unity。

#### 1.4 跨平台技术进化阶段

![](//img1.jcloudcs.com/developer.jdcloud.com/59230323-4162-4c88-a237-588d8dccc81d20220302150450.png)

- 第一阶段，采用WebView技术绘制界面的Hybrid混合开发技术，通过JS Bridge 将系统部分能力暴露给 JS 调用，其缺点是性能较差，功能受限，扩展性差，不适合交互复杂的场景。
- 第二阶段，针对WebView界面性能等问题，于是绘制交还原生渲染，仅仅通过JS调用原生控件，相比WebView技术性能体验更好，这是目前绝大部分跨平台框架的设计思路，比如React Native、Weex、小程序，第一和第二阶段的融合，依然采用WebView作为渲染容器，通过限制Web技术栈的子集，规范化组件使用，并逐步引入原生控件代表WebView渲染，以提升性能。
- 第三阶段，虽然通过桥接技术使用原生控件解决了功能受限问题，提升性能体验，但相比原生体验差距还是比较大，以及处理平台差异性非常耗费人力。于是Flutter提出自带渲染引擎的解决方案，尽可能减少不同平台间的差异性, 同时媲美原生的高性能体验，因此业界对 Flutter有着极高的关注度。

#### 1.5 Flutter技术优势

Flutter是彻底的跨平台方案，既没有采用webView，也没有采用JS桥接原生控件，而是自行实现一套UI框架，在引擎底层通过Skia渲染到屏幕。对于UI之外所需要使用的移动设备自身提供的服务，比如蓝牙、相机、定位、屏幕触摸等，则采用Platform Channels跟原生系统通信的方式来实现。优势提现如下：

![](//img1.jcloudcs.com/developer.jdcloud.com/e57bde2f-68bc-4714-a08e-8adc78fe5c2020220302150544.png)

1. 高效率：采用dart语言编写代码，虽然刚开始上手需要点时间，但熟练后效率比较高。一套代码适用多个平台(Android、iOS、Web、Desktop)，以及高效的Hot Reload能快速辅助调试；
2. 动态化：Flutter引擎在某一个官方版本对动态化做过一些尝试，但后续基于风险考虑移除了；本文后面结合的低代码也是动态化的策略中一种，以 josn 作为 DSL，通过服务端下发组件配置信息，渲染组件提前内置在 App 中，将选择不同的组件组合和布局配置，达到界面的动态化布局。 集团也有JDFlutter平台 ：通过引入 JS Runtime 与 JS Bundle 产物，运行产生 DSL 并解析转化为 Widget，从而实现 Flutter UI 渲染与逻辑交互。
3. 高一致性：实现UI像素级的控制，Flutter渲染引擎依靠跨平台Skia图形库来实现，仅依赖系统图形绘制相关的接口，比如未来Android会支持vulkan，iOS会支持metal，这些都是通过skia封装调用。可最大程度上保证不同平台的体验一致性。
4. 高性能：渲染性能优于现有的各种跨平台框架，可媲美原生性能的跨平台技术方案，Dart代码执行效率比JS高，通过AOT编译成平台原生代码，渲染采用自渲染skia方案，既不需要JS Bridge桥接，也不需要Art虚拟机参与。

**对于前端而言，Flutter真正实现了 一套代码，多端使用；对移动端开发者，容易上手；界面，交互，渲染没的说，2.0以上版本，操作流程性，大大提升。已stable iOS 、Android 、Web、Desktop平台，后面有我们的具体实战，总体而言 大势所趋 ，未来可期。**

### 2 低代码组件化跨平台落地实践

#### 2.1 背景

针对目前快速发展的业务，可灵活配置、扩展的业务特性已经成为当前必须具备的能力。如何能让研发、产品、业务人员都可以通过页面拖拽进行前后端一体的业务实现，是我们系统设计的主要目标。同时通过业务自定义插件对目前我们已有系统能力进行串联，形成从前端页面到后端服务的一整套低代码业务编排解决方案。

##### 2.1.1 痛点

1. 多域名，多环境，碎片化
2. 适配
3. UI、UE优化
4. 多业务交叉，维护成本高

##### 2.1.2 优点

1. 跨平台（Web/ Android/iOS mac/windows/linux/ubunto.. 二维码）
2. 灵动（快速响应 部署 调整能力）
3. 自定义化
4. 组件化
5. 可移植 可复制 低成本维护
6. 原生级别界面渲染，原生级别交互响应
7. 提炼出核心基础功能，可平台化

##### 2.1.3 难点

1. 多端适配问题
2. 多端存储问题
3. 映射问题
4. 复杂界面，复杂逻辑

#### 2.2 技术调研

![](//img1.jcloudcs.com/developer.jdcloud.com/aa94ddec-65bd-4510-b938-9180c35cbf7520220302150739.png)

#### 2.3 项目架构

![](//img1.jcloudcs.com/developer.jdcloud.com/c8fc01be-9f7e-42fe-b95a-1c4dcc8b4cde20220302150758.png)

只想说多看多思考，想清楚了，才能更好的抽离 隔离 拓展；无论项目推进、技术选型、个人机会，自己努力推着走，表要等，表要等，表要等，再等tw都统一了。

#### 2.4 多端展示

##### 2.4.1 Android

![](//img1.jcloudcs.com/developer.jdcloud.com/df6923f2-6494-45c9-96c5-7ae6e14e59bf20220302151606.png)

##### 2.4.2 iOS

![](//img1.jcloudcs.com/developer.jdcloud.com/c1b7b312-1fa6-4a14-8a6d-abacb755fcfa20220302151617.png)

##### 2.4.3 Web

![](//img1.jcloudcs.com/developer.jdcloud.com/a41a1764-cc0e-4b52-a0e6-1743d2a9a89520220302151636.png)

##### 2.4.4 Desktop(MacOS)

![](//img1.jcloudcs.com/developer.jdcloud.com/87e89b47-c954-475a-8428-b78cec7e103520220302151655.png)

------------

###### 自猿其说Tech-京东物流技术发展部
###### 作者：任野