前端跨平台&低代码在国际物流应用实践

任野京东技术

Tech

导读

本文介绍了跨平台技术的演进，跨平台技术选型的要素以及各个方向的优劣势，以及结合Flutter平台能力结合后台实现低代码面向业务的具体落地实践。Flutter结合如今大红大紫的低代码（Low-Code），实现研发到业务、平台到具体场景的轻、快、易；实现业务应用的快速交付、降低业务应用的开发成本。期望读者对新技术有所了解，乐于学习分享，勇于落地实践。创新是经济的原动力。

前端跨平台演进

1.1 为什么需要跨平台技术

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

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

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

1.2 移动端技术选型要素

图1 跨平台技术选型要素

1. 研发能效：减少多端差异的适配工作量，代码复用最大化，降低研发人效成本，专注业务开发功能实现。效率提升是贯穿整个业务的生命周期线，即便业务上线后，可持续降低后续的维护成本，加快新需求的迭代速度，这是一个持续的效率收益。任何一门新技术在开发启动学习阶段会有一些成本，但上手后的收益是长期的。

2. 动态实现：可快速迭代新功能，降级处理事故页面，缩减渠道的更新频率，这不仅是跨平台技术的诉求，也是原生技术必备的能力，这也是评估跨端技术的一个重要参考点。

3. 跨端体验：类似京东App，京东金融等，好产品在多端UI设计上，往往是整体风格统一，所以业务方采用原生各自独立开发完成后，还需额外花大量人效来适配UI以保证多端一致性；各端独立实现开发方式，平台的差异化，组件的通用程度，带来的效率滞后，不仅仅是Android和iOS各开发一份代码的工作量，还有双端对齐UI的一致性的工作。

4. 性能优化：跨端技术方案拥有以上多重优势，但在性能方面比原生流畅更差些。牺牲部分体验换来效率提升，这一点也是可以接受的，若跨平台技术方案可以做到兼容并蓄各个优点，那么原生技术已成为过去，早已是跨平台技术的天下，所以往往跨平台技术的性能优劣便成为核心点之一。

1.3 跨平台技术类别

图2 跨平台技术类型

1. WebView+JS：主要依赖于WebView为载体,JS交互的技术，性能体验很差，功能支持受限，比如小程序。

2. 原生渲染：使用JSt作为编程语言，通过中间层转化为原生控件来渲染UI界面，比如React Native、Weex。

3. 自渲染：实现一套渲染框架，可通过调用skia等方式完成自渲染，而不依赖于原生控件，比如Flutter。

1.4 跨平台技术进化阶段

图3 跨平台技术演进各个阶段

第一阶段，采用WebView技术绘制界面的Hybrid混合开发技术，通过JS Bridge 将系统部分能力暴露给 JS 调用，其缺点是扩展性差,性能差，功能限制多，界面也不够友好，不能实现复杂交互的场景

第二阶段，针对WebView界面性能等问题，优化为交还原生绘制渲染，只通过JS调用原生控件，相比WebView技术性能体验更好，这是目前绝大部分跨平台框架的设计思路，比如React Native、Weex、小程序，第一和第二阶段的融合，依然采用WebView作为渲染容器，通过限制Web对外暴露的能力，进而来规范组件使用，并逐步引入原生控件代表WebView渲染，以提升用户体验和性能

第三阶段，桥接技术使用原生控件解决了功能不完善的问题，提升性能体验，但相比原生体验差距还是比较大，以及处理平台差异性非常耗费资源。于是Flutter提出自带渲染Skia引擎的解决方案，尽可能减少不同平台间的差异性,类似java跨平台的感觉, 兼备了媲美原生的高性能界面和交互，因此开发者在社区很活跃，业界对 Flutter也有着极高的期待值和关注度

1.5 Flutter技术优势

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

图4 Flutter平台优势点

1. 高效率：采用dart语言编写代码，面向对象编程语言，写过java,oc,js都可以快速上手，熟练后效率比较高。一套代码适用多个平台(Android、iOS、Web、Desktop)，以及高效的Hot Reload能快速辅助调试；

2. 高性能：渲染性能优于现有的各种跨平台框架，可媲美原生性能的跨平台技术方案，Dart代码执行效率比JS高，通过AOT编译成平台原生代码，渲染采用自渲染skia方案，既不需要JS Bridge桥接，也不需要Art虚拟机参与。

3. 一致性：实现UI像素级的控制，Flutter渲染引擎依靠跨平台Skia图形库来实现，仅依赖系统图形绘制相关的接口，比如未来Android会支持vulkan，iOS会支持metal，这些都是通过skia封装调用。可最大程度上保证不同平台的体验一致性。

4. 动态化：Flutter引擎在某一个官方版本对动态化做过一些尝试，但后续基于风险考虑移除了；本文后面结合的低代码也是动态化的策略中一种，以 json 作为 DSL，通过服务端下发组件配置信息，渲染组件提前内置在 App 中，将选择不同的组件组合和布局配置，达到界面的动态化布局。集团也有JDFlutter平台：通过引入 JS Runtime 与 JS Bundle 产物，运行产生 DSL 并解析转化为 Widget，从而实现 Flutter UI 渲染与逻辑交互。

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

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

2.1 背景

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

2.1.1 痛点