簡(jiǎn)介
Flutter作為谷歌最近推出的跨平臺(tái)開(kāi)發(fā)框架，一經(jīng)推出便吸引了不少注意励负。關(guān)于Flutter藕溅，目前我們知道它是一個(gè)跨平臺(tái)開(kāi)發(fā)框架。但是它本身并不止于此继榆，例如Fuchsia巾表、Dart等汁掠，我們也都需要去了解。
Fuchsia
說(shuō)到Flutter集币，絕對(duì)繞不開(kāi)Fuchsia考阱，這個(gè)是谷歌開(kāi)發(fā)的一款全新的操作系統(tǒng)，GitHub地址以及Google source主頁(yè)鞠苟。Fuchsia內(nèi)核是Magenta Kernel乞榨，一個(gè)基于LittleKernel的項(xiàng)目。該系統(tǒng)與Android相比当娱，無(wú)論是存儲(chǔ)器還是內(nèi)存之類(lèi)的硬件要求都大幅降低吃既，外界推論是一款面向物聯(lián)網(wǎng)的系統(tǒng)。筆者倒是沒(méi)有查到谷歌開(kāi)發(fā)這款操作系統(tǒng)的目的跨细，如果有知曉的鹦倚，也煩請(qǐng)告知。
就像很多博客主說(shuō)的那樣扼鞋，如果只是取代Android申鱼，那無(wú)疑是一種很不好的做法。任何技術(shù)的推動(dòng)云头，都得靠背后的商業(yè)驅(qū)動(dòng)捐友，尤其是這種涉及到手機(jī)廠(chǎng)商利益的技術(shù)。
Flutter
Flutter是Fuchsia的開(kāi)發(fā)框架溃槐，是一套移動(dòng)UI框架匣砖，可以快速在iOS、Android以及Fuchsia上構(gòu)建高質(zhì)量的原生用戶(hù)界面昏滴。 目前Flutter是完全免費(fèi)猴鲫、開(kāi)源的，GitHub地址谣殊。其官方編程語(yǔ)言為Dart拂共，也是一門(mén)全新的語(yǔ)言。所以說(shuō)姻几，上手成本比較高宜狐，對(duì)于移動(dòng)端開(kāi)發(fā)人員，語(yǔ)言以及框架都是全新的蛇捌，整個(gè)技術(shù)棧的積累也都得從頭開(kāi)始抚恒。
可以看下其官方介紹的特性：
- 快速開(kāi)發(fā)：Flutter的熱重載可以快速地進(jìn)行測(cè)試、構(gòu)建UI络拌、添加功能并更快地修復(fù)錯(cuò)誤俭驮。
- 富有表現(xiàn)力，漂亮的用戶(hù)界面：自帶的Material Design和Cupertino（iOS風(fēng)格）widget春贸、豐富的motion API混萝、平滑而自然的滑動(dòng)效果遗遵。
- 響應(yīng)式框架：使用Flutter的現(xiàn)代、響應(yīng)式框架譬圣，和一系列基礎(chǔ)widget瓮恭，輕松構(gòu)建您的用戶(hù)界面雄坪。
- 訪(fǎng)問(wèn)本地功能和SDK：Flutter可以復(fù)用現(xiàn)有的Java厘熟、Swift或ObjC代碼，訪(fǎng)問(wèn)iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK维哈。
- 統(tǒng)一的應(yīng)用開(kāi)發(fā)體驗(yàn)：Flutter擁有豐富的工具和庫(kù)绳姨，可以幫助開(kāi)發(fā)者輕松地同時(shí)在iOS和Android系統(tǒng)中實(shí)現(xiàn)想法和創(chuàng)意。
- 原生性能：Flutter包含了許多核心的widget阔挠，如滾動(dòng)飘庄、導(dǎo)航、圖標(biāo)和字體等购撼，這些都可以在iOS和Android上達(dá)到原生應(yīng)用一樣的性能跪削。
其實(shí)從官方特性來(lái)看，唯一有點(diǎn)吸引力的就是統(tǒng)一的應(yīng)用開(kāi)發(fā)體驗(yàn)迂求。一套代碼運(yùn)行在多個(gè)平臺(tái)碾盐，做到真正的跨平臺(tái)。像熱加載揩局，目前Android開(kāi)發(fā)本身就支持了毫玖，響應(yīng)式框架以及訪(fǎng)問(wèn)本地功能和SDK，對(duì)于Native來(lái)說(shuō)凌盯，本身并沒(méi)有多大的吸引付枫。至于漂亮的用戶(hù)界面，國(guó)內(nèi)的商業(yè)項(xiàng)目驰怎，哪一個(gè)會(huì)去按照Material Design去設(shè)計(jì)阐滩。
跨平臺(tái)本身，往往意味著性能受損县忌，通用性解決不了的問(wèn)題掂榔，又得回到Native去實(shí)現(xiàn)。所以這些因素也是跨平臺(tái)從移動(dòng)端誕生之初就開(kāi)始提芹枷，到現(xiàn)在也沒(méi)有被很好解決的一個(gè)原因衅疙。至于谷歌能夠做到什么程度，或者說(shuō)開(kāi)發(fā)者該保持什么期許鸳慈，我覺(jué)得都不好說(shuō)饱溢，或許谷歌解決了一個(gè)多年的難題，或者又像被谷歌放棄掉的其他項(xiàng)目一樣走芋。拋開(kāi)商業(yè)層面绩郎，對(duì)于技術(shù)人員潘鲫，我們更多的是應(yīng)該去關(guān)注它的思想，谷歌是如何去解決這些實(shí)際存在很久的問(wèn)題的肋杖，至于技術(shù)本身的發(fā)展溉仑，這個(gè)是個(gè)人開(kāi)發(fā)者無(wú)法去左右的，技術(shù)的更迭状植，保持一種學(xué)習(xí)的狀態(tài)浊竟，然后努力鍛煉身體，就能夠保證不被淘汰掉津畸。
Dart
Dart是谷歌開(kāi)發(fā)的計(jì)算機(jī)編程語(yǔ)言振定，于2011年10月份發(fā)布，可以被用于web肉拓、服務(wù)器后频、移動(dòng)端和物聯(lián)網(wǎng)等領(lǐng)域的開(kāi)發(fā)。Flutter采用Dart暖途，原因很多卑惜，拋開(kāi)商業(yè)層面的Java版權(quán)問(wèn)題，單純從技術(shù)層面：
- Dart是AOT（Ahead Of Time）編譯的驻售，編譯成快速露久、可預(yù)測(cè)的本地代碼，使Flutter幾乎都可以使用Dart編寫(xiě)芋浮；
- Dart也可以JIT（Just In Time）編譯抱环，開(kāi)發(fā)周期快；
- Dart可以更輕松地創(chuàng)建以60fps運(yùn)行的流暢動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)纸巷；
- Dart使Flutter不需要單獨(dú)的聲明式布局語(yǔ)言镇草；
- Dart容易學(xué)習(xí)，具有靜態(tài)和動(dòng)態(tài)語(yǔ)言用戶(hù)都熟悉的特性瘤旨。
Dart最初設(shè)計(jì)是為了取代JavaScript成為web開(kāi)發(fā)的首選語(yǔ)言梯啤，最后的結(jié)果可想而知，到Dart 2的發(fā)布存哲，專(zhuān)注于改善構(gòu)建客戶(hù)端應(yīng)用程序的體驗(yàn)因宇，可以看出定位的轉(zhuǎn)變。用過(guò)Java祟偷、Kotlin的人察滑，可以很快的上手Dart。
一門(mén)語(yǔ)言的成敗修肠，拋開(kāi)背后的商業(yè)推動(dòng)贺辰，我想很重要的一點(diǎn)在于其生態(tài)，生態(tài)的好壞，主要包括開(kāi)發(fā)者以及第三方庫(kù)的數(shù)目饲化，目前看莽鸭，Dart的生態(tài)還是比較差。對(duì)于個(gè)人開(kāi)發(fā)者吃靠，可以根據(jù)心情來(lái)選擇硫眨，但是對(duì)于商業(yè)應(yīng)用，有更復(fù)雜的考量標(biāo)準(zhǔn)巢块。Dart背后有谷歌的推動(dòng)礁阁，能發(fā)展到什么程度，還得看其商業(yè)運(yùn)作能力了夕冲。
配置
此部分針對(duì)Mac平臺(tái)氮兵，Windows平臺(tái)的安裝配置裂逐，Linux平臺(tái)的安裝配置歹鱼。由于筆者主要做移動(dòng)端開(kāi)發(fā)，如果想使用Flutter進(jìn)行iOS和Android全平臺(tái)的開(kāi)發(fā)卜高，環(huán)境也建議是Mac平臺(tái)弥姻，畢竟iOS只能在Mac下進(jìn)行模擬調(diào)試。
安裝Flutter
git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國(guó)內(nèi)用戶(hù)需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶(hù)需要設(shè)置
export PATH=`pwd`/flutter/bin:$PATH
iOS設(shè)置
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
Android設(shè)置
下載Android Studio掺涛，安裝Flutter插件庭敦，會(huì)將Dart插件也一起安裝。
體驗(yàn)Flutter
IDE建議選擇Android Studio薪缆，安裝了Flutter插件后秧廉，F(xiàn)lutter的開(kāi)發(fā)跟Android 開(kāi)發(fā)類(lèi)似，附帶三種模版工程拣帽、斷點(diǎn)調(diào)試等疼电。
在A(yíng)ndroid Studio里面新建一個(gè)Flutter Application的項(xiàng)目，選擇模擬器或者直接連接真機(jī)運(yùn)行减拭，就可以看到一個(gè)簡(jiǎn)單的Flutter應(yīng)用了蔽豺，可以在A(yíng)ndroid和iOS不同平臺(tái)下看看差異。
Flutter架構(gòu)
Flutter是一款移動(dòng)應(yīng)用程序SDK拧粪，一份代碼可以同時(shí)生成iOS和Android兩個(gè)高性能修陡、高保真的應(yīng)用程序。
Flutter對(duì)于移動(dòng)開(kāi)發(fā)人員可霎，最誘惑的能力是其完全的跨平臺(tái)特性魄鸦，不同于RN這種一處學(xué)到處寫(xiě)，它是一處寫(xiě)到出跑癣朗，但是他跟其他的跨平臺(tái)有何區(qū)別呢拾因？
跨平臺(tái)解決方案
市面上的跨平臺(tái)解決方案，可以大致歸結(jié)為兩類(lèi)：
- 使用平臺(tái)支持的web技術(shù)：這些解決方案基本上加載了應(yīng)用程序中的移動(dòng)瀏覽器，并在該瀏覽器中執(zhí)行所有的邏輯盾致，例如PhoneGap主经。
- 本地跨平臺(tái)：程序員編寫(xiě)的代碼自動(dòng)轉(zhuǎn)換為Native代碼，這種方式的優(yōu)點(diǎn)是近乎原生的性能庭惜，例如RN罩驻、Weex、Xamarin等护赊。
這些方案是否真正的解決了跨平臺(tái)問(wèn)題呢惠遏？從目前的狀況來(lái)看，很顯然是沒(méi)有的骏啰，因?yàn)樗鼈兌际冀K逃不開(kāi)性能节吮、包大小、流暢性判耕、內(nèi)存透绩、平臺(tái)特性等問(wèn)題。
RN單獨(dú)擰出來(lái)說(shuō)壁熄，是因?yàn)樗鼈儾⒉皇亲非蟮囊淮螌?xiě)到處跑帚豪，F(xiàn)B自己也知道不現(xiàn)實(shí)，所以把口號(hào)改成一次學(xué)到處寫(xiě)草丧，去考慮平臺(tái)的特性狸臣，去考慮這個(gè)被跨平臺(tái)方案經(jīng)常忽略的問(wèn)題。但是RN也并沒(méi)有被廣泛的接納昌执，從阿里開(kāi)始使用到放棄烛亦，里面的很多坑都繞不過(guò)去。寫(xiě)一次到處跑確實(shí)很誘人懂拾，從企業(yè)角度講煤禽，可以節(jié)省大量的人力，但是卻忽略了一個(gè)很基礎(chǔ)的問(wèn)題委粉，不同平臺(tái)是否希望如此呜师，蘋(píng)果是否會(huì)愿意自己的生態(tài)被打破，不同平臺(tái)的特性是否應(yīng)該被歸為一致贾节。
Flutter的跨平臺(tái)解決方案
上面簡(jiǎn)單說(shuō)了傳統(tǒng)跨平臺(tái)解決方案汁汗，我們?cè)倩剡^(guò)頭看看Flutter的解決方案，F(xiàn)lutter跨平臺(tái)最核心的部分栗涂，是它的高性能渲染引擎（Flutter Engine）知牌。Flutter不使用瀏覽器技術(shù)，也不使用Native的原生控件斤程，它使用自己的渲染引擎來(lái)繪制widget角寸。
說(shuō)到widget菩混，就要說(shuō)一句Flutter的一切皆為widget理念。widget是Flutter應(yīng)用程序用戶(hù)界面的基本構(gòu)建塊扁藕。每個(gè)widget都是用戶(hù)界面一部分的不可變聲明沮峡。與其他將視圖、控制器亿柑、布局和其他屬性分離的框架不同邢疙，F(xiàn)lutter具有一致的統(tǒng)一對(duì)象模型：widget。在更新widget的時(shí)候望薄，框架能夠更加的高效疟游。
對(duì)于A(yíng)ndroid平臺(tái)，F(xiàn)lutter引擎的C/C++代碼是由NDK編譯痕支，在iOS平臺(tái)颁虐，則是由LLVM編譯，兩個(gè)平臺(tái)的Dart代碼都是AOT編譯為本地代碼卧须，F(xiàn)lutter應(yīng)用程序使用本機(jī)指令集運(yùn)行另绩。
Flutter正是是通過(guò)使用相同的渲染器、框架和一組widget故慈，來(lái)同時(shí)構(gòu)建iOS和Android應(yīng)用板熊，而無(wú)需維護(hù)兩套獨(dú)立的代碼庫(kù)。
Flutter將UI組件和渲染器從平臺(tái)移動(dòng)到應(yīng)用程序中察绷，這使得它們可以自定義和可擴(kuò)展。Flutter唯一要求系統(tǒng)提供的是canvas津辩，以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上拆撼。
Flutter框架
Flutter框架是一個(gè)分層的結(jié)構(gòu)，每個(gè)層都建立在前一層之上喘沿。
框架沒(méi)什么可介紹的（主要是詳細(xì)介紹我也沒(méi)找到啥資料闸度，大寫(xiě)的尷尬），看著很簡(jiǎn)單蚜印，就分為兩個(gè)部分莺禁，F(xiàn)ramework和Engine部分，其中Framework提供了各種基礎(chǔ)的組件庫(kù)窄赋，Engine部分渲染各種widget哟冬，兩者共同作用，使得運(yùn)行性能高效穩(wěn)定忆绰。
Flutter調(diào)研
生態(tài)
在Flutter官方的Pub平臺(tái)上浩峡，純Flutter Package大概有兩千多個(gè)，基本上常見(jiàn)的庫(kù)還是都有的错敢，例如網(wǎng)絡(luò)翰灾、圖片、音視頻播放等等。但是對(duì)于目前Android以及iOS的生態(tài)纸淮，還是遠(yuǎn)遠(yuǎn)的不足的平斩，對(duì)于一些復(fù)雜的UI或者一些不是特別通用的功能，就得自己去實(shí)現(xiàn)咽块。
包大小
根據(jù)官網(wǎng)的介紹双戳，一個(gè)最小的Android版本的Flutter應(yīng)用。release版本大小約6.7MB糜芳，其中核心引擎大約3.3MB飒货，框架+應(yīng)用程序代碼大約是1.25MB，LICENSE文件（包含在app.flx中）是55k峭竣，必需的Java代碼.dex為40k塘辅，并且約有2.1MB的ICU數(shù)據(jù)〗粤茫考慮到目前網(wǎng)絡(luò)環(huán)境扣墩，包大小的增加，還也在可以接受的范圍扛吞。
Crash
iOS運(yùn)行官方的例子呻惕，會(huì)有時(shí)候crash掉，因此我們將一個(gè)開(kāi)源的Flutter應(yīng)用滥比，添加了Bugly上報(bào)亚脆，在A(yíng)ndroid平臺(tái)進(jìn)行了眾測(cè)。
參與人次大概150人左右盲泛，啟動(dòng)次數(shù)大概500次左右濒持，沒(méi)有出現(xiàn)一次Crash數(shù)據(jù)上報(bào)，由于app很簡(jiǎn)單寺滚，并不能說(shuō)明很多問(wèn)題柑营，但是眾測(cè)用戶(hù)反饋了約12條信息，其中1條是類(lèi)似于A(yíng)NR村视，無(wú)法操作官套，其余的部分則是卡頓相關(guān)的反饋。
流暢性
將官方的例子發(fā)給測(cè)試同學(xué)蚁孔，讓在iOS以及Android平臺(tái)的不同機(jī)子上運(yùn)行了下奶赔。在iOS上基本上流暢運(yùn)行，沒(méi)有出現(xiàn)卡頓的現(xiàn)象勒虾，在A(yíng)ndroid部分設(shè)備上纺阔，出現(xiàn)了卡頓的現(xiàn)象。
由于沒(méi)有復(fù)雜的例子修然，其實(shí)這個(gè)流暢性的測(cè)試笛钝，意義不是特別大质况，官方簡(jiǎn)單的控件展示demo程序，本身就很簡(jiǎn)單玻靡，但是在A(yíng)ndroid上還是出現(xiàn)了不少問(wèn)題结榄，只能說(shuō)明整體還有非常大的優(yōu)化空間。
編寫(xiě)復(fù)雜程度
試著照著一張?jiān)O(shè)計(jì)稿進(jìn)行了簡(jiǎn)單的純布局代碼工作囤捻，初次接觸用起來(lái)還是比較復(fù)雜臼朗，尤其是那恐怖的嵌套層級(jí)，對(duì)代碼維護(hù)來(lái)說(shuō)絕對(duì)是個(gè)問(wèn)題蝎土，而且由于Flutter的widget機(jī)制视哑，很多組件只支持最基本的操作，例如一些擴(kuò)展的屬性誊涯，都得自己去實(shí)現(xiàn)挡毅，況且現(xiàn)在組件庫(kù)還不是非常的豐富。代碼量也比較多暴构，整個(gè)代碼大概有500行左右跪呈，還只是不涉及到一些交互以及數(shù)據(jù)綁定等。
從運(yùn)行效果看取逾，還是比較的不錯(cuò)耗绿，兩者還原的效果都挺不錯(cuò)的。
結(jié)論
如果是個(gè)人而言砾隅，我覺(jué)得可以放心大膽的去學(xué)習(xí)嘗試误阻，獨(dú)立開(kāi)發(fā)app，可以寫(xiě)一套代碼琉用，在多個(gè)平臺(tái)運(yùn)行發(fā)布堕绩。
如果是商業(yè)團(tuán)隊(duì)，這個(gè)就要自行取舍邑时，目前而言，F(xiàn)lutter生態(tài)還是非常的不完善特姐，相關(guān)的資料也非常少晶丘。目前處于beta 3階段，多久能到release唐含，能否到release浅浮，都是個(gè)未知數(shù)，而且捷枯，用Flutter滚秩，最大的風(fēng)險(xiǎn)，就是項(xiàng)目整體的不可把控淮捆，一旦出現(xiàn)一些坑郁油，如果能填好本股，那還行，如果涉及到無(wú)法解決的問(wèn)題桐腌，就只能放棄拄显。因此看自己團(tuán)隊(duì)人力以及時(shí)間合理安排比較合適。目前看阿里的咸魚(yú)團(tuán)隊(duì)在研究Flutter案站。
如果單純從Flutter本身能夠解決的問(wèn)題的方面出發(fā)躬审，使用Flutter確實(shí)能夠產(chǎn)生一定的收益，節(jié)省開(kāi)發(fā)成本蟆盐，如果考慮到目前坑比較多的狀況承边，加上踩坑的時(shí)間，可能就無(wú)法去評(píng)估了石挂。
總體來(lái)說(shuō)博助，F(xiàn)lutter確實(shí)是一個(gè)比較不錯(cuò)的東西，如果谷歌能夠把它發(fā)展的比較完善誊稚，對(duì)于個(gè)人以及小團(tuán)隊(duì)來(lái)說(shuō)翔始，確實(shí)是個(gè)福音。
作者：吹個(gè)大氣球
鏈接：https://juejin.im/post/5afd77466fb9a07aab2a12da
來(lái)源：掘金
