跨平臺與聲明式交互界面技術在企業移動應用中的探索應用

云南電網有限責任公司電力科學研究院 楊 政

隨著移動應用技術的發展，移動應用在企業中的使用需求也呈現出爆發式增長，企業的內部移動應用也逐漸顯現出快速迭代，多端適配的開發特點。在主流的iOS與Android移動操作系統上，往往需要掌握不同技術棧的開發人員協同配合，一定程度上帶來了資金成本投入和管理成本的增加，而在跨平臺與近年來出現的聲明式交互界面開發技術，如蘋果公司的SwiftUI、谷歌公司推出的Jetpack Compose 、Flutter等技術，讓我們看到不同平臺上技術發展方向的趨同化，未來為進一步降低企業移動應用開發投入，快速響應需求都可能帶來有益的推動。本文將對相關技術的發展和在企業中的探索應用進行探討。

1 移動應用現狀

隨著物聯網、大數據、云計算和人工智能等新一代信息技術的普及運用，基于智能化的新一輪世界科技革命和產業變革正在加速推進。在競爭態勢激烈的市場上，企業間面臨著巨大的競爭壓力，如何將好想法快速落地、快速試錯，成為備受關注的問題。在數字化這條賽道上，占據國有經濟重要地位的國有企業也不會缺席，“十四五”規劃建議提出，加快數字化發展。發展數字經濟，推進數字產業化和產業數字化，推動數字經濟和實體經濟深度融合。

智能技術的發展以及5G通信技術的快速推廣，使的移動應用能夠應用的場景更加廣泛，催生出更多細分垂直類別移動應用產品出現，在2020年的“新冠”疫情加快了如生鮮電商和線上文娛的移動應用發展，而在企業應用領域，遠程辦公、視頻會議及現場作業等需求也呈爆發式增長，移動應用范圍在持續拓寬。

不管是互聯網巨頭，還是其他行業的企業，在落地數字化應用的最后“一公里”上，移動應用可以說是占據了主要排頭兵地位。在互聯網行業，移動端早已取代PC端，成為最大的流量分發入口。在其他行業，無論是提升客戶服務能力、現場作業及遠程辦公等業務場景下，移動應用也成為重要的手段。

2 移動開發技術應用

2.1 移動操作系統發展情況

經過十多年的發展，至今各廠商的移動操作系統已接近統一，幾乎只使用谷歌的Android、蘋果的iOS，其他系統的市場占有率微乎其微。根據StatCounter數據顯示，截至2020年10月， Android的市場份額占有率近74%，iOS的市場份額占有率約為25%，其他移動操作系統市場份額則不到1%。

2.2 移動應用跨平臺技術的發展

此外，隨著業務的發展，很多應用隨著規模化的增長以及動態化內容需求增大，當出現應用端Bug，或者需求發生變化時，純原生應用需要通過版本升級來更新內容，但目前移動應用的上架、審核是需要周期的，這個周期對高速變化的互聯網時代來說是難以接受的，因此，對應用動態化更新的需求就變得迫切了。

2010年前后，在Web前端領域出現了HTML5技術，一定程度上為移動端的跨平臺的解決方案發展帶來了基礎。發展至今，現在的跨平臺方案大致可以氛圍如下幾類：

（1）使用原生內置的瀏覽器加載HTML5的Hybrid技術。這也是最早的跨平臺方案基礎，這種方式時將HTML5 直接嵌入到 App 中進行混合開發，優點在于開發時間短，可以快速驗證產品效果，同時可以解決多端不一致問題，完全將Web端的快速開發上線、修改的優點繼承。比較具有代表性的如Apache Cordova、Ionic以及比較新的Taro等。但HTML5方案也比較明顯，其應用能力嚴重依賴于系統開發平臺自帶的Web引擎，其性能離平臺的瀏覽器性能還會有較大差距，但即便能利用原生瀏覽器的Web引擎，其用戶體驗也依然遠不及平臺原生應用帶來的效果。

（2）用JavaScript開發，然后使用原生組件進行渲染。得益于Web前端技術的蓬勃發展，JavaScript也被作為跨平臺方案的一種方式被引入，其中最具代表性的應屬臉書公司于2015年4月開源的跨平臺移動應用開發框架React Native。React Native拋棄了低效的瀏覽器內核渲染，轉而使用自己的DSL生成中間格式，然后映射到對應的平臺，渲染成平臺的組件。React Native調用Objective-C的API去渲染iOS組件，調用Java API去渲染Android組件，而不是渲染到瀏覽器DOM上。這使得React Native不同于那些基于Web視圖的跨平臺應用開發方案，React Native從上到下可以分為JavaScript層、C++層和Native層。具體如圖1所示。其中，C++層主要用于實現動態連結庫(.so)，作為中間適配層橋接，實現JavaScript端與原生端的雙向通信交互。盡管最終實現了交互界面渲染、動畫、網絡等都通過原生實現，但礙于JavaScript虛擬機和JavaScript橋接器跟原生性能差距仍有一定距離。

圖1 React通過橋接可以渲染到多平臺上

（3）使用自帶的渲染引擎和自帶的原生組件實現跨平臺。區別于前兩種方案，這一類方案既不使用 Web引擎，也不使用原生移動操作系統的原生控件，代表解決方案為谷歌公司推出的Flutter。Flutter從頭到尾重寫了一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發語言。渲染引擎依靠跨平臺的Skia圖形庫來實現，依賴系統的只有圖形繪制相關的接口，可以在最大程度上保證不同平臺、不同設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高。

2.3 主流移動平臺的技術升級

無論是移動應用還是Web前端，作為互聯網時代最后“一公里”產品和服務的承載體，其職能都是將企業與用戶連接，將價值進行傳遞。另一方面，從技術形態發展看，無論是跨平臺的相互融合和影響，還是在技術思路上的相互借鑒，技術的發展趨向于統一，當前行業也會將移動端、Web端統稱為大前端。

在Web前端領域，多年的蓬勃發展使得技術業界出現了諸多有廣大用戶群體的前端框架，比較有代表性的如Vue、React和Angular，隨著編程技術和思想的進步，以上框架也經歷了幾次大版本的更迭，可以看到的相似的地方是，這些框架均倡導使用聲明式或者函數式的方式來進行界面開發，已經越來越被接受并逐漸成為主流，也逐漸證明了一個事實：在 UI 開發領域，描述性語言是最佳方式。

在過去的幾年中，整個大前端交互界面技術領域已開始轉向聲明性界面模型，該模型大大簡化了與構建和更新界面關聯的工程設計。該技術的工作原理是在概念上從頭開始重新生成整個屏幕，然后僅執行必要的更改，而同時，這樣的方式可避免手動更新有狀態視圖層次結構的復雜性。

3 跨平臺與聲明式技術的開發實踐

移動端出現跨平臺與聲明式交互界面開發技術為企業的產品快速開發與應用提供了良好基礎，作者在其資產管理終端應用的項目中使用了相關應用，經過技術對比和選型，最終使用了谷歌公司推出的Flutter，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter框架使用Dart編程語言，具有C語言風格的語法，可以選擇將它編譯成JavaScript，因此在技術上可以很快進行遷移和切入。

在實際項目的開發中，資產管理終端應用在iOS和Android雙端代碼實現了50%以上的邏輯代碼復用，在移動端的開發只投入了1個開發人員，大幅度降低了雙平臺雙技術棧投入的時間和成本。統一技術框架還帶了缺陷修復效率提升的好處，由于使用一套技術體系，開發人員在雙端的具有Bug的邏輯代碼可以進行統一修復，提升修復精確性和效率。

此外，為保持同一技術框架下開發的連貫性，作者所負責的資產管理終端應用后端Web應用也嘗試了使用Flutter實現了部分后臺管理頁面，但目前Web開發領域的開發生態較為成熟，基于Vue等框架的第三方UI庫也非常完善，開發效率上不僅沒有帶來移動端的提升，甚至不如現有主流的開發方式。

在實踐應用開發中，Flutter開發框架發揮了很好的作用，一方面編程語言的切入門檻不高，另一方面其本身所倡導的聲明式交互界面構建技術帶來了快速構建與預覽界面效果的特性，使得開發過程快速連貫，在業務需求變化時也能很快進行雙端的修改響應。從原型設計到第一版交付，僅用了一個月時間，隨后的應用迭代也可快速進行，可以形成一種跨平臺應用快速開發的模式。

結語：移動互聯網歷經高速發展的黃金10年，多樣的市場需求催化了前端技術不斷升級改造，前端大統一時代正在來臨，大前端技術的發展趨勢已是定勢。隨著通信技術的發展，互聯時代將進入到萬物互聯的物聯網時代，可以預見的是技術將繼續向前，隨著編程技術和思想的持續進步，仍將會有絡繹不絕的新技術出現，而在最后“一公里”的賽道上，作為企業最前線的移動應用技術的發展也必將繼續百花齊放，讓人期待。