前言
本人目前負(fù)責(zé)的項(xiàng)目是原生+Webview方式開發(fā)的铭段，由于Webview的體驗(yàn)不太友好，所以決定選擇一種混編的方式恢共，選擇一種跨平臺(tái)的技術(shù)來提升改善Webview的體驗(yàn)榨咐，通過各種權(quán)衡考慮使用了RN，雖然目前RN在重構(gòu)砰识，但是沒有人可以否認(rèn)目前RN的霸主地位能扒，我相信它會(huì)越來越好的，本章節(jié)就不說RN了辫狼，接下來說說Google的Flutter初斑。
Flutter Demo項(xiàng)目地址 : Flutter-App
Flutter
Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面膨处。 Flutter可以與現(xiàn)有的代碼一起工作见秤。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用真椿，并且Flutter是完全免費(fèi)鹃答、開源的。
Flutter 是由 Google 的工程師團(tuán)隊(duì)打造的突硝，用于創(chuàng)建高性能测摔、跨平臺(tái)的移動(dòng)應(yīng)用的框架。
Flutter 針對(duì)當(dāng)下以及未來的移動(dòng)設(shè)備進(jìn)行優(yōu)化，專注于 Android and iOS 低延遲的輸入和高幀率
Flutter的設(shè)計(jì)跟react-native很像锋八，但是比RN進(jìn)了一步
Flutter的開發(fā)語言是Dart
移動(dòng)端跨平臺(tái)開發(fā)技術(shù)演進(jìn)
現(xiàn)在主流的移動(dòng)開發(fā)平臺(tái)是Android和iOS浙于，之前還有過windows phone。從最開始的Hybrid混合開發(fā)技術(shù)挟纱，到RN的橋接技術(shù)路媚，到現(xiàn)在新興的Flutter技術(shù)，跨平臺(tái)開發(fā)技術(shù)一直在演進(jìn)樊销。
跨平臺(tái)開發(fā)第一個(gè)考慮的就是性能問題
- RN的效率由于是將View編譯成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率問題,RN的渲染機(jī)制是基于前端框架的考慮,復(fù)雜的UI渲染是需要依賴多個(gè)view疊加.比如我們渲染一個(gè)復(fù)雜的ListView,每一個(gè)小的控件,都是一個(gè)native的view,然后相互組合疊加.想想此時(shí)如果我們的list再需要滑動(dòng)刷新,會(huì)有多少個(gè)對(duì)象需要渲染.所以也就有了前面所說的RN的列表方案不友好;
- Flutter 吸收了前兩者的教訓(xùn)之后,在渲染技術(shù)上,選擇了自己實(shí)現(xiàn)(GDI),由于有更好的可控性,使用了新的語言Dart,避免了RN的那種通過橋接器與Javascript通訊導(dǎo)致效率低下的問題,所以在性能方面比RN更高一籌;有經(jīng)驗(yàn)的開發(fā)者可以打開Android手機(jī)開發(fā)者選項(xiàng)里面的顯示邊界布局,發(fā)現(xiàn)Flutter的布局是一個(gè)整體.說明Flutter的渲染沒用使用原生控件進(jìn)行渲染
react-native框架原理圖
Flutter實(shí)現(xiàn)跨平臺(tái)采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScriptCore脏款，而是自己實(shí)現(xiàn)了一臺(tái)UI框架围苫，然后直接系統(tǒng)更底層渲染系統(tǒng)上畫UI。所以它采用的開發(fā)語言不是JS撤师，而Dart剂府。據(jù)稱Dart語言可以編譯成原生代碼，直接跟原生通信剃盾。
Flutter框架原理圖
Flutter將UI組件和渲染器從平臺(tái)移動(dòng)到應(yīng)用程序中腺占，這使得它們可以自定義和可擴(kuò)展。Flutter唯一要求系統(tǒng)提供的是canvas痒谴，以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上衰伯，以及訪問事件（觸摸，定時(shí)器等）和服務(wù)（位置积蔚、相機(jī)等）意鲸。這是Flutter可以做到跨平臺(tái)而且高效的關(guān)鍵。另外Flutter學(xué)習(xí)了RN的UI編程方式尽爆，引入了狀態(tài)機(jī)怎顾，更新UI時(shí)只更新最小改變區(qū)域。
系統(tǒng)的UI框架可以取代漱贱，但是系統(tǒng)提供的一些服務(wù)是無法取代的槐雾。Flutter在跟系統(tǒng)service通信方式，采用的是一種類似插件式的方式幅狮，或者有點(diǎn)像遠(yuǎn)程過程調(diào)用RPC方式募强。這種方式據(jù)說也要比RN的橋接方式高效。
Flutter與RN異同
Flutter性能會(huì)更好無線接近原生的體驗(yàn),Dart是AOT編譯的彪笼，編譯成快速钻注、可預(yù)測(cè)的本地代碼
RN采用JS語言開發(fā)，基于React配猫，對(duì)前端工程師更友好幅恋。Dart語言受眾小
Flutter自己實(shí)現(xiàn)了一套UI框架，丟棄了原生的UI框架泵肄。而RN還是可以自己利用原生框架捆交，兩個(gè)各有好處淑翼。Flutter的兼容性高，RN可以利用原生已有的優(yōu)秀UI
RN的布局更像css品追，而Flutter的布局更像native布局玄括，但是去掉xml通過代碼直接寫需要適應(yīng)下
Flutter的第三方庫(kù)還很少，RN發(fā)展的早肉瓦，雖然也還不完善遭京，F(xiàn)lutter github還有3000多個(gè)issues要解決，還有很長(zhǎng)的路要走泞莉。
