背景

當(dāng)前我們公司客戶端開(kāi)發(fā)，包含三種常用技術(shù)，iOS native、Android native、React-Native，在長(zhǎng)時(shí)間的使用中發(fā)現(xiàn)，React-Native的 UI 統(tǒng)一性不夠，深度開(kāi)發(fā)嚴(yán)重依賴native，性能需要做大量的優(yōu)化工作，所以考察 Flutter 當(dāng)做備選替換方案。

Flutter 是什么

Flutter 是 Google推出并開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架，主打跨平臺(tái)、高保真、高性能。開(kāi)發(fā)者可以通過(guò) Dart語(yǔ)言開(kāi)發(fā) App，一套代碼同時(shí)運(yùn)行在 iOS 和 Android平臺(tái)。 Flutter提供了豐富的組件、接口，開(kāi)發(fā)者可以很快地為 Flutter添加 native擴(kuò)展。同時(shí) Flutter還使用 Native引擎渲染視圖。

跨平臺(tái)自繪引擎

Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件，而是使用Skia作為其2D渲染引擎。

Skia是Google的一個(gè)2D圖形處理函數(shù)庫(kù)，包含字型、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖都有高效能且簡(jiǎn)潔的表現(xiàn)，Skia是跨平臺(tái)的，并提供了非常友好的API，目前Google Chrome瀏覽器和Android均采用Skia作為其繪圖引擎。

高性能

1. Flutter APP采用Dart語(yǔ)言開(kāi)發(fā)。Dart在 JIT 模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當(dāng)以 AOT模式運(yùn)行時(shí)，JavaScript便遠(yuǎn)遠(yuǎn)追不上了
2. Flutter使用自己的渲染引擎來(lái)繪制UI，布局?jǐn)?shù)據(jù)等由Dart語(yǔ)言直接控制，所以在布局過(guò)程中不需要像RN那樣要在JavaScript和Native之間通信

JIT（Just In Time） 動(dòng)態(tài)編譯：解釋執(zhí)行，邊翻譯邊執(zhí)行。

AOT（Ahead Of Time）靜態(tài)編譯：程序在執(zhí)行前全部被翻譯為機(jī)器碼

采用Dart語(yǔ)言開(kāi)發(fā)

開(kāi)發(fā)效率高

Flutter在開(kāi)發(fā)階段采用，采用JIT模式，這樣就避免了每次改動(dòng)都要進(jìn)行編譯，極大的節(jié)省了開(kāi)發(fā)時(shí)間。

在發(fā)布時(shí)可以通過(guò)AOT靜態(tài)編譯生成代碼，不需要解釋執(zhí)行，性能高。

高性能

類型安全

由于Dart是類型安全的語(yǔ)言，支持靜態(tài)類型檢測(cè)，所以可以在編譯前發(fā)現(xiàn)一些類型的錯(cuò)誤，并排除潛在問(wèn)題

調(diào)研問(wèn)題

能否絕大部分脫離原生開(kāi)發(fā)

在 React-Native 深入開(kāi)發(fā)的工程中我們發(fā)現(xiàn)，其實(shí)還是需要大量的原生開(kāi)發(fā)人員配合，或者開(kāi)發(fā)者本身具有原生開(kāi)發(fā)經(jīng)驗(yàn)，如果Flutter 開(kāi)發(fā)需要過(guò)多的原生開(kāi)發(fā)，則沒(méi)有必要采用。因?yàn)樵诟咚俚倪^(guò)程中，如果需要原生開(kāi)發(fā)介入，溝通成本過(guò)高，而如果開(kāi)發(fā)人員本身具有原生開(kāi)發(fā)經(jīng)驗(yàn)，則招聘成本會(huì)比較高。

Flutter 通過(guò)引入和使用Skia 渲染 UI，比 RN 的跨平臺(tái)更徹底一些，但是如果涉及其它系統(tǒng)能力調(diào)用，依然要涉及原生開(kāi)發(fā)。初步評(píng)估，還是需要不少的原生開(kāi)發(fā)任務(wù)，比 React-Native 少一些，但是也不能絕大部分脫離原生開(kāi)發(fā)。

性能是否媲美原生

目前 React-Native 的性能基本接近原生，F(xiàn)lutter 是否能達(dá)到同樣性能。

Flutter 使用 Skia 渲染 UI，而且代碼通過(guò)靜態(tài)編譯生成，在執(zhí)行前不需要解釋，性能要比 React-Native 優(yōu)秀，應(yīng)該基本等同于 native 代碼，而且，咸魚(yú)團(tuán)隊(duì)驗(yàn)證過(guò)，部分場(chǎng)景，甚至要優(yōu)于 native。性能是很完美的

開(kāi)發(fā)成本

學(xué)習(xí)成本

開(kāi)發(fā)語(yǔ)言使用 dart，dart 借鑒了不少語(yǔ)言的特性，有很多地方跟 JavaScript 很像，基本使用的入門(mén)門(mén)檻不高。開(kāi)發(fā)的IDE 官方推薦 Android Studio 或者VS Code。學(xué)習(xí)成本與 React-Native 基本一致。

遷移成本

暫時(shí)不考慮

是否支持熱更新

不支持熱更新

由于 Flutter 在發(fā)布時(shí)使用的時(shí) AOT 的模式生成機(jī)器碼，與native 一樣，所以不支持熱更新。官方解釋了不支持的幾個(gè)原因?？偨Y(jié)起來(lái)，應(yīng)該是如果要實(shí)現(xiàn)熱更新，很可能需要廢除 AOT 這個(gè)模式，這就讓 Flutter 跟 React-Native 差不多，性能會(huì)變慢。

配套社區(qū)是否完善

Flutter 團(tuán)隊(duì)近兩年的更新頻繁，社區(qū)也再不斷壯大，基本使用應(yīng)該是沒(méi)有問(wèn)題的，但是跟強(qiáng)大的前端開(kāi)發(fā)社區(qū)比，還是要差一些的。

與 React-Native 對(duì)比

結(jié)論

Flutter 目前來(lái)看，性能是最好的，UI 的一致性好，社區(qū)也已經(jīng)基本完善，但是與 React-Native 一樣，深度開(kāi)發(fā)還是離不開(kāi) native 開(kāi)發(fā)人員。可以看成是跨平臺(tái)的原生開(kāi)發(fā)，如果不追求熱更新，是個(gè)很好的選擇。