導讀

本文介紹了跨平臺技術的演進，跨平臺技術選型的要素以及各個方向的優劣勢，以及結合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跨平臺能力和優異的交互體驗，實現研發到業務、平臺到具體場景的輕、快、易；實現業務應用的快速交付、降低業務應用的開發成本。期望讀者對新技術有所了解，樂于學習分享，勇于落地實踐。