淺談跨平臺框架 Flutter 的優點與結構

做者：個推iOS工程師 伊澤瑞爾

1、背景

目前，移動開發技術主要分爲原生開發和跨平臺開發兩種。其中，原生應用是指在某個特定的移動平臺上，使用平臺所支持的開發工具和語言，直接調用系統提供的API所開發的應用。 原生開發的主要優點體如今： 1.能夠快速訪問本平臺的所有功能，好比攝像頭、GPS等； 2.原生應用的速度快、性能高，並且能夠實現比較複雜的動畫和繪製效果，用戶體驗較好。 原生開發的缺點也很明顯，主要體如今： 1.開發成本較高，不一樣的平臺必須維護不一樣的代碼，人力成本也會隨之增長； 2.有新的功能須要更新時，只能進行版本升級。 隨着移動互聯網的高速發展，在不少的業務場景下，傳統的純原生開發已經不能知足日益增加的業務需求，主要表如今如下兩個方面： 1.應用動態化的需求增大。當需求發生變化，或者是須要增長新的功能時，傳統的純原生應用開發只能經過版本的升級來更新內容，然而應用的上架和審覈都須要必定的時間。所以，開發人員迫切地但願進行應用內容的更新時，能夠不更新版本，提高工做效率。 2.業務需求變化快，開發成本變高。原生開發通常須要技術團隊對iOS、Android兩個開發平臺進行維護。當版本更新迭代時，開發和測試的成本都會增長。 針對上述兩個問題，跨平臺框架應運而生。

2、跨平臺技術簡介

針對上文提到的原生開發所面臨的問題，目前在IT界已經誕生了不少跨平臺框架，主要分爲三類： 1.H5+原生(Cordova、Ionic、微信小程序)； 2.JavaScript開發+原生渲染(React Native、Weex、快應用)； 3.自繪UI+原生(Flutter)。 在本文中，咱們將對React Native、Weex和Flutter進行對比。

1.React Native

React Native是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook開源的JS框架React在原生移動應用平臺的衍生物。React Native使用了react的設計模式，可是其UI渲染、動畫效果、網絡請求等均是由原生來實現的。開發者編寫JS代碼，經過React Native的中間層轉化爲原生控件，並進行操做。也就是說經過JS代碼來調用原生的組件，從而實現相應的功能。 React Native實現跨平臺的功能，主要由Java、C++和Javascript三層所構成的。其中，C++實現的動態連接庫（.so），做爲中間適配層橋接，實現了JS端與原生端的雙向通訊交互。React Native會把應用的JS代碼編譯成一個JS文件，React Native總體框架目標就是爲了解釋並運行這個JS腳本文件，若是是JS擴展的API，則直接經過bridge調用native；若是是UI界面，則映射到virtual DOM這個虛擬的JS數據結構中，經過bridge傳遞到native，而後根據數據設置各個對應的真實native的View。

2.Weex

在Weex設計之初，開發者就考慮到，使其可以在三端（iOS、安卓和H5）上均能獲得展示。在最上面的DSL，阿里通常稱之爲Weex文件（.we），經過Transform轉換爲js-bundle，再部署到服務器，這樣服務端就完成了。在客戶端，第一層是JS-Framework，最後是RenderRengine。

如上圖所示，Weex的輸入是Virtual DOM，輸出是native或H5 view，還原爲內存中的樹型數據結構，再建立view，把事件綁定在view上，設置view的基本屬性。Weex Render會分三個線程，不一樣的線程負責不一樣的事情，讓JS線程優先保障流暢性。

表面上，Weex是一種客戶端技術，但實際上，它串聯起了從本地開發、雲端部署到分發的整個鏈路。開發者能夠在本地像編寫Web頁面同樣先編寫一個APP界面，而後經過命令行工具將之編譯爲一段JavaScript代碼，生成一個Weex的JS bundle。與此同時，開發者能夠將生成的JS bundle部署至雲端，以後經過網絡請求或者預下發的方式加載至用戶的移動應用客戶端。 在移動應用客戶端，Weex SDK會準備一個JavaScript執行環境，在用戶打開一個Weex頁面時，在該環境中執行相應的JS bundle，並將執行過程當中產生的各類命令發送到native端，進行界面渲染、數據存儲、網絡通訊、調用設備及用戶交互響應等。若是用戶但願使用瀏覽器訪問這個界面，那麼他能夠在瀏覽器中打開一個相同的Web頁面，這個頁面和移動應用使用相同的頁面源代碼，但被編譯成適合Web展現的JS Bundle，經過瀏覽器裏的javaScript引擎及Weex SDK運行起來的。

3.Flutter

Flutter 是Google推出並開源的移動應用開發框架，主打跨平臺、高保真、高性能。開發者能夠經過Dart語言進行APP開發，只須要一套代碼就能夠同時構建Android和iOS應用，而且能夠達到與原生應用同樣的性能。Flutter還提供了豐富的組件、接口，開發者能夠高效地爲 Flutter添加native擴展。此外，Flutter還使用了Native引擎渲染視圖，爲用戶提供了良好的體驗。 Flutter與用於構建移動應用程序的其它多數框架不一樣，由於Flutter既不使用WebView，也不使用操做系統的原生控件。相反，Flutter使用本身的高性能渲染引擎來繪製widget。這樣不只能夠保證在Android和iOS的UI一致性，並且也能夠避免對原生控件依賴而帶來的限制和高昂的維護成本。 同時，Flutter使用Skia做爲2D引擎渲染，Skia是Google的一個2D圖形處理函數庫，在字型、座標轉換以及點陣圖等方面都有高效並且簡潔的表現。Skia是跨平臺的，並提供了很是友好的API。因爲Android系統已經內置了Skia，因此Flutter在打包APK時，不須要再將Skia打包到APK中，可是iOS系統並未內置Skia，因此在構建API時，必須將Skia一塊兒打包。

3、高性能的Flutter

目前，Flutter程序主要有兩種運行方式：靜態編譯與動態解釋。靜態編譯的程序在執行前，會被所有翻譯爲機器碼，一般將這種類型稱爲AOT，即 「提早編譯」。解釋執行則是一句句地邊翻譯邊運行，一般將這種類型稱爲JIT，即「即時編譯」。 AOT程序的典型表明是用C/C++開發的應用，它們必須在執行前編譯成機器碼。而JIT的表明則很是多，如JavaScript、python等。事實上，全部腳本語言都支持JIT模式。但須要注意的是，JIT和AOT指的是程序運行方式，和編程語言並不是是強關聯的，有些語言既能夠以JIT方式運行，也能夠以AOT方式運行，如Java、Python，它們能夠在第一次執行時編譯成中間字節碼，而後在以後的執行中，直接執行字節碼。 Flutter的高性能主要靠兩點來保證，首先，Flutter APP採用Dart語言進行開發。當Dart在 JIT模式下時，其運行速度與 JavaScript基本持平。此外Dart支持 還AOT，當Dart在 AOT模式下事，其運行速度遠超JavaScript。速度的提高對高幀率下的視圖數據計算頗有幫助。 其次，Flutter使用本身的渲染引擎來繪製UI，佈局數據等由Dart語言直接控制，因此在佈局過程當中不須要像RN那樣要在JavaScript和Native之間通訊，在一些滑動和拖動的場景下具備明顯優點。因爲滑動和拖動每每會引發佈局的變化，因此JavaScript須要不停地與Native之間同步佈局信息，這和在瀏覽器中要JavaScript頻繁操做DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

4、爲何Flutter會選擇Dart語言？

1.開發效率高。

Dart運行時和編譯器支持Flutter的兩個關鍵特性的組合，分別是基於JIT的快速開發週期和基於AOT的發佈包。基於JIT的快速開發週期：Flutter在開發階段，採用JIT模式，這樣就避免了每次改動都須要進行編譯，極大地節省了開發時間。基於AOT的發佈包，Flutter在發佈時能夠經過AOT生成高效的ARM代碼，以保證應用性能。而JavaScript則不具有這個能力。 2.高性能。

爲了實現流暢、高保真的的UI體驗，Flutter必須在每一個動畫幀中都運行大量的代碼。這意味着須要一種既能支持高性能，又能保證不丟幀的週期性暫停的語言，而Dart支持AOT，在這一點上比JavaScript更有優點。 3.快速分配內存。

Flutter框架使用函數式流，這使得它在很大程度上依賴於底層的內存分配器。

4.類型安全。

因爲Dart是類型安全的語言，支持靜態類型檢測，因此能夠在編譯前就發現一些類型的錯誤，並排除潛在問題。這對於前端開發者來講更具備吸引力。而JavaScript是一個弱類型語言，這也是爲何在諸多前端社區中，會有衆多爲JavaScript代碼添加靜態類型檢測的擴展語言和工具。

5、Flutter框架結構

Flutter Framework是一個徹底由Dart語言構建的SDK，它實現了一整套自底而上的基礎庫。 1.底部兩層(Foundation和Animation、Painting、Gestures)是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪製能力。

2.Rendering層是一個抽象的佈局層，它依賴於dart UI層。Rendering層會構建一個UI樹，當UI樹有變化時，它會隨即計算出有變化的部分，而後更新UI樹，最終將UI樹繪製到屏幕上。這個過程相似於React中的虛擬DOM。Rendering層能夠說是Flutter UI框架最核心的部分，它除了肯定每一個UI元素的位置、大小以外，還要進行座標變換和繪製(調用底層dart:ui)。

3.Widgets層是Flutter提供的一套基礎組件庫，在基礎組件庫之上，Flutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。

Flutter Engine：這是一個徹底由 C++實現的 SDK，其中包括了 Skia引擎、Dart運行時和文字排版引擎等。在代碼調用 dart:ui庫時，調用最終會走到Engine層，而後實現真正的繪製邏輯。 React Native、Weex和Flutter進行對比結果以下所示：

6、總結

從Flutter的設計理念來看，其總體架構都是具備革命性的，相比於其餘架構，它實現了真正意義上的跨平臺。它可以讓各平臺的體驗一致，而且讓用戶體驗達到更優。現現在，Flutter的各類UI庫和組件都在不斷增長，與之相關的各類生態系統和社區也在不斷完善，它對新的操做系統的適配性將會愈來愈強。相信在不久的未來，Flutter會慢慢成熟起來，成爲主流的開發語言之一。