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

Tech

导读

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

01前端跨平台演进

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平台，后面有具体实战，总体而言：大势所趋 ，未来可期。

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

2.1 背景

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

2.1.1 痛点

1. 多域名，多环境，碎片化
   

2. 适配

3. UI、UE优化

4. 多业务交叉，维护成本高

2.1.2 优点

1. 跨平台（Web/Android/iOSmac/windows/linux/ubunto.. 二维码）

2. 灵动（快速响应 部署 调整能力）

3. 自定义化

4. 组件化

5. 可移植 可复制 低成本维护

6. 原生级别界面渲染，原生级别交互响应

7. 提炼出核心基础功能，可平台化

2.1.3 难点

1. 多端适配问题

2. 多端存储问题

3. 映射问题

4. 复杂界面，复杂逻辑

2.2 技术调研

图5 技术调研

2.3 项目架构

图6 项目架构图

2.4 多端展示

2.4.1 Android

图7 Android平台效果展示

2.4.2 iOS

图8 iOS平台效果展示

2.4.3 Web

图9 Web平台效果展示

2.4.4 Desktop(MacOS)

图10 MacOS平台效果展示

03总结

创新是经济的原动力，创新是企业的生命线，创新源于积累和尝试。Flutter跨平台能力和优异的交互体验，实现研发到业务、平台到具体场景的轻、快、易；实现业务应用的快速交付、降低业务应用的开发成本。期望读者对新技术有所了解，乐于学习分享，勇于落地实践。

推荐阅读京东金融App合规治理的探索与实践
京东秒杀架构升级优化实践
京东APP秒级百G日志传输存储架构设计与实战
搜索中常见数据结构与算法探究（二）