Flutter 框架學(xué)習(xí)
學(xué)習(xí)Flutter ?首先我們要了解Flutter 框架是什么？他是解決什么問題？
????Flutter 本身是Hybrid App，俗稱混合應(yīng)用检激，即混合了 Native技術(shù) 與 Web技術(shù) 進(jìn)行開發(fā)的移動(dòng)應(yīng)用肴捉。在APP中使用 WebView 作為容器直接承載 Web頁面，在他之前業(yè)界也有很多類似的解決方案
那Hybrid App又是什么
????Hybrid App(混合模式移動(dòng)應(yīng)用)是指介于web-app叔收、native-app這兩者之間的app齿穗，兼具"Native App良好用戶交互體驗(yàn)的優(yōu)勢"和"Web App跨平臺開發(fā)的優(yōu)勢"。
????混合開發(fā)中最核心的點(diǎn)就是 Native端 與 H5端 之間的雙向通訊層饺律，其實(shí)這里也可以理解為我們需要一套跨語言通訊方案窃页，來完成 Native(Java/Objective-c/...) 與 JavaScript 的通訊。這個(gè)方案就是我們所說的 JSBridge蓝晒，而實(shí)現(xiàn)的關(guān)鍵腮出，便是作為容器的 WebView，一切的原理都是基于 WebView 的機(jī)制芝薇。
那么都有那些??Hybrid App(混合模式移動(dòng)應(yīng)用)呢？
業(yè)界方案
1作儿、基于 WebView UI 的基礎(chǔ)方案洛二，市面上大部分主流 App 都有采用，例如微信JS-SDK攻锰，通過 JSBridge 完成 H5 與 Native 的雙向通訊晾嘶，從而賦予H5一定程度的原生能力。
2娶吞、基于 Native UI 的方案垒迂，例如 React-Native、Weex妒蛇。在賦予 H5 原生API能力的基礎(chǔ)上机断，進(jìn)一步通過 JSBridge 將js解析成的虛擬節(jié)點(diǎn)樹(Virtual DOM)傳遞到 Native 并使用原生渲染。
3绣夺、近期比較流行的小程序方案吏奸，通過更加定制化的 JSBridge蚂维，并使用雙 WebView 雙線程的模式隔離了JS邏輯與UI渲染床玻，形成了特殊的開發(fā)模式，加強(qiáng)了 H5 與 Native 混合程度联贩，提高了頁面性能及開發(fā)體驗(yàn)烈钞。
4泊碑、Flutter： 他是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面毯欣。采用了高性能渲染引擎(Skia)馒过，界面開發(fā)語言使用dart，底層渲染引擎使用C, C++仪媒，框架層面針對IOS和安卓平臺分別實(shí)現(xiàn)了對應(yīng)的UI風(fēng)格組件庫沉桌。相比webview渲染谢鹊、nativeUI渲染，性能更加出色留凭。由于推出不久佃扼，性能還不夠穩(wěn)定。
與Flutter不同傳統(tǒng)的?Hybrid App(混合模式移動(dòng)應(yīng)用)都是依靠webview渲染蔼夜、nativeUI渲染來完成大致都是如下兩種方式
(一) JavaScript 調(diào)用 Native接口方式
基于WebView的機(jī)制和開放的 API, 實(shí)現(xiàn)這個(gè)功能有三種常見的方案：
1）兼耀、API注入，原理其實(shí)就是 Native 獲取 JavaScript環(huán)境上下文求冷，并直接在上面掛載對象或者方法瘤运，使 js 可以直接調(diào)用，Android 與 IOS 分別擁有對應(yīng)的掛載方式匠题。
2）拯坟、WebView 中的 prompt/confirm/alert 攔截，通常使用 prompt韭山，因?yàn)檫@個(gè)方法在前端中使用頻率低郁季，比較不會出現(xiàn)沖突；
3）钱磅、WebView URL Scheme 跳轉(zhuǎn)攔截梦裂；
4）、在IOS上wkwebview上有window.webkit.messageHandler實(shí)現(xiàn)通信盖淡，支持IOS8及以上
(二) Native 調(diào)用 Javascript接口方式
????由于Native可以算作 H5 的宿主年柠，因此擁有更大的權(quán)限，上面也提到了 Native 可以通過 WebView API直接執(zhí)行 Js 代碼褪迟。這樣的權(quán)限也就讓這個(gè)方向的通訊變得十分的便捷冗恨。
IOS:? ?webview.stringByEvaluatingJavaScriptFromString("alert('NativeCall')")
Android: webView.loadUrl("javascript:JSBridge.trigger('NativeCall')")
Flutter?
????Flutter是Google推出并開源的移動(dòng)應(yīng)用程序（App）開發(fā)框架，主打跨平臺牵咙、高保真派近、高性能。其采用Dart語言作為開發(fā)語言洁桌，開發(fā)者可以通過Dart語言開發(fā)Flutter App渴丸，一套代碼可同時(shí)運(yùn)行在iOS和Android平臺上。Flutter提供了豐富的組件另凌、接口谱轨，開發(fā)者可以很快地為Flutter添加原生擴(kuò)展。
????Flutter與其他用于構(gòu)建App的大多數(shù)框架不同吠谢，因?yàn)镕lutter既不使用WebView土童，也不使用平臺（Android、iOS等）的原生控件工坊。相反献汗，F(xiàn)lutter使用自己的高性能渲染引擎來繪制Widget敢订。這樣不僅可以保證在Android和iOS平臺上UI的一致性，而且也可以避免對原生控件依賴而帶來的限制及高昂的維護(hù)成本罢吃，相比于其他方式楚午，Flutter 更注重的是移動(dòng)端跨平臺方案
????在傳統(tǒng)的原生開發(fā)中，一般都要維護(hù)Android尿招、iOS兩個(gè)開發(fā)團(tuán)隊(duì)矾柜，版本迭代時(shí)，無論人力成本就谜，還是測試成本都會變大怪蔑。這一點(diǎn)可能對于我們普通的android程序員感受并不深，或者說我們不care這一點(diǎn)丧荐。
????但是站在開發(fā)的角度上缆瓣，如果能夠有一套代碼，直接就能夠開發(fā)出android的apk和ios的ipa篮奄，一套代碼也能夠很好的完成復(fù)用捆愁、測試以及UI風(fēng)格的統(tǒng)一。
????早在2008年窟却，就有一款叫做“PhoneGap”的框架獲了獎(jiǎng)并開始支持Android平臺。現(xiàn)在我們說的PhoneGap一般指的是"Cordova"呻逆。它是PhoneGap貢獻(xiàn)給Apache后的開源項(xiàng)目夸赫，是從PhoneGap中抽離出的核心代碼，是驅(qū)動(dòng)PhoneGap的核心引擎咖城。
????兩者維護(hù)的是共同的一份源代碼組件茬腿，只有名字和包名不一樣。PhoneGap是一個(gè)采用HTML宜雀，CSS和JavaScript來完成跨平臺開發(fā)的技術(shù)切平，當(dāng)時(shí)PhoneGap宣稱接近原生性能。然而它的工作原理是基于WebView辐董，然后利用JavaInterface來完成與原生代碼的交互悴品。我們稱這種工具為WebView JavaScript Bridge(JsBridge)。這種方式简烘，能夠很好的解決跨平臺與動(dòng)態(tài)更新的需求苔严。
????但是我們都知道android WebView的渲染效率很差，同時(shí)JavaScript是解釋型語言孤澎，它不需要編譯届氢，在運(yùn)行時(shí)候解釋執(zhí)行，這就導(dǎo)致JavaScript的執(zhí)行性能太低了覆旭。同時(shí)因?yàn)閍ndroid自身的問題退子，使用WebView過程中消耗的內(nèi)存岖妄，沒有辦法在不需要使用的時(shí)候進(jìn)行及時(shí)的回收，這樣會導(dǎo)致我們的可用內(nèi)存越來越少寂祥，最終OOM荐虐。所以類似Flutter這種框架的出現(xiàn)是必然的，現(xiàn)有的跨平臺框架壤靶，比如RN都是基于JS缚俏，由于JS的執(zhí)行性能，導(dǎo)致跨平臺應(yīng)用性能一直無法突破瓶頸贮乳。
????而Flutter在Debug使用JIT編譯忧换，支持熱重載，能夠提高我們的開發(fā)效率向拆，而Release中利用AOT直接編譯成機(jī)器碼亚茬，能夠達(dá)到更好的性能。從設(shè)計(jì)角度而言浓恳，F(xiàn)lutter提供了非常豐富的Widget組件刹缝，能夠讓我們非常輕松的實(shí)現(xiàn)Android或者IOS風(fēng)格的UI效果。
