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

云南電網(wǎng)有限責任公司電力科學研究院 楊 政

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

1 移動應用現(xiàn)狀

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

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

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

2 移動開發(fā)技術(shù)應用

2.1 移動操作系統(tǒng)發(fā)展情況

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

2.2 移動應用跨平臺技術(shù)的發(fā)展

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

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

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

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

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

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

2.3 主流移動平臺的技術(shù)升級

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

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

在過去的幾年中，整個大前端交互界面技術(shù)領(lǐng)域已開始轉(zhuǎn)向聲明性界面模型，該模型大大簡化了與構(gòu)建和更新界面關(guān)聯(lián)的工程設計。該技術(shù)的工作原理是在概念上從頭開始重新生成整個屏幕，然后僅執(zhí)行必要的更改，而同時，這樣的方式可避免手動更新有狀態(tài)視圖層次結(jié)構(gòu)的復雜性。

3 跨平臺與聲明式技術(shù)的開發(fā)實踐

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

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

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

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

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