移動跨平臺方案對比：WEEX、React Native、Flutter和PWA

本文主要對WEEX、React Native、Flutter和PWA幾大熱門跨平臺方案進行簡單的介紹和對比。內容選自《WEEX跨平臺開發實戰》 （WEEX項目負責人力薦，從入門到實戰，教你玩轉移動前端跨平臺開發！）

傳統的原生Android、iOS開發面臨着諸多難以解決的問題，例如開發週期長、迭代緩慢等，所以不少公司備受困擾。近年來，伴隨着「大前端」概念的提出和興起，涌現出一大批移動跨平臺開發框架和模式，爲解決傳統移動開發問題找到了新的方向。

從早期的PhoneGap、Inoic等Hybrid混合技術，到如今耳熟能詳的React Native、WEEX和Flutter等跨平臺技術，藉助這些優秀的跨平臺開發框架，在不犧牲性能和體驗的前提下，開發進度和多端研發的問題獲得有效解決。

WEEX是由阿里巴巴研發的一套移動跨平臺技術框架，最初是爲了解決移動開發過程當中頻繁發版和多端研發的問題而開發的。使用WEEX提供的跨平臺技術，開發者能夠很方便地使用Web技術來構建具備可擴展的原生性能體驗的應用，並支持在Android、iOS、YunOS和Web等多平臺上部署。具體來講，當在項目中集成WeexSDK以後，就可使用JavaScript（JS）和主流的前端框架來開發移動應用了。

同時，WEEX框架的結構是解耦的，渲染引擎與語法層分離，也不依賴任何特定的前端框架，目前，開發者可使用Vue.js和Rax兩個前端框架來進行WEEX頁面開發。同時，WEEX的另外一個主要目標是跟進流行的Web開發技術並將其與原生開發技術相結合，實現開發效率和運行性能的高度統一。

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

WEEX的整個工做流程圖如上，WEEX框架中最核心的部分是JavaScript Runtime。具體來講就是，當須要執行渲染操做時，在iOS環境下選擇基於JavaScriptCore的iOS系統提供的JSContext，在Android環境下使用基於JavaScriptCore的JavaScript引擎。

當JSBundle從服務器端下載完成以後，WEEX在Android、iOS和Web端會運行一個JavaScript引擎來執行JSBundle，同時向各終端的渲染層發送渲染指令，並調度客戶端的渲染引擎實現視圖渲染、事件綁定和處理用戶交互等操做。

因爲Android、iOS和HTML5等終端最終使用的是原生的渲染引擎，也就是說使用同一套代碼在不一樣終端上展現的樣式是相同的，而且WEEX使用原生引擎渲染的是原生的組件，因此在性能上要比傳統的WebView方案好不少。

固然，儘管WEEX已經提供了開發者所須要的最經常使用的組件和模塊，但面對豐富多樣的移動應用研發需求，這些經常使用基礎組件仍是遠遠不能知足開發的須要，所以WEEX提供了靈活自由的擴展能力，開發者能夠根據自身的狀況定作屬於本身客戶端的組件和模塊，從而豐富WEEX生態。

React Native是Facebook公司於2015年4月開源的跨平臺移動應用開發框架，它是Facebook早先開源的React框架在原生移動應用平臺上的衍生產物，目前主要支持iOS和Android兩大平臺。

React Native使用JavaScript語言來開發移動應用，但UI渲染、網絡請求等功能均由原平生臺實現。具體來講就是，開發者編寫的JavaScript代碼會經過中間層轉化爲原生組件後再執行，所以熟悉Web前端開發的技術人員只須要很短的學習過程，就能夠進-入移動應用開發領域，並在不犧牲用戶體驗的前提下提升開發效率。

做爲一個跨平臺技術框架，React Native從上到下能夠分爲JavaScript層、C++層和原生層。其中，C++層主要用於實現動態連接庫（.so文件），以做爲中間適配層進行橋接，並實現JavaScript端與原平生臺的雙向通訊。

在React Native的三層架構中，最核心的就是中間的C++層，C++層最核心的功能就是封裝JavaScriptCore，用於執行對JavaScript的解析。同時，原平生臺提供的各類原生模塊（如網絡請求模塊、ViewGroup組件模塊）和JavaScript端提供的各類模塊（如JS EventEmiter模塊）都會在C++層實現的.so文件中被保存起來，最終經過C++層中保存的映射實現兩端的交互。React Native框架的工做原理以下圖。

在React Native的開發過程當中，大多數狀況下開發人員並不須要瞭解React Native框架的具體細節，只須要專一JavaScript端的代碼邏輯實現便可。但須要注意的是，因爲JavaScript代碼運行在獨立的JavaScript線程中，因此在JavaScript中不能處理耗時的操做，如fetch網絡請求、圖片加載和數據持久化等。

最終，JavaScript代碼會被打包成一個bundle文件並自動添加到應用程序的資源目錄下，而應用程序最終加載的也是打包後的bundle文件。React Native的打包腳本位於/node_modules/react-native/local-cli目錄下，打包後經過metro模塊壓縮成bundle文件。一般bundle文件只包含打包的JavaScript代碼，並不包含圖片、多媒體等靜態資源，而打包後的靜態資源會被複制到對應的平臺資源文件夾中。

整體來講，React Native使用JavaScript來編寫應用程序，而後調用原生組件執行頁面渲染操做，在提升了開發效率的同時又保留了原生的用戶體驗。而且，伴隨着Facebook重構React Native工做的完成，React Native也將變得更快、更輕量、更強大。

Flutter是谷歌公司開源的移動跨平臺框架，其歷史最先能夠追溯到2015年的Sky項目，該項目能夠同時運行在Android、iOS和Fuchsia等包含Dart虛擬機的平臺上，而且性能無限接近原平生臺。與React Native和WEEX使用JavaScript做爲編程語言，以及使用平臺自身引擎渲染界面不一樣，Flutter直接選擇使用2D繪圖引擎庫Skia來渲染界面。

如上圖，Flutter框架主要由Framework層和Engine層組成，咱們基於Framework層開發的App最終會運行在Engine層上。其中，Engine是Flutter提供的獨立虛擬機，正是因爲它的存在，Flutter程序才能運行在不一樣的平臺上，實現跨平臺運行的能力。

與React Native和WEEX使用原生組件渲染界面不一樣，Flutter並不須要使用原生組件來渲染界面，而是使用自帶的渲染引擎（Engine層）來繪製頁面組件（Flutter顯示單元），而且Dart代碼會經過AOT被編譯爲對應平臺的原生代碼，實現與平臺的直接通訊，不須要經過JavaScript引擎進行橋接，也不須要使用原平生臺的Dalvik虛擬機。Engine層的渲染架構圖以下。

做爲Flutter框架的重要組成部分，Widget是Flutter應用界面開發的基本內容，每一個Widget都是界面的不可變聲明。在Flutter應用開發中，Widget是不能直接更新的，須要經過Widget的狀態來間接更新，這是由於Flutter的Widget借鑑了現代響應式框架的構建過程，它有本身特有的狀態。當Widget的狀態發生變化時，Widget會從新構建用戶界面，而且Flutter會對比先後的不一樣，以確保底層渲染樹從一個狀態轉換到下一個狀態時所需的更改最小。

整體來講，Flutter是目前最好的跨平臺解決方案之一，它只用一套代碼即可生成Android和iOS兩種平臺上的應用，很大程度上減小了App的開發和維護成本。同時，Dart語言強大的性能表現和豐富的特性，也使得跨平臺開發變得更加便利。而不足的是，Flutter還處於初期測試階段，許多功能還不是特別完善，而全新的Dart語言也增長了開發者的學習成本。Flutter要徹底替代Android和iOS原生開發，還有比較長的路要走。

PWA，全稱爲Progressive Web App，是谷歌公司在2015年提出的漸進式網頁開發技術。PWA結合了一系列的現代Web技術，並使用多種技術來加強Web App的功能，最終可讓網頁應用得到媲美原生應用的體驗。

相比於傳統的網頁技術，漸進式Web技術是一個橫跨Web技術及原生App開發的技術解決方案，具備可靠、快速且可參與等諸多特色。

具體來講就是，當用戶從手機主屏幕啓動應用時，不用考慮網絡的狀態就能夠馬上加載出網頁。而且相比傳統的網頁加載速度，PWA的加載速度是很是快的，這是由於PWA使用了Service Worker 等先進技術。除此以外，PWA還能夠被添加到用戶的主屏幕上，不用從應用商店進行下載便可經過網絡應用程序Manifest爲用戶提供媲美原生App的使用體驗。

做爲一種全新的Web技術方案，PWA須要依賴一些重要的技術組件，它們協同工做，爲傳統的Web應用程序注入活力。

其中，Service Worker表示離線緩存文件，其本質是Web應用程序與瀏覽器之間的代理服務器。開發者能夠在網絡可用時將其做爲瀏覽器和網絡之間的代理，也能夠在離線或者網絡極差的環境下使用其中的緩存內容。

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

目前，PWA還處於起步階段，使用的廠商也是諸如Twitter、淘寶、微博等大平臺。不過，PWA做爲谷歌公司主推的一項技術標準，已經被Edge、Safari和FireFox等主流瀏覽器所支持。能夠預見的是，PWA必將成爲又一革命性技術方案。

在當前諸多的跨平臺方案中，React Native、WEEX和Flutter無疑是最優秀的。而從不一樣的細節來看，三大跨平臺框架又有各自的優勢和缺點：

如上表所示，React Native和WEEX採用的技術方案大致相同，它們都使用JavaScript來開發跨平臺應用，經過將中間層轉換爲原生的組件後再利用原生的渲染引擎執行渲染操做。與React Native和WEEX使用原平生臺渲染引擎不一樣，Flutter直接使用Skia引擎來渲染視圖，和平臺沒有直接的關係。就目前跨平臺框架的實現技術來看，JavaScript在跨平臺應用開發中可謂佔據半壁江山，大有「一統天下」的趨勢。

從性能方面來看，Flutter理論上是最好的，React Native和WEEX次之，而且都好於傳統的WebView方案。但從目前的實際應用來看，它們之間卻並無太大的差距，特別是和0.5.0版本以上的React Native對比，性能體驗上的差別並不明顯。

而從社羣和社區角度來看，React Native和Flutter無疑是最活躍的，React Native通過4年多的發展已經成長爲跨平臺開發的實際領導者，並擁有各種豐富的第三方庫和大量的開發羣體。Flutter做爲新晉的跨平臺技術方案，目前還處測試階段，商用的案例也不多。不過，谷歌的號召力一直很強，將來究竟如何發展讓咱們拭目以待。

《WEEX跨平臺開發實戰》是一本系統介紹WEEX跨平臺應用開發的書籍，涵蓋了WEEX開發的方方面面，主要由基礎知識、高級應用開發和項目實戰三部分組成。第一部分重點介紹WEEX開發的基礎知識，後兩部分則重點介紹WEEX開發的進階知識和項目實戰。

本書也是一本WEEX入門與實戰類書籍，適合有必定前端開發基礎或者移動端開發基礎的讀者閱讀。所以，不管你是前端開發者，仍是移動端開發者，均可以經過對本書的學習來掌握移動跨平臺應用開發的技能。