導(dǎo)讀

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

01

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

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

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

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

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

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

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

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

2. 動(dòng)態(tài)實(shí)現(xiàn)：可快速迭代新功能，降級(jí)處理事故頁(yè)面，縮減渠道的更新頻率，這不僅是跨平臺(tái)技術(shù)的訴求，也是原生技術(shù)必備的能力，這也是評(píng)估跨端技術(shù)的一個(gè)重要參考點(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ā)方式，平臺(tái)的差異化，組件的通用程度，帶來的效率滯后，不僅僅是Android和iOS各開發(fā)一份代碼的工作量，還有雙端對(duì)齊UI的一致性的工作。

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

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

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

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

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

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

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

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

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

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

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

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

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

圖4 Flutter平臺(tái)優(yōu)勢(shì)點(diǎn)

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

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

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

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

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

02

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

2.1 背景

針對(duì)目前快速發(fā)展的國(guó)際物流業(yè)務(wù)，實(shí)現(xiàn)一套代碼同時(shí)支持多個(gè)國(guó)家、多個(gè)行業(yè)、多個(gè)KA客戶，可靈活配置、擴(kuò)展的業(yè)務(wù)特性已經(jīng)成為當(dāng)前必須具備的能力。如何能讓研發(fā)、產(chǎn)品、業(yè)務(wù)人員都可以通過頁(yè)面拖拽進(jìn)行前后端一體的業(yè)務(wù)實(shí)現(xiàn)，是系統(tǒng)設(shè)計(jì)的主要目標(biāo)。同時(shí)通過業(yè)務(wù)自定義插件對(duì)目前已有系統(tǒng)能力進(jìn)行串聯(lián)，形成從前端頁(yè)面到后端服務(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. 跨平臺(tái)（Web/Android/iOSmac/windows/linux/ubunto.. 二維碼）

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

3. 自定義化

4. 組件化

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

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

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

2.1.3 難點(diǎn)

1. 多端適配問題

2. 多端存儲(chǔ)問題

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平臺(tái)效果展示

2.4.2 iOS

圖8 iOS平臺(tái)效果展示

2.4.3 Web

圖9 Web平臺(tái)效果展示

2.4.4 Desktop(MacOS)

圖10 MacOS平臺(tái)效果展示

03

總結(jié)

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