前言
本來這一篇應(yīng)該介紹如何搭建Flutter開發(fā)環(huán)境的，但我想在了解Flutter前，不妨了解一下跨平臺(tái)技術(shù)的演進(jìn)鸟款，這樣更有助于學(xué)習(xí)Flutter，也能認(rèn)清Flutter的優(yōu)勢(shì)和本質(zhì)削樊。這篇文章還有一個(gè)目的豁生，就是希望大家是玩技術(shù)的人兔毒，而不是被技術(shù)玩的人漫贞，對(duì)于不同的技術(shù)要有自己的判斷。
1. 跨平臺(tái)技術(shù)的誕生
我是2010年開始從事的Android開發(fā)育叁，當(dāng)時(shí)會(huì)Android和iOS開發(fā)的很少迅脐，也不火，所有人都在“摸著河底過河”豪嗽，項(xiàng)目更沒有第三方框架一說谴蔑，大都是自己寫的，不像現(xiàn)在各種的框架滿天飛龟梦。隨著移動(dòng)開發(fā)的發(fā)展隐锭，互聯(lián)網(wǎng)公司也是層出不窮，有些公司迫于競(jìng)爭(zhēng)计贰，想要更迅速的更省成本的進(jìn)行開發(fā)钦睡，就不再滿足Android端一套代碼，iOS端一套代碼躁倒。與此同時(shí)荞怒，其他技術(shù)領(lǐng)域和各大公司也都覬覦著這份大蛋糕，紛紛推出相關(guān)的技術(shù)秧秉，這樣跨平臺(tái)技術(shù)應(yīng)運(yùn)而生褐桌，并且開始在公司中生根發(fā)芽。
Android和iOS生態(tài)太大了象迎，我們可以把它們比作第一級(jí)生態(tài)荧嵌，想要顛覆這兩個(gè)系統(tǒng)的曾經(jīng)出現(xiàn)過，但都失敗了砾淌，因此建立次級(jí)生態(tài)是最穩(wěn)妥的策略完丽，Android平臺(tái)更加開放，因此次級(jí)生態(tài)的中心就是Android拇舀，次生態(tài)的形式多種多樣逻族，比如在Android系統(tǒng)的基礎(chǔ)上魔改建立自己的生態(tài)，再或者推出各種跨平臺(tái)技術(shù)建立生態(tài)骄崩∑噶郏跨平臺(tái)技術(shù)產(chǎn)生的框架實(shí)在太多了，很多還沒等我們?nèi)W(xué)去了解要拂，它們就沒落了抠璃，成為了跨平臺(tái)技術(shù)的發(fā)展的一個(gè)過度產(chǎn)物⊥讯瑁跨平臺(tái)技術(shù)的產(chǎn)物是不靠譜還是趨勢(shì)搏嗡，我想讀完本篇文章你會(huì)有自己的理解。
跨平臺(tái)技術(shù)的分類沒有標(biāo)準(zhǔn)的答案，這里把它們分類為5種采盒，分別Web App旧乞、Hybrid App、語言編譯轉(zhuǎn)換磅氨、原生渲染尺栖、自繪UI。下面分別介紹它們烦租。
2. Web App
Web App是指基于Web的應(yīng)用延赌，運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，相當(dāng)于一個(gè)網(wǎng)頁然后加一個(gè)App的殼叉橱。2014年HTML5的標(biāo)準(zhǔn)規(guī)范制定完成挫以，在網(wǎng)絡(luò)輿論上Web App大有取代Native App的氣勢(shì)，但Web App有以下缺點(diǎn)窃祝，使得它始終是“主角的心屡贺，配角的命” ：
- 性能低，操作體驗(yàn)不好
- 無法調(diào)用原生API锌杀，很多功能無法實(shí)現(xiàn)甩栈，
- 依賴于網(wǎng)絡(luò)，網(wǎng)速慢時(shí)體驗(yàn)很差糕再，并且沒有離線功能量没，優(yōu)化不好的話會(huì)消耗流量
- 只能做為一個(gè)臨時(shí)的入口，用戶留存率低
在Web App的基礎(chǔ)上突想，又出現(xiàn)了幾個(gè)進(jìn)化者殴蹄，這里主要介紹PWA。
2.1 PWA
PWA（Progressive Web App）意為漸進(jìn)式增強(qiáng)Web應(yīng)用猾担，它不是一門技術(shù)袭灯，而是一個(gè)概念，使用多種技術(shù)來增強(qiáng) Web App的功能：
- 用Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技術(shù)實(shí)現(xiàn)離線加載和緩存
- 實(shí)現(xiàn)了推送和通知
- 可以直接添加到手機(jī)的桌面上
- 使用Service Worker可以進(jìn)行后臺(tái)同步
總結(jié)起來绑嘹，PWA的主要的能力就是離線稽荧、推送、桌面訪問工腋，可以說PWA賦予Web App原生的體驗(yàn)姨丈，但是PWA一直不溫不火的原因主要有以下幾點(diǎn)： - 游覽器對(duì)PWA技術(shù)支持還不夠全面， 不是每一款游覽器都能100%的支持PWA
- 國內(nèi)一些手機(jī)廠商對(duì)Android系統(tǒng)各種魔改擅腰，對(duì)PWA的兼容性不好蟋恬，甚至不支持PWA
- 平臺(tái)的競(jìng)爭(zhēng)，iOS對(duì)PWA的支持力度遠(yuǎn)遠(yuǎn)低于Android趁冈，所以PWA在iOS上的體驗(yàn)打了折扣歼争。PWA面對(duì)類似的微信小程序和快應(yīng)用的競(jìng)爭(zhēng)中拜马，并沒有優(yōu)勢(shì)。
3. Hybrid App
除了采用原生和Web開發(fā)App沐绒，還可以采用HTML5+原生來進(jìn)行混合開發(fā)俩莽，這就是Hybrid。
關(guān)于Hybrid的誕生有一個(gè)小故事洒沦，某個(gè)二線互聯(lián)網(wǎng)公司的App是以原生為主，HTML5開發(fā)打醬油价淌，隨著應(yīng)用越來越復(fù)雜申眼，終于有一天發(fā)現(xiàn)原生有一個(gè)方法最大數(shù)限制，一些頁面需要內(nèi)嵌HTML5的頁面蝉衣，于是原生和HTML5團(tuán)隊(duì)一起做了第一個(gè)Hybrid項(xiàng)目括尸，這一套代碼兼容三端并且效率很高，因此Hybrid App就成了這個(gè)公司的主流病毡，業(yè)界其他的公司也都紛紛效仿濒翻。
原生App的架構(gòu)圖如下所示。
通過原生SDK提供的API啦膜，App可以與系統(tǒng)底層通信有送，以創(chuàng)建 UI 組件或訪問系統(tǒng)服務(wù)。這些組件被渲染到手機(jī)屏幕僧家，屏幕產(chǎn)生的相應(yīng)的事件會(huì)被傳回給組件雀摘。因?yàn)槊總€(gè)平臺(tái)的系統(tǒng)組件是不同的，你需要為每個(gè)平臺(tái)開發(fā)單獨(dú)的 App八拱，而Hybrid App不必這樣阵赠，Hybrid App的原生UI組件用來展示交互復(fù)雜和渲染要求高的界面，其他的可以交給HTML5來展示肌稻。
Hybrid App雖然開發(fā)效率高清蚀，可以跨平臺(tái)，但是Hybrid體驗(yàn)比不上原生爹谭，對(duì)于需要快速試錯(cuò)枷邪、快速占領(lǐng)市場(chǎng)的團(tuán)隊(duì)來說，Hybrid App是一個(gè)不錯(cuò)的選擇诺凡，后期團(tuán)隊(duì)穩(wěn)定下來后齿风，最好還是要做體驗(yàn)更好的原生APP或者使用其他體驗(yàn)更好的跨平臺(tái)技術(shù)。
Hybrid相關(guān)的技術(shù)有很多绑洛，比如PhoneGap救斑、Cordova、Ionic真屯、VasSonic等等脸候，我們大概來了解一下。
3.1 Cordova
說到Cordova，不得不提到他的前身PhoneGap运沦，PhoneGap面向Web開發(fā)人員泵额，通過使用HTML、CSS和Javascript構(gòu)建跨平臺(tái)App携添。2011年嫁盲，Apache收購了Nitobi Software和它的PhoneGap產(chǎn)品，并對(duì)PhoneGap進(jìn)行開源烈掠，PhoneGap 2.0版本時(shí)羞秤，產(chǎn)品更名為Apache Cordova。目前Cordova支持的平臺(tái)有Android左敌、iOS瘾蛋、Windows、Mac OS X矫限、Electron哺哼。
Cordova的體系結(jié)構(gòu)圖如下所示。
Cordova同樣使用WebView來展示界面叼风，插件是Cordova中不可或缺的一部分取董，Apache Cordova維護(hù)了名為Core Plugins的插件，這些核心插件為App提供訪問設(shè)備功能无宿，如電池甲葬，相機(jī)，聯(lián)系人等懈贺。除了核心插件之外经窖，還有一些第三方插件可以使用，你也可以開發(fā)一個(gè)自己的插件梭灿。
3.2 Ionic
Ionic Framework是一個(gè)開源UI工具包画侣，最早的目標(biāo)是使用HTML，CSS和JavaScript等Web技術(shù)開發(fā)移動(dòng)應(yīng)用程序堡妒。由于Web技術(shù)的這一基礎(chǔ)配乱，Ionic可以在網(wǎng)絡(luò)運(yùn)行的任何地方運(yùn)行，比如 iOS皮迟，Android搬泥，瀏覽器，Electron伏尼，PWA等等忿檩。
目前，Ionic Framework已與Angular正式集成爆阶，但對(duì)Vue和React的支持正在開發(fā)中燥透。
3.3 VasSonic
VasSonic是由騰訊VAS團(tuán)隊(duì)開發(fā)的輕量級(jí)高性能混合框架沙咏，旨在加速在Android和iOS平臺(tái)上運(yùn)行的H5首屏。VasSonic不僅支持服務(wù)器呈現(xiàn)的靜態(tài)或動(dòng)態(tài)網(wǎng)站班套，而且還完美兼容Web離線資源肢藐。VasSonic使用自定義的url連接而不是原始網(wǎng)絡(luò)連接來請(qǐng)求索引html，因此它可以提前或并行請(qǐng)求資源以避免等待視圖初始化吱韭。在這種并行的情況下吆豹，VasSonic可以通過WebKit或Blink內(nèi)核讀取和呈現(xiàn)部分?jǐn)?shù)據(jù)，而無需花費(fèi)太多時(shí)間等待數(shù)據(jù)流的結(jié)束理盆。
3.4 微信小程序
?微信小程序的主要開發(fā)語言是 JavaScript 痘煤，小程序的開發(fā)同普通的網(wǎng)頁開發(fā)相比有很大的相似性。
小程序的運(yùn)行環(huán)境分成渲染層和邏輯層熏挎，這兩層分別由2個(gè)線程管理速勇，渲染層的界面使用了WebView 進(jìn)行渲染晌砾，邏輯層采用JsCore線程運(yùn)行JS腳本坎拐。這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端（Native）中的JSBridage做中轉(zhuǎn)。邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)养匈，小程序的通信模型下圖所示哼勇。
其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層呕乎。
微信小程序和PWA都是基于Web技術(shù)积担，原理的區(qū)別是小程序類似Hybrid架構(gòu)，WebView渲染基本的網(wǎng)頁內(nèi)容猬仁，對(duì)渲染性能要求較高的組件帝璧，通過原生組件來實(shí)現(xiàn)，比如相機(jī)湿刽、視頻的烁、地圖等等，另外傳統(tǒng)Web無法訪問的本地能力诈闺，需要通過JS SDK來實(shí)現(xiàn)渴庆，而PWA則是使用多種技術(shù)增強(qiáng)Web能力，以達(dá)到接近Native應(yīng)用的體驗(yàn)雅镊。
微信小程序本身和App就不是競(jìng)爭(zhēng)關(guān)系襟雷，更多的是一個(gè)推廣渠道，它更像是一張海報(bào)仁烹，用于快速推廣倒流耸弄，而App則是要推廣的對(duì)象。微信小程序的缺點(diǎn)很明顯卓缰，體驗(yàn)上無法跟App相提并論叙赚，功能依托并受限于微信老客，無法進(jìn)行拓展≌鸲＃可以說微信小程序就是建立了次級(jí)生態(tài)胧砰，這個(gè)生態(tài)中微信說的算，其他對(duì)手的發(fā)展會(huì)受到限制苇瓣。
4. 語言編譯轉(zhuǎn)換
語言編譯轉(zhuǎn)換指的是直接將某個(gè)語言編譯為一個(gè)平臺(tái)下的二進(jìn)制文件尉间。比較有名的是Xamarin框架，雖然它在 Android平臺(tái)是內(nèi)嵌了Mono虛擬機(jī)來實(shí)現(xiàn)的击罪，但在 iOS平臺(tái)下是以AOT 的方式編譯為二進(jìn)制文件的哲嘲，所以把它歸到語言編譯轉(zhuǎn)換類型。
4.1 Xamarin
Xamarin始創(chuàng)于2011年媳禁，2016年被微軟正式收購眠副。Xamarin是Mono項(xiàng)目的一個(gè)分支，基于.NET的跨平臺(tái)實(shí)現(xiàn)的一個(gè)開源項(xiàng)目竣稽。
與PhoneGap等框架不同的是囱怕，Xamarin可以在iOS和Android剛推出新的功能時(shí)，第一時(shí)間調(diào)用相應(yīng)的API毫别，而使用PhoneGap則需要等待PhoneGap封裝的新的功能后才可以調(diào)用相應(yīng)的API娃弓。
Xamarin的Andriod實(shí)現(xiàn)原理如下圖所示。
C#代碼寫的Andriod應(yīng)用在運(yùn)行的在Mono虛擬機(jī)中岛宦，ART可以通過ACWs（Andriod Callable Wrappers）的方式執(zhí)行到Mono中的C#代碼台丛。C#代碼要是想調(diào)用系統(tǒng)功能或者Java的實(shí)現(xiàn)類庫，可以借助MCW（Managed Callable Wrapper）的方式來實(shí)現(xiàn)砾肺。MCW是JNI的橋梁挽霉，可以使用托管代碼調(diào)用Andriod代碼。
5. 原生渲染
原生渲染在本篇文章中指的是由JavaScript開發(fā)并且由原生控件渲染变汪，代表有React Native侠坎、Weex、快應(yīng)用疫衩。
5.1 React Native
Facebook曾在移動(dòng)端步履維艱硅蹦，他們認(rèn)為可以不借助任何原生開發(fā)手段來實(shí)現(xiàn)Facebook的移動(dòng)應(yīng)用，因此在早期選擇了HTML5闷煤，后來發(fā)現(xiàn)HTML5的效率始終無法和原生相比童芹，因此在2015年發(fā)布了React Native。
React Native是Facebook早先開源的 Web UI框架React在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物鲤拿，底層對(duì)Android和iOS平臺(tái)的原生代碼進(jìn)行封裝假褪，通過使用JavaScript就可以編寫出原生代碼。
Virtual DOM是DOM在內(nèi)存中的一種輕量級(jí)表達(dá)方式近顷，可以通過不同的渲染引擎生成不同平臺(tái)下的UI生音。React Native與原生框架通過Bridge進(jìn)行通信宁否，如果使用Chrome瀏覽器進(jìn)行調(diào)試，那么所有的JavaScript代碼將運(yùn)行在Chrome V8引擎中缀遍，通過WebSocket和原生代碼進(jìn)行通信慕匠。
5.2 Weex
Weex 是阿里開源的一款跨平臺(tái)移動(dòng)開發(fā)工具，它能夠完美兼顧性能與動(dòng)態(tài)性域醇，讓移動(dòng)開發(fā)者通過簡(jiǎn)捷的前端語法寫出原生級(jí)別的性能體驗(yàn)台谊，并支持iOS、Android譬挚、YunOS及Web等多端部署锅铅。目前 Vue.js 和 Rax 這兩個(gè)前端框架被廣泛應(yīng)用于 Weex 頁面開發(fā)，因此Weex支持Vue語法和Rax語法减宣，而React Native只支持JSX語法盐须。
Weex首先將編寫的Weex源碼，通過transformer轉(zhuǎn)換成JS Bundle漆腌。然后將JS Bundle部署在服務(wù)器贼邓，當(dāng)接收到終端（Android、Web端屉凯、iOS端）的JS Bundle請(qǐng)求時(shí)立帖，將JS Bundle下發(fā)給終端眼溶。在終端中悠砚，由Weex的JS Framework 接收和執(zhí)行JS Bundle代碼，并且執(zhí)行數(shù)據(jù)綁定堂飞、模板編譯等操作灌旧，然后輸出JSON 格式的 Virtual DOM，JS Framework發(fā)送渲染指令給Native 绰筛，提供 callNative 和 callJS 接口枢泰，方便 JS Framework 和 Native 的通信。
5.3 快應(yīng)用
2018年3月份铝噩，由小米衡蚂，OPPO，VIVO骏庸，華為等10家國內(nèi)主流廠商成立了快應(yīng)用聯(lián)盟毛甲。快應(yīng)用介于移動(dòng)網(wǎng)頁和原生應(yīng)用之間具被，第三方應(yīng)用以移動(dòng)網(wǎng)頁的形式進(jìn)行開發(fā)玻募，最終得到原生渲染的效果體驗(yàn)∫蛔耍快應(yīng)用框架深度集成進(jìn)各手機(jī)廠商的手機(jī)操作系統(tǒng)中七咧，可以在操作系統(tǒng)層面形成用戶需求與應(yīng)用服務(wù)的無縫連接跃惫，很多只用在原生應(yīng)用中才能使用的功能，在快應(yīng)用中可以很方便的實(shí)現(xiàn)艾栋，享受原生應(yīng)用體驗(yàn)爆存，同時(shí)不用擔(dān)心分發(fā)留存等問題，資源消耗也比較少蝗砾。對(duì)于每臺(tái)手機(jī)設(shè)備终蒂，應(yīng)用可以從多個(gè)系統(tǒng)入口，引用用戶體驗(yàn)產(chǎn)品遥诉。
與React Native和Weex相比主要有兩點(diǎn)不同：
- 快應(yīng)用自身不支持Vue或React語法拇泣，它采用的是JavaScript開發(fā)。
- React Native和Weex的渲染引擎是集成到框架中的矮锈，每一個(gè)APP都需要打包一份霉翔，安裝包體積較大，快應(yīng)用渲染引擎是集成到ROM中的苞笨，應(yīng)用中無需打包债朵，安裝包體積小。
和微信小程序很像瀑凝，快應(yīng)用本質(zhì)上也是要建立次級(jí)生態(tài)序芦，快應(yīng)用的架構(gòu)如下圖所示。
快應(yīng)用實(shí)現(xiàn)劃分為編譯時(shí)粤咪、運(yùn)行時(shí)兩個(gè)方面谚中，UX頁面源碼經(jīng)過編譯時(shí)得到JS，然后經(jīng)過運(yùn)行時(shí)得到界面UI寥枝。每一個(gè)頁面由HTML+CSS+JS組成宪塔，編譯運(yùn)行后得到內(nèi)存中的DOM樹。多個(gè)頁面組成一個(gè)項(xiàng)目囊拜，編譯后得到rpk文件某筐，最終運(yùn)行時(shí)以應(yīng)用形態(tài)呈現(xiàn)。
快應(yīng)用推出1年后仍然不溫不火冠跷，面對(duì)微信小程序南誊，快應(yīng)用在流量和入口等關(guān)鍵數(shù)據(jù)都無法與小程序匹敵，未來發(fā)展堪憂蜜托。
6. 自繪UI
自繪UI指的是通過在不同平臺(tái)實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來繪制UI抄囚，而不依賴系統(tǒng)平臺(tái)的原生控件，這樣做可以保證不同平臺(tái)UI的一致性盗冷。不用像React Native一樣怠苔，隨著不同平臺(tái)系統(tǒng)版本的變化，開發(fā)者還需要處理不同平臺(tái)的差異仪糖，甚至有些特性只能在單個(gè)平臺(tái)上實(shí)現(xiàn)柑司，這樣無法保證不同平臺(tái)UI的一致性迫肖。自繪UI框架的代表有Qt和Flutter。
6.1 Qt
Qt產(chǎn)生的時(shí)間很早攒驰，Qt 第一版于 1991 年由 Trolltech 發(fā)布蟆湖。后來在 2008 年，Nokia 斥資 1.5 億美元收購 TrollTech玻粪，將 Qt 應(yīng)用于 Symbian 程序開發(fā)隅津。2012 年 8 月 9 日，Nokia 將 Qt 以 400 萬歐元的價(jià)格出售給 Digia劲室。2016年Qt Group Plc從Digia分拆出來伦仍，2014年Qt開始支持移動(dòng)端的Android、iOS很洋、Wp平臺(tái)充蓝。雖然Qt在PC領(lǐng)域發(fā)展良好，但在移動(dòng)端表現(xiàn)不佳喉磁，很少有人提及或者用Qt去開發(fā)移動(dòng)端谓苟。
6.2 Flutter
Flutter是谷歌的移動(dòng)UI框架，可以快速在Android和iOS上構(gòu)建高質(zhì)量的原生用戶界面协怒， 它的前身是谷歌試驗(yàn)項(xiàng)目Sky涝焙。
Futter提出了一切皆為控件（Widget）的概念，除了基本的文本孕暇、圖片仑撞、卡片、輸入框等Widget芭商，布局方式和動(dòng)畫等也都是Widget派草。通過使用不同類型的Widget搀缠，就可以實(shí)現(xiàn)復(fù)雜度的界面铛楣。
Flutter框架采用了分層設(shè)計(jì)，此設(shè)計(jì)的目標(biāo)是幫助開發(fā)者使用更少的代碼完成更多工作艺普。例如簸州，Material層是由widgets層的普通widget組成的，而widgets層本身是通過來自rendering層的低級(jí)對(duì)象構(gòu)建的歧譬。
目前在Flutter基礎(chǔ)上開發(fā)的框架已經(jīng)開始出現(xiàn)岸浑，這也證明了業(yè)界普遍開始認(rèn)可Flutter，并開始進(jìn)行嘗試瑰步。
總結(jié)
跨平臺(tái)技術(shù)的分類沒有標(biāo)準(zhǔn)的答案矢洲，這里也只是粗略的進(jìn)行分類，并對(duì)每個(gè)分類的主流框架進(jìn)行介紹缩焦，實(shí)際上還有很多框架沒有提到读虏，它們不是沒落了责静，就是缺點(diǎn)明顯難以使用，再就是大公司的KPI產(chǎn)物盖桥≡煮Γ跨平臺(tái)技術(shù)的演進(jìn)好比百家爭(zhēng)鳴，極大的促進(jìn)了跨平臺(tái)技術(shù)的發(fā)展揩徊。在我看來腰鬼，這些技術(shù)讓不同技術(shù)分支的程序員都可以參與到移動(dòng)開發(fā)中，享受移動(dòng)開發(fā)的樂趣塑荒，從這個(gè)角度來看這些跨平臺(tái)技術(shù)的優(yōu)劣之分是很難去評(píng)判的熄赡。我更希望有一個(gè)框架能統(tǒng)一整個(gè)跨平臺(tái)技術(shù)，這個(gè)框架會(huì)是Flutter嗎齿税？還是下一個(gè)未知的框架本谜？你更看好哪個(gè)跨平臺(tái)技術(shù)呢？
喜歡請(qǐng)點(diǎn)擊+關(guān)注哦
![]()
