一官研、背景
"Write once, run anywhere" 一直以來(lái)就是開(kāi)發(fā)者的夢(mèng)想藻治。在移動(dòng)客戶端領(lǐng)域载矿，主流的跨平臺(tái)開(kāi)發(fā)框架大體經(jīng)歷了三個(gè)階段。
第一階段虫蝶，主要通過(guò) WebView 繪制界面章咧，并通過(guò) JavaScript Bridge 將系統(tǒng)的一部分能力暴露給 JS 調(diào)用。 PhoneGap能真、Cordova 都可以歸屬于這一類赁严。
第二階段，大家發(fā)現(xiàn)用 WebView 承載界面有性能等各種問(wèn)題粉铐。于是將繪制交回給原生疼约，通過(guò) JS 來(lái)調(diào)用原生控件，編寫(xiě)業(yè)務(wù)代碼蝙泼。Weex程剥、RN 就是其中的佼佼者，這也是現(xiàn)在絕大部分跨平臺(tái)框架的思路汤踏。
第三階段织鲸，雖然使用原生控件承載 UI 解決不少渲染的問(wèn)題。但是處理平臺(tái)差異性仍然需要耗費(fèi)極大精力茎活，效果也不盡如人意昙沦。這個(gè)時(shí)候，F(xiàn)lutter 提出的解決方案载荔，就是連繪制引擎也自研，盡可能減少不同平臺(tái)之間的差異性, 同時(shí)保持和原生開(kāi)發(fā)一樣的高性能采桃。因此目前業(yè)界對(duì) Flutter 的關(guān)注度也是最高的懒熙。
二、現(xiàn)存問(wèn)題
跨平臺(tái)意味著需要花費(fèi)很多時(shí)間來(lái)解決平臺(tái)差異性問(wèn)題普办，同時(shí)要面臨第三方庫(kù)不夠原生平臺(tái)豐富健壯的現(xiàn)狀工扎。2018 年，Airbnb 放棄使用 React Native衔蹲，回歸使用原生技術(shù)肢娘，究其原因主要是：項(xiàng)目龐大后，維護(hù)困難舆驶；第三方庫(kù)良莠不齊橱健；兼容上需要耗費(fèi)更多精力。這是跨平臺(tái)框架存在的通病沙廉。
三拘荡、如何抉擇
Flutter 可能相對(duì)來(lái)說(shuō)在兼容上會(huì)做得好一點(diǎn)，通過(guò)自底向上自研框架來(lái)盡可能減少平臺(tái)差異撬陵，但是可靠性仍需進(jìn)一步檢驗(yàn)珊皿，引入 Flutter 需要大家對(duì)自己公司業(yè)務(wù)有非常清晰的認(rèn)知网缝，并權(quán)衡好利弊。
四蟋定、行業(yè)動(dòng)向
1粉臊、微信-WX+Flutter/C++
微信小程序-WX+Flutter
最開(kāi)始是采用Webview渲染的方案，后面又采用了React-Native-Like的方案驶兜，再后來(lái)微信提出了一個(gè)很大膽的想法：上層依然使用WXML+WXSS來(lái)表示维费，但是底層使用Flutter引擎來(lái)渲染，而且他們覺(jué)得Platform Channel通信效率低促王，自己整了一個(gè)dart2cpp的模塊來(lái)負(fù)責(zé)通信犀盟。
微信支付-C++
支付作為微信重要且復(fù)雜的一個(gè)模塊，隨著業(yè)務(wù)迭代蝇狼，暴露出了很多問(wèn)題：分平臺(tái)導(dǎo)致的用戶體驗(yàn)和邏輯不一致問(wèn)題阅畴、擴(kuò)展性差無(wú)法快速響應(yīng)業(yè)務(wù)需求、質(zhì)量保障體系不完善等迅耘。為了解決分平臺(tái)實(shí)現(xiàn)這個(gè)核心問(wèn)題贱枣，并解決以往的技術(shù)債務(wù)，統(tǒng)一體系管理颤专，微信建立起了一整套基于 C++ 的跨平臺(tái)框架纽哥，并對(duì)核心支付流程進(jìn)行了重構(gòu)。
2栖秕、閑魚(yú)-Flutter/Weex
閑魚(yú)
基于讓工程師去從事更多創(chuàng)造性的工作的目標(biāo)春塌。閑魚(yú)迅速擁抱和實(shí)踐了flutter，19年在20+頁(yè)面使用了flutter簇捍，覆蓋音視頻只壳、富文本、鍵盤等復(fù)雜場(chǎng)景暑塑。在項(xiàng)目實(shí)踐過(guò)程中和Google開(kāi)發(fā)團(tuán)隊(duì)合作之下吼句，在flutter基礎(chǔ)之上，發(fā)現(xiàn)暴露了一些問(wèn)題和缺陷事格，在Native與Flutter混合開(kāi)發(fā)是項(xiàng)目的獨(dú)立性和無(wú)縫銜接性惕艳，實(shí)踐出了一套自己的構(gòu)架，幫助和完善Flutter體系的建設(shè)驹愚。
3远搪、美團(tuán)-MTFlutter/MRN
出于合規(guī)、性能么鹤、安全的考慮终娃，F(xiàn)lutter官方不支持動(dòng)態(tài)化，業(yè)界的一大方向是：基于JS技術(shù)棧的動(dòng)態(tài)解析DSL。不同于微信和閑魚(yú)的Flutter跨平臺(tái)棠耕，美團(tuán)探索和實(shí)踐了Flutter的動(dòng)態(tài)性余佛。在Flutter容器化生態(tài)建設(shè)中，MTFlutter完成了這些："美團(tuán)版"的Flutter標(biāo)準(zhǔn)工作流窍荧、MTFlutter腳手架辉巡、SDK定制、混合容器蕊退、CI/CD郊楣、Dart代碼托管、二進(jìn)制產(chǎn)物托管瓤荔、集成插件净蚤、UI代碼自動(dòng)生成、動(dòng)態(tài)化等
4输硝、今日頭條-Flutterw
出于性能體驗(yàn)今瀑、開(kāi)發(fā)效率、高度一致性点把、高可控性考慮橘荠，字節(jié)跳動(dòng)在今日頭條、西瓜視頻郎逃、皮皮蝦哥童、Helo等20+app對(duì)Flutter進(jìn)行了業(yè)務(wù)落地。又由于配置環(huán)境復(fù)雜褒翰、環(huán)境差異大贮懈、鏈路長(zhǎng)等原因自研了Flutterw研發(fā)套件，標(biāo)準(zhǔn)化了工程環(huán)境影暴、落實(shí)了自動(dòng)化工程方案错邦、優(yōu)化狀態(tài)管理方案等。
5型宙、螞蟻財(cái)富-Flutter
螞蟻財(cái)富的Flutter實(shí)踐第一個(gè)遇到的問(wèn)題是：傳統(tǒng)應(yīng)用中flutter的位置，也就是在傳統(tǒng)應(yīng)用中flutter能做什么伦吠？業(yè)務(wù)還是頁(yè)面妆兑？哪些業(yè)務(wù)？哪些頁(yè)面毛仪？之后落實(shí)的業(yè)務(wù)和頁(yè)面：社區(qū)Tab搁嗓、我的關(guān)注、我的討論箱靴、資產(chǎn)-設(shè)置腺逛、資產(chǎn)-個(gè)人中心。然后總結(jié)了自己的Flutter建設(shè)路線圖(如下)衡怀。
1.首先把a(bǔ)pp分為：上層應(yīng)用(也就是頁(yè)面)棍矛、平臺(tái)基礎(chǔ)能力(容器安疗、存儲(chǔ)、通知够委、路由荐类、安全等)
2.分期建設(shè)：能力建設(shè)(容器能力對(duì)齊、混編腳本茁帽、混合棧玉罐、工程化)、生態(tài)與運(yùn)維(UI組件潘拨、工作流)吊输、開(kāi)放賦能(路由重構(gòu)、業(yè)務(wù)組件)
6铁追、百度貼吧-Flutter
主要是：工程體系接入(FlutterBox)季蚂、技術(shù)全景(分層、工具鏈)脂信、業(yè)務(wù)框架升級(jí)(tieba_redux)
落地情況：一鍵簽到癣蟋、吧詳情、粉絲列表狰闪。個(gè)人中心疯搅、垂類吧等。
貼吧內(nèi)部版：純Flutter(11個(gè)月前停止更新)
7埋泵、貝殼-Flutter
貝殼基本按照Flutter官方方案幔欧，并做了些修改：gradle腳本修改、flutter_tools修改
應(yīng)用場(chǎng)景：租賃收房測(cè)算丽声、二手業(yè)務(wù)
8礁蔗、騰訊在線教育-RN+Flutter
騰訊課堂-RN
騰訊課堂HD-Flutter
企鵝輔導(dǎo)-RN
企鵝輔導(dǎo)HD-Flutter
ABCMouse-Cocos
出于多項(xiàng)目App重復(fù)代碼和代碼體量變大、不發(fā)版解決問(wèn)題雁社、雙端公用代碼浴井，開(kāi)始動(dòng)態(tài)化跨框架探索。
9霉撵、京東-RN
JD4iPhone
Swift
react.bundle
global_JS.bundle
10磺浙、淘寶-weex+flutter
Taobao4iPhone
swift
Flutter.framework
weex-main-jsfm.js
rax.js
DinamicXPreset_mytaobao（動(dòng)態(tài)預(yù)置）
DinamicXPreset_tlhomepage
11、餓了么-weex
rax.js
weex-main-jsfm.js
weex-polyfill.js
windmill.worker.vue.js
應(yīng)用頁(yè)面：餓了么-我的-企業(yè)版
12徒坡、愛(ài)奇藝-RN
有Swift
IntegralRN.zip（積分）
acgAppRN.7z（動(dòng)漫Animation Comic Game）
RN_imall.7z（商城）
rnpaopao.7z（泡泡）
rnpgc.7z
rnirc.7z
rnplane.7z（星球）
rnorder.7z（訂單）
rniqyh.7z
13撕氧、陌陌-H5
MomoChat
H5.bundle
native-bundle-main.js
14、百度網(wǎng)盤-Flutter
netdisk_iPhone
swift
App.framework
Flutter.framework
15喇完、抖音-RN伦泥？
Aweme
AgoraRtcEngineKit.framework
ByteRtcEngineKit.framework
AWERNKit.bundle
16、微信
WeChat
swift
WAWebview.js
WAService.js
vconsole.min.js
websearch（搜一搜）
webrecommend（看一看）
五、總結(jié)
1不脯、Flutter的定位：
Flutter 是 Google 開(kāi)源的 UI 工具包府怯，幫助開(kāi)發(fā)者通過(guò)一套代碼庫(kù)高效構(gòu)建多平臺(tái)精美應(yīng)用，支持移動(dòng)跨新、Web富腊、桌面和嵌入式平臺(tái)。--百度百科
2域帐、Flutter的問(wèn)題：
Flutter并未考慮過(guò)Native&Flutter混合開(kāi)發(fā)的場(chǎng)景赘被，導(dǎo)致混合開(kāi)發(fā)有非常多的問(wèn)題。 這些問(wèn)題包括混合轉(zhuǎn)場(chǎng)肖揣、Flutter容器的復(fù)用民假、手勢(shì)的分發(fā)、Native UI組件的參與渲染等龙优；同時(shí)還有CI/CD工程化方案的缺失羊异，閑魚(yú)做了大量的改造和定制，才使得Flutter能夠勝任混合開(kāi)發(fā)彤断。
盡管有些大廠在用Flutter了野舶，但是很多和跟當(dāng)年用RN一樣，大部分是在一些詳情頁(yè)宰衙、個(gè)人頁(yè)平道、社區(qū)模塊在用，這樣保證了可進(jìn)可退供炼，而且大廠的自研能力很強(qiáng)一屋，一言不合就定制了，這對(duì)中小型公司來(lái)說(shuō)就成本比較高了袋哼，相對(duì)來(lái)看小公司更依賴于生態(tài)完善性上了冀墨，所以在這里也提醒不要盲目追大廠的風(fēng)。大廠分享涛贯，全是針對(duì)Flutter的私人定制以及填坑指南诽嘉，相對(duì)來(lái)說(shuō)RN好歹填了幾年的坑了。
雖然 Flutter 的成長(zhǎng)曲線和未來(lái)前景看起來(lái)都很好弟翘，但不可否認(rèn)的是含懊，目前 Flutter 仍處在發(fā)展階段，很多大型互聯(lián)網(wǎng)企業(yè)都無(wú)法毫無(wú)顧慮地讓全線 App 接入衅胀，而其中最主要的顧慮是包大小與動(dòng)態(tài)化。對(duì)中小公司而言酥筝，還要加上技術(shù)成熟度滚躯、生態(tài)完整性、標(biāo)準(zhǔn)工作流搭建等。
3掸掏、Flutter的核心點(diǎn)：
1茁影、性能：直逼原生。原理如下圖1丧凤，性能對(duì)比如下圖2募闲。
2、效率和成本
開(kāi)發(fā)效率：
由于生態(tài)和工作流不太完善愿待，初始效率較低浩螺。雙端差異性代碼占比小，基本能實(shí)現(xiàn)代碼復(fù)用仍侥，節(jié)省一端人力成本要出。
熱重載：
熱重載幫助你快捷方便的試驗(yàn)、重構(gòu)UI农渊、添加特性和修復(fù)bug患蹂，體驗(yàn)亞秒級(jí)的重載，而不會(huì)丟失狀態(tài)砸紊。
雙端一致性：
UI和業(yè)務(wù)能保持高度一致性传于。避免出現(xiàn)以下問(wèn)題：
1.同一業(yè)務(wù)兩套代碼，部分業(yè)務(wù)處理邏輯不一樣醉顽，易出bug
2.數(shù)據(jù)上報(bào)沼溜，自動(dòng)化測(cè)試等質(zhì)量保證體系造成阻礙
3.用戶體驗(yàn)不一致
3、動(dòng)態(tài)化
Android：將flutter業(yè)務(wù)做成單獨(dú)插件徽鼎，動(dòng)態(tài)下發(fā)盛末。
iOS：flutter for web方案(官方不建議生產(chǎn)使用，問(wèn)題較多)
美團(tuán)動(dòng)態(tài)化：在動(dòng)態(tài)化引擎部分預(yù)置了一個(gè)JSC模塊否淤，也就是JsCore悄但，通過(guò)JSC來(lái)執(zhí)行JavaScript從而實(shí)現(xiàn)邏輯層的動(dòng)態(tài)化，而渲染層動(dòng)態(tài)化則通過(guò)xml+css來(lái)展示石抡，然后解析生成布局樹(shù)并最終通過(guò)Flutter來(lái)渲染檐嚣，可見(jiàn)Flutter渲染方案確實(shí)牛逼，不管是微信小程序還是美團(tuán)啰扛，他們都通過(guò)Flutter來(lái)做渲染嚎京。
阿里/bugly：付費(fèi)版熱更新
4、包體積
Flutter編譯產(chǎn)物分為兩部分：App.framework隐解、Flutter.framework鞍帝。前者是dart代碼和圖片資源等，后者一般是固定大小14M(今日頭條比較猛給弄到了3M)
綜上所述煞茫，F(xiàn)lutter在性能和效率上優(yōu)點(diǎn)突出帕涌。RN技術(shù)成熟摄凡，并且支持動(dòng)態(tài)化。
注：SwiftUI未做考慮蚓曼，主要他只是Apple平臺(tái)的統(tǒng)一亲澡，還有他是新的語(yǔ)法并且最低支持iOS13。
參考文章：
微信跨平臺(tái)開(kāi)發(fā)的思考與邏輯
為什么 Airbnb 放棄了 React Native?
國(guó)內(nèi)大廠在移動(dòng)端跨平臺(tái)的框架接入分析
基于小程序技術(shù)棧的微信跨平臺(tái)實(shí)踐
微信支付基于C++ 跨平臺(tái)開(kāi)發(fā)框架
2019閑魚(yú)-基于Flutter的架構(gòu)演進(jìn)與創(chuàng)新
2020閑魚(yú)Flutter一體化演進(jìn)之路
RN在美團(tuán)外賣客戶端的實(shí)踐
美團(tuán)外賣Flutter容器化生態(tài)建設(shè)實(shí)踐
Flutter在字節(jié)跳動(dòng)的現(xiàn)狀與工程實(shí)踐
螞蟻財(cái)富Flutter工程化實(shí)踐
Flutter纫版、Native床绪、RN，誰(shuí)才是性能王中王其弊？
IOS 2020 熱更新
