導(dǎo)讀

本文介紹了跨平臺技術(shù)的演進(jìn)，跨平臺技術(shù)選型的要素以及各個方向的優(yōu)劣勢，以及結(jié)合Flutter平臺能力結(jié)合后臺實(shí)現(xiàn)低代碼面向業(yè)務(wù)的具體落地實(shí)踐。Flutter結(jié)合如今大紅大紫的低代碼（Low-Code），實(shí)現(xiàn)研發(fā)到業(yè)務(wù)、平臺到具體場景的輕、快、易；實(shí)現(xiàn)業(yè)務(wù)應(yīng)用的快速交付、降低業(yè)務(wù)應(yīng)用的開發(fā)成本。期望讀者對新技術(shù)有所了解，樂于學(xué)習(xí)分享，勇于落地實(shí)踐。創(chuàng)新是經(jīng)濟(jì)的原動力。

01

前端跨平臺演進(jìn)

1.1 為什么需要跨平臺技術(shù)

任何一個穩(wěn)定的政治經(jīng)濟(jì)體，無論什么時候，競爭都是激烈的，無論哪行哪業(yè)。移動互聯(lián)網(wǎng)更是如此，全球經(jīng)濟(jì)內(nèi)存抖動、新冠隔三差五的繼承多態(tài)、國內(nèi)經(jīng)濟(jì)人口結(jié)構(gòu)的內(nèi)存溢出泄露、反壟斷、K12等一系列蝴蝶效應(yīng)，任何一個公司都可能會很大，一個公司的任何一個部門都可能被GC。所以如何將好想法快速落地、快速試錯，成為備受關(guān)注的問題。提升研發(fā)效率、縮短研發(fā)周期，保障產(chǎn)品快速試錯并能快速迭代新功能，讓新產(chǎn)品新功能以最快的速度同時抵達(dá)多端用戶。

Android 應(yīng)用采用 Java 或 Kotlin 編寫，iOS 應(yīng)用采用 Objective-C 或 Swift 編寫，Web 端采用 HTML /CSS/JavaScript 編寫。當(dāng)需要開發(fā)支持多端的應(yīng)用，每一端都需要獨(dú)立研發(fā)、測試，一直到上線，以及后續(xù)的維護(hù)工作，工作量成倍增漲，勢必延長研發(fā)周期。

為了解決多端獨(dú)立開發(fā)的問題，跨平臺技術(shù)便應(yīng)運(yùn)而生，各大互聯(lián)網(wǎng)公司為此都投入大量人力，于是出現(xiàn)了各種跨平臺技術(shù)框架，面對移動領(lǐng)域的跨平臺技術(shù)方案的層出不窮，又該如何做技術(shù)選型呢？

1.2 移動端技術(shù)選型要素

圖1 跨平臺技術(shù)選型要素

1. 研發(fā)能效：減少多端差異的適配工作量，代碼復(fù)用最大化，降低研發(fā)人效成本，專注業(yè)務(wù)開發(fā)功能實(shí)現(xiàn)。效率提升是貫穿整個業(yè)務(wù)的生命周期線，即便業(yè)務(wù)上線后，可持續(xù)降低后續(xù)的維護(hù)成本，加快新需求的迭代速度，這是一個持續(xù)的效率收益。任何一門新技術(shù)在開發(fā)啟動學(xué)習(xí)階段會有一些成本，但上手后的收益是長期的。

2. 動態(tài)實(shí)現(xiàn)：可快速迭代新功能，降級處理事故頁面，縮減渠道的更新頻率，這不僅是跨平臺技術(shù)的訴求，也是原生技術(shù)必備的能力，這也是評估跨端技術(shù)的一個重要參考點(diǎn)。

3. 跨端體驗(yàn)：類似京東App，京東金融等，好產(chǎn)品在多端UI設(shè)計(jì)上，往往是整體風(fēng)格統(tǒng)一，所以業(yè)務(wù)方采用原生各自獨(dú)立開發(fā)完成后，還需額外花大量人效來適配UI以保證多端一致性；各端獨(dú)立實(shí)現(xiàn)開發(fā)方式，平臺的差異化，組件的通用程度，帶來的效率滯后，不僅僅是Android和iOS各開發(fā)一份代碼的工作量，還有雙端對齊UI的一致性的工作。

4. 性能優(yōu)化：跨端技術(shù)方案擁有以上多重優(yōu)勢，但在性能方面比原生流暢更差些。犧牲部分體驗(yàn)換來效率提升，這一點(diǎn)也是可以接受的，若跨平臺技術(shù)方案可以做到兼容并蓄各個優(yōu)點(diǎn)，那么原生技術(shù)已成為過去，早已是跨平臺技術(shù)的天下，所以往往跨平臺技術(shù)的性能優(yōu)劣便成為核心點(diǎn)之一。

1.3 跨平臺技術(shù)類別

圖2 跨平臺技術(shù)類型

1. WebView+JS：主要依賴于WebView為載體,JS交互的技術(shù)，性能體驗(yàn)很差，功能支持受限，比如小程序。

2. 原生渲染：使用JSt作為編程語言，通過中間層轉(zhuǎn)化為原生控件來渲染UI界面，比如React Native、Weex。

3. 自渲染：實(shí)現(xiàn)一套渲染框架，可通過調(diào)用skia等方式完成自渲染，而不依賴于原生控件，比如Flutter。

 1.4 跨平臺技術(shù)進(jìn)化階段

圖3 跨平臺技術(shù)演進(jìn)各個階段

• 第一階段，采用WebView技術(shù)繪制界面的Hybrid混合開發(fā)技術(shù)，通過JS Bridge 將系統(tǒng)部分能力暴露給 JS 調(diào)用，其缺點(diǎn)是擴(kuò)展性差,性能差，功能限制多，界面也不夠友好，不能實(shí)現(xiàn)復(fù)雜交互的場景

• 第二階段，針對WebView界面性能等問題，優(yōu)化為交還原生繪制渲染，只通過JS調(diào)用原生控件，相比WebView技術(shù)性能體驗(yàn)更好，這是目前絕大部分跨平臺框架的設(shè)計(jì)思路，比如React Native、Weex、小程序，第一和第二階段的融合，依然采用WebView作為渲染容器，通過限制Web對外暴露的能力，進(jìn)而來規(guī)范組件使用，并逐步引入原生控件代表WebView渲染，以提升用戶體驗(yàn)和性能

• 第三階段，橋接技術(shù)使用原生控件解決了功能不完善的問題，提升性能體驗(yàn)，但相比原生體驗(yàn)差距還是比較大，以及處理平臺差異性非常耗費(fèi)資源。于是Flutter提出自帶渲染Skia引擎的解決方案，盡可能減少不同平臺間的差異性,類似java跨平臺的感覺, 兼?zhèn)淞随敲涝母咝阅芙缑婧徒换?，因此開發(fā)者在社區(qū)很活躍，業(yè)界對 Flutter也有著極高的期待值和關(guān)注度

1.5 Flutter技術(shù)優(yōu)勢

Flutter是徹底的跨平臺方案，既沒有采用WebView，也沒有采用JS橋接原生控件，而是自行實(shí)現(xiàn)一套UI框架，在引擎底層通過Skia渲染到屏幕。對于UI之外所需要使用的移動設(shè)備自身提供的服務(wù)，比如藍(lán)牙、相機(jī)、定位、屏幕觸摸等，則采用Platform Channels跟原生系統(tǒng)通信的方式來實(shí)現(xiàn)。優(yōu)勢提現(xiàn)如下：

圖4 Flutter平臺優(yōu)勢點(diǎn)

1. 高效率：采用dart語言編寫代碼，面向?qū)ο缶幊陶Z言，寫過java,oc,js都可以快速上手，熟練后效率比較高。一套代碼適用多個平臺(Android、iOS、Web、Desktop)，以及高效的Hot Reload能快速輔助調(diào)試；

2. 高性能：渲染性能優(yōu)于現(xiàn)有的各種跨平臺框架，可媲美原生性能的跨平臺技術(shù)方案，Dart代碼執(zhí)行效率比JS高，通過AOT編譯成平臺原生代碼，渲染采用自渲染skia方案，既不需要JS Bridge橋接，也不需要Art虛擬機(jī)參與。

3. 一致性：實(shí)現(xiàn)UI像素級的控制，F(xiàn)lutter渲染引擎依靠跨平臺Skia圖形庫來實(shí)現(xiàn)，僅依賴系統(tǒng)圖形繪制相關(guān)的接口，比如未來Android會支持vulkan，iOS會支持metal，這些都是通過skia封裝調(diào)用?？勺畲蟪潭壬媳ＷC不同平臺的體驗(yàn)一致性。

4. 動態(tài)化：Flutter引擎在某一個官方版本對動態(tài)化做過一些嘗試，但后續(xù)基于風(fēng)險(xiǎn)考慮移除了；本文后面結(jié)合的低代碼也是動態(tài)化的策略中一種，以 json 作為 DSL，通過服務(wù)端下發(fā)組件配置信息，渲染組件提前內(nèi)置在 App 中，將選擇不同的組件組合和布局配置，達(dá)到界面的動態(tài)化布局。集團(tuán)也有JDFlutter平臺 ：通過引入 JS Runtime 與 JS Bundle 產(chǎn)物，運(yùn)行產(chǎn)生 DSL 并解析轉(zhuǎn)化為 Widget，從而實(shí)現(xiàn) Flutter UI 渲染與邏輯交互。

對于前端而言，F(xiàn)lutter真正實(shí)現(xiàn)了 一套代碼，多端使用；對移動端開發(fā)者，容易上手；界面，交互，渲染沒的說，2.0以上版本，操作流程性，大大提升。已支持 iOS 、Android 、Web、Desktop平臺，后面有具體實(shí)戰(zhàn)，總體而言：大勢所趨 ，未來可期。

02

低代碼組件化跨平臺落地實(shí)踐

2.1 背景

針對目前快速發(fā)展的國際物流業(yè)務(wù)，實(shí)現(xiàn)一套代碼同時支持多個國家、多個行業(yè)、多個KA客戶，可靈活配置、擴(kuò)展的業(yè)務(wù)特性已經(jīng)成為當(dāng)前必須具備的能力。如何能讓研發(fā)、產(chǎn)品、業(yè)務(wù)人員都可以通過頁面拖拽進(jìn)行前后端一體的業(yè)務(wù)實(shí)現(xiàn)，是系統(tǒng)設(shè)計(jì)的主要目標(biāo)。同時通過業(yè)務(wù)自定義插件對目前已有系統(tǒng)能力進(jìn)行串聯(lián)，形成從前端頁面到后端服務(wù)的一整套低代碼業(yè)務(wù)編排解決方案。

2.1.1 痛點(diǎn)

1. 多域名，多環(huán)境，碎片化

2. 適配

3. UI、UE優(yōu)化

4. 多業(yè)務(wù)交叉，維護(hù)成本高

2.1.2 優(yōu)點(diǎn)

1. 跨平臺（Web/Android/iOSmac/windows/linux/ubunto.. 二維碼）

2. 靈動（快速響應(yīng) 部署 調(diào)整能力）

3. 自定義化

4. 組件化

5. 可移植 可復(fù)制 低成本維護(hù)

6. 原生級別界面渲染，原生級別交互響應(yīng)

7. 提煉出核心基礎(chǔ)功能，可平臺化

2.1.3 難點(diǎn)

1. 多端適配問題

2. 多端存儲問題

3. 映射問題

4. 復(fù)雜界面，復(fù)雜邏輯

2.2 技術(shù)調(diào)研

圖5 技術(shù)調(diào)研

2.3 項(xiàng)目架構(gòu)

圖6 項(xiàng)目架構(gòu)圖

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

總結(jié)

創(chuàng)新是經(jīng)濟(jì)的原動力，創(chuàng)新是企業(yè)的生命線，創(chuàng)新源于積累和嘗試。Flutter跨平臺能力和優(yōu)異的交互體驗(yàn)，實(shí)現(xiàn)研發(fā)到業(yè)務(wù)、平臺到具體場景的輕、快、易；實(shí)現(xiàn)業(yè)務(wù)應(yīng)用的快速交付、降低業(yè)務(wù)應(yīng)用的開發(fā)成本。期望讀者對新技術(shù)有所了解，樂于學(xué)習(xí)分享，勇于落地實(shí)踐。