1.2 移動跨平臺技術橫評

1.2.1 阿里巴巴Weex

Weex是由阿里巴巴技術團隊研發的一套移動跨平臺技術框架，初衷是解決移動開發過程中的頻繁發版和多端研發難題。使用Weex提供的跨平臺技術，開發者可以很方便地使用Web技術來構建高性能、可擴展的原生級別的性能體驗，并支持在Android、iOS、YunOS和Web等多平臺上部署。

作為一個前端跨平臺技術框架，Weex建立了一套源碼轉換以及原生端與JavaScript通信的機制。Weex框架表面上是一個前端客戶端框架，但實際上它串聯起了從本地開發、云端部署到資源分發的整個鏈路。

具體來說，在開發階段編寫一個.we文件，然后使用Weex提供的weex-toolkit轉換工具將.we文件轉換為JS bundle，并將生成的JS bundle上傳部署到云端，最后通過網絡請求或預下發的方式加載至用戶的移動客戶端應用中。同時，集成了Weex SDK的客戶端接收到JS bundle文件后，調用本地的JavaScript引擎執行環境執行相應的JS bundle，并將執行過程中產生的各種命令發送到原生端進行界面渲染，整個工作流程如圖1-3所示。

如圖1-3所示，Weex框架中最核心的部分就是JavaScript Runtime。當需要執行渲染操作時：在iOS環境下，使用基于JavaScriptCore內核的iOS系統提供的JSContext；在Android環境下使用基于JavaScriptCore內核的JavaScript引擎。

當JS bundle從服務器下載完成之后，Weex的Android、iOS和HTML 5會運行相應的JavaScript引擎來執行JS bundle，同時向終端的渲染層發送渲染指令，并調用客戶端的渲染引擎進行視圖渲染、事件綁定和處理用戶交互等操作。

由于Android、iOS和HTML 5等終端最終使用的是原生的渲染引擎，也就是說使用同一套代碼在不同終端上展示的樣式是相同的，并且Weex最終使用原生組件來渲染視圖，所以在體驗上要比傳統的WebView方案好很多。

盡管Weex已經提供了開發者所需要的常用組件和模塊，但面對豐富多樣的移動應用研發需求，這些常用基礎組件還是遠遠不能滿足開發的需要，因此Weex提供了靈活自由的擴展能力，開發者可以根據自身的情況開發自定義組件和模塊，從而豐富Weex生態。

1.2.2 谷歌Flutter

Flutter是谷歌技術團隊開源的移動跨平臺技術框架，其歷史最早可以追溯到2015年的Sky項目。該項目可以同時運行在Android、iOS和fuchsia等包含Dart虛擬機的平臺上，并且性能無限接近原生。React Native和Weex使用JavaScript作為編程語言，使用平臺自身引擎渲染界面，而Flutter直接選擇2D繪圖引擎庫Skia來渲染界面。

如圖1-4所示，Flutter框架主要由Framework層和Engine層組成，基于Framework開發的App最終會運行在Engine層上。其中，Engine是Flutter提供的獨立虛擬機，正是由于它的存在，Flutter程序才能運行在不同的平臺上，實現跨平臺運行。

與React Native和Weex使用原生控件渲染界面不同，Flutter使用Engine來繪制Widget（部件），即Flutter顯示的單元，并且Dart代碼會通過AOT編譯為平臺的原生代碼，進而與平臺直接通信，不需要JavaScript引擎的橋接，也不需要原生平臺的Dalvik虛擬機，如圖1-5所示。

同時，Flutter的Widget采用現代響應式框架構建，而Widget是不可變的，僅支持一幀，并且每一幀上的內容不能直接更新，需要通過Widget的狀態來間接更新。在Flutter中，無狀態和有狀態Widget的核心特性是相同的，Flutter會重新構建視圖的每一幀，通過State對象，Flutter就可以跨幀存儲狀態數據并恢復它。

總體來說，Flutter是目前跨平臺開發中較好的方案，它利用一套代碼即可生成Android和iOS兩種平臺的應用，很大程度上減少了App的開發和維護成本。同時，Dart語言強大的性能表現和豐富的特性，也使得跨平臺開發變得更加便利。而不足之處在于，Flutter的許多功能目前還不是特別完善，全新的Dart語言也帶來了學習上的成本。Flutter如果想要完全替代原生Android和iOS開發，還有比較長的路要走。

1.2.3 谷歌PWA

PWA，全稱Progressive Web App，是谷歌技術團隊在2015年發布的漸進式Web開發技術。PWA結合了一系列的現代Web技術，使用多種技術來增強Web App的功能，最終可以讓Web應用呈現出媲美原生應用的體驗。

相比于傳統的Web技術，漸進式Web技術是可以橫跨Web技術及原生App開發的技術解決方案，可靠、快速且可參與。

具體來說，當用戶從主屏幕啟動應用時，不用考慮網絡的狀態就可以立刻加載出PWA，并且PWA由于具有Service Worker等先進技術的加持，加載速度是非常快的。除此之外，PWA還可以添加在用戶設備的主屏幕上，不用從應用商店進行下載即可通過網絡應用程序Manifest file提供類似于App的使用體驗。

作為一種全新Web技術方案，PWA的正常工作需要一些重要的技術組件，它們協同工作并為傳統的Web應用程序注入活力，如圖1-6所示。

其中，Service Worker表示離線緩存文件，其本質是Web應用程序與瀏覽器之間的代理服務器，可以在網絡可用時作為瀏覽器和網絡間的代理，也可以在離線或者網絡極差的環境下使用離線的緩沖文件。

Manifest則是W3C的技術規范，它定義了基于JSON的清單，為開發人員提供一個放置與Web應用程序關聯的元數據的集中地點。Manifest是PWA開發中的重要一環，它為開發人員控制應用程序提供了可能。

目前，漸進式Web應用還處于起步階段，應用者也是諸如Twitter、淘寶、微博等大平臺技術團隊。不過，PWA作為谷歌技術團隊主推的一項技術標準，Edge、Safari和FireFox等主流瀏覽器也都開始支持漸進式Web應用。相信PWA在未來的Web技術棧中會開辟屬于自己的一片天地。

1.2.4 對比與分析

在當前諸多的跨平臺方案中，React Native、Weex和Flutter無疑是優秀的。而從不同的維度來看，三大跨平臺框架又有各自的優點和缺點，如表1-1所示。

如上表所示，React Native、Weex采用的技術方案大體相同，它們都使用JavaScript作為編程語言，然后通過中間層轉換為原生組件，再利用原生渲染引擎執行渲染操作。Flutter直接使用Skia來渲染視圖，并且Flutter Widget使用現代響應式框架來構建，和平臺沒有直接的關系。就目前跨平臺技術來看，JavaScript在跨平臺開發中的應用可謂占據了半壁江山，大有“一統天下”的趨勢。

從性能方面來說，Flutter的性能理論是更好的，React Native和Weex次之，并且都好于傳統的WebView方案。但從目前的實際應用來看，它們之間并沒有太大的差距，性能體驗上的差異并不明顯。

從社群和社區來看，React Native和Flutter無疑更活躍，React Native經過多年發展已經成長為跨平臺開發的實際領導者，并擁有豐富的第三方庫和開發群體。Flutter作為最近才火起來的跨平臺技術方案，還處在快速更新測試階段，商用案例也很少。不過谷歌技術的號召力一直都很強，未來究竟如何發展讓我們拭目以待。