Flutter 不一樣的跨平臺解決方案

轉(zhuǎn)自 Q吹個大氣球Q

本文主要介紹Flutter相關(guān)的東西梧兼,包括Fuchsia、Dart、Flutter特性欣福、安裝以及整體架構(gòu)等內(nèi)容。

簡介

Flutter作為谷歌最近推出的跨平臺開發(fā)框架焦履,一經(jīng)推出便吸引了不少注意拓劝。關(guān)于Flutter,目前我們知道它是一個跨平臺開發(fā)框架嘉裤。但是它本身并不止于此郑临,例如Fuchsia、Dart等屑宠,我們也都需要去了解厢洞。

Fuchsia

說到Flutter,絕對繞不開Fuchsia典奉,這個是谷歌開發(fā)的一款全新的操作系統(tǒng)躺翻,GitHub地址以及Google source主頁。Fuchsia內(nèi)核是Magenta Kernel秋柄,一個基于LittleKernel的項目获枝。該系統(tǒng)與Android相比,無論是存儲器還是內(nèi)存之類的硬件要求都大幅降低骇笔,外界推論是一款面向物聯(lián)網(wǎng)的系統(tǒng)省店。筆者倒是沒有查到谷歌開發(fā)這款操作系統(tǒng)的目的,如果有知曉的笨触,也煩請告知懦傍。

就像很多博客主說的那樣,如果只是取代Android芦劣,那無疑是一種很不好的做法粗俱。任何技術(shù)的推動,都得靠背后的商業(yè)驅(qū)動虚吟,尤其是這種涉及到手機(jī)廠商利益的技術(shù)寸认。

Flutter

Flutter是Fuchsia的開發(fā)框架签财,是一套移動UI框架,可以快速在iOS偏塞、Android以及Fuchsia上構(gòu)建高質(zhì)量的原生用戶界面唱蒸。 目前Flutter是完全免費、開源的灸叼,GitHub地址神汹。其官方編程語言為Dart,也是一門全新的語言古今。所以說屁魏,上手成本比較高,對于移動端開發(fā)人員捉腥,語言以及框架都是全新的氓拼,整個技術(shù)棧的積累也都得從頭開始。

可以看下其官方介紹的特性:

  • 快速開發(fā):Flutter的熱重載可以快速地進(jìn)行測試但狭、構(gòu)建UI披诗、添加功能并更快地修復(fù)錯誤。
  • 富有表現(xiàn)力立磁,漂亮的用戶界面:自帶的Material Design和Cupertino(iOS風(fēng)格)widget呈队、豐富的motion API、平滑而自然的滑動效果唱歧。
  • 響應(yīng)式框架:使用Flutter的現(xiàn)代宪摧、響應(yīng)式框架,和一系列基礎(chǔ)widget颅崩,輕松構(gòu)建您的用戶界面几于。
  • 訪問本地功能和SDK:Flutter可以復(fù)用現(xiàn)有的Java、Swift或ObjC代碼沿后,訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK沿彭。
  • 統(tǒng)一的應(yīng)用開發(fā)體驗:Flutter擁有豐富的工具和庫,可以幫助開發(fā)者輕松地同時在iOS和Android系統(tǒng)中實現(xiàn)想法和創(chuàng)意尖滚。
  • 原生性能:Flutter包含了許多核心的widget喉刘,如滾動、導(dǎo)航漆弄、圖標(biāo)和字體等睦裳,這些都可以在iOS和Android上達(dá)到原生應(yīng)用一樣的性能。

其實從官方特性來看撼唾,唯一有點吸引力的就是統(tǒng)一的應(yīng)用開發(fā)體驗廉邑。一套代碼運行在多個平臺,做到真正的跨平臺。像熱加載蛛蒙,目前Android開發(fā)本身就支持了糙箍,響應(yīng)式框架以及訪問本地功能和SDK,對于Native來說牵祟,本身并沒有多大的吸引倍靡。至于漂亮的用戶界面,國內(nèi)的商業(yè)項目课舍,哪一個會去按照Material Design去設(shè)計。

跨平臺本身他挎,往往意味著性能受損筝尾,通用性解決不了的問題,又得回到Native去實現(xiàn)办桨。所以這些因素也是跨平臺從移動端誕生之初就開始提筹淫,到現(xiàn)在也沒有被很好解決的一個原因。至于谷歌能夠做到什么程度呢撞,或者說開發(fā)者該保持什么期許损姜,我覺得都不好說,或許谷歌解決了一個多年的難題殊霞,或者又像被谷歌放棄掉的其他項目一樣摧阅。拋開商業(yè)層面,對于技術(shù)人員绷蹲,我們更多的是應(yīng)該去關(guān)注它的思想棒卷,谷歌是如何去解決這些實際存在很久的問題的,至于技術(shù)本身的發(fā)展祝钢,這個是個人開發(fā)者無法去左右的比规,技術(shù)的更迭,保持一種學(xué)習(xí)的狀態(tài)拦英,然后努力鍛煉身體蜒什,就能夠保證不被淘汰掉。

Dart

Dart是谷歌開發(fā)的計算機(jī)編程語言疤估,于2011年10月份發(fā)布灾常,可以被用于web、服務(wù)器做裙、移動端和物聯(lián)網(wǎng)等領(lǐng)域的開發(fā)岗憋。Flutter采用Dart,原因很多锚贱,拋開商業(yè)層面的Java版權(quán)問題仔戈,單純從技術(shù)層面:

  • Dart是AOT(Ahead Of Time)編譯的,編譯成快速、可預(yù)測的本地代碼监徘,使Flutter幾乎都可以使用Dart編寫晋修;
  • Dart也可以JIT(Just In Time)編譯,開發(fā)周期快凰盔;
  • Dart可以更輕松地創(chuàng)建以60fps運行的流暢動畫和轉(zhuǎn)場墓卦;
  • Dart使Flutter不需要單獨的聲明式布局語言;
  • Dart容易學(xué)習(xí)户敬,具有靜態(tài)和動態(tài)語言用戶都熟悉的特性落剪。

Dart最初設(shè)計是為了取代JavaScript成為web開發(fā)的首選語言,最后的結(jié)果可想而知尿庐,到Dart 2的發(fā)布忠怖,專注于改善構(gòu)建客戶端應(yīng)用程序的體驗,可以看出定位的轉(zhuǎn)變抄瑟。用過Java凡泣、Kotlin的人,可以很快的上手Dart皮假。

一門語言的成敗鞋拟,拋開背后的商業(yè)推動,我想很重要的一點在于其生態(tài)惹资,生態(tài)的好壞贺纲,主要包括開發(fā)者以及第三方庫的數(shù)目,目前看褪测,Dart的生態(tài)還是比較差哮笆。對于個人開發(fā)者,可以根據(jù)心情來選擇汰扭,但是對于商業(yè)應(yīng)用稠肘,有更復(fù)雜的考量標(biāo)準(zhǔn)。Dart背后有谷歌的推動萝毛,能發(fā)展到什么程度项阴,還得看其商業(yè)運作能力了。

配置

此部分針對Mac平臺笆包,Windows平臺的安裝配置环揽,Linux平臺的安裝配置。由于筆者主要做移動端開發(fā)庵佣,如果想使用Flutter進(jìn)行iOS和Android全平臺的開發(fā)歉胶,環(huán)境也建議是Mac平臺,畢竟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 //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(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插件粥谬,會將Dart插件也一起安裝。

體驗Flutter

IDE建議選擇Android Studio辫塌,安裝了Flutter插件后漏策,F(xiàn)lutter的開發(fā)跟Android
開發(fā)類似,附帶三種模版工程臼氨、斷點調(diào)試等掺喻。

在Android Studio里面新建一個Flutter Application的項目,選擇模擬器或者直接連接真機(jī)運行储矩,就可以看到一個簡單的Flutter應(yīng)用了感耙,可以在Android和iOS不同平臺下看看差異。

Flutter架構(gòu)

Flutter是一款移動應(yīng)用程序SDK持隧,一份代碼可以同時生成iOS和Android兩個高性能抑月、高保真的應(yīng)用程序。

Flutter不同平臺表現(xiàn)

Flutter對于移動開發(fā)人員舆蝴,最誘惑的能力是其完全的跨平臺特性,不同于RN這種一處學(xué)到處寫题诵,它是一處寫到出跑洁仗,但是他跟其他的跨平臺有何區(qū)別呢?

跨平臺解決方案

市面上的跨平臺解決方案性锭,可以大致歸結(jié)為兩類:

  • 使用平臺支持的web技術(shù):這些解決方案基本上加載了應(yīng)用程序中的移動瀏覽器赠潦,并在該瀏覽器中執(zhí)行所有的邏輯,例如PhoneGap草冈。
  • 本地跨平臺:程序員編寫的代碼自動轉(zhuǎn)換為Native代碼她奥,這種方式的優(yōu)點是近乎原生的性能,例如RN怎棱、Weex哩俭、Xamarin等。

這些方案是否真正的解決了跨平臺問題呢拳恋?從目前的狀況來看凡资,很顯然是沒有的,因為它們都始終逃不開性能谬运、包大小隙赁、流暢性、內(nèi)存梆暖、平臺特性等問題伞访。

2017年8月跨平臺性能測試

RN單獨擰出來說,是因為它們并不是追求的一次寫到處跑轰驳,F(xiàn)B自己也知道不現(xiàn)實厚掷,所以把口號改成一次學(xué)到處寫弟灼,去考慮平臺的特性,去考慮這個被跨平臺方案經(jīng)常忽略的問題蝗肪。但是RN也并沒有被廣泛的接納袜爪,從阿里開始使用到放棄,里面的很多坑都繞不過去薛闪。寫一次到處跑確實很誘人辛馆,從企業(yè)角度講,可以節(jié)省大量的人力豁延,但是卻忽略了一個很基礎(chǔ)的問題昙篙,不同平臺是否希望如此,蘋果是否會愿意自己的生態(tài)被打破诱咏,不同平臺的特性是否應(yīng)該被歸為一致苔可。

Flutter的跨平臺解決方案

上面簡單說了傳統(tǒng)跨平臺解決方案,我們再回過頭看看Flutter的解決方案袋狞,F(xiàn)lutter跨平臺最核心的部分焚辅,是它的高性能渲染引擎(Flutter Engine)。Flutter不使用瀏覽器技術(shù)苟鸯,也不使用Native的原生控件同蜻,它使用自己的渲染引擎來繪制widget。

說到widget早处,就要說一句Flutter的一切皆為widget理念湾蔓。widget是Flutter應(yīng)用程序用戶界面的基本構(gòu)建塊。每個widget都是用戶界面一部分的不可變聲明砌梆。與其他將視圖默责、控制器、布局和其他屬性分離的框架不同咸包,F(xiàn)lutter具有一致的統(tǒng)一對象模型:widget桃序。在更新widget的時候,框架能夠更加的高效烂瘫。

對于Android平臺葡缰,F(xiàn)lutter引擎的C/C++代碼是由NDK編譯,在iOS平臺忱反,則是由LLVM編譯泛释,兩個平臺的Dart代碼都是AOT編譯為本地代碼,F(xiàn)lutter應(yīng)用程序使用本機(jī)指令集運行温算。

Flutter正是是通過使用相同的渲染器怜校、框架和一組widget,來同時構(gòu)建iOS和Android應(yīng)用注竿,而無需維護(hù)兩套獨立的代碼庫茄茁。

Flutter

Flutter將UI組件和渲染器從平臺移動到應(yīng)用程序中魂贬,這使得它們可以自定義和可擴(kuò)展。Flutter唯一要求系統(tǒng)提供的是canvas裙顽,以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上付燥。

Flutter框架

Flutter框架是一個分層的結(jié)構(gòu),每個層都建立在前一層之上愈犹。

Flutter 框架

框架沒什么可介紹的(主要是詳細(xì)介紹我也沒找到啥資料键科,大寫的尷尬),看著很簡單漩怎,就分為兩個部分勋颖,F(xiàn)ramework和Engine部分,其中Framework提供了各種基礎(chǔ)的組件庫勋锤,Engine部分渲染各種widget授帕,兩者共同作用核无,使得運行性能高效穩(wěn)定宵呛。

Flutter調(diào)研

生態(tài)

在Flutter官方的Pub平臺上油猫,純Flutter Package大概有兩千多個,基本上常見的庫還是都有的谈宛,例如網(wǎng)絡(luò)次哈、圖片、音視頻播放等等入挣。但是對于目前Android以及iOS的生態(tài),還是遠(yuǎn)遠(yuǎn)的不足的硝拧,對于一些復(fù)雜的UI或者一些不是特別通用的功能径筏,就得自己去實現(xiàn)。

包大小

根據(jù)官網(wǎng)的介紹障陶,一個最小的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運行官方的例子苦银,會有時候crash掉啸胧,因此我們將一個開源的Flutter應(yīng)用赶站,添加了Bugly上報,在Android平臺進(jìn)行了眾測纺念。

眾測人次及啟動次數(shù)

參與人次大概150人左右贝椿,啟動次數(shù)大概500次左右,沒有出現(xiàn)一次Crash數(shù)據(jù)上報陷谱,由于app很簡單烙博,并不能說明很多問題,但是眾測用戶反饋了約12條信息叭首,其中1條是類似于ANR习勤,無法操作,其余的部分則是卡頓相關(guān)的反饋焙格。

流暢性

將官方的例子發(fā)給測試同學(xué)图毕,讓在iOS以及Android平臺的不同機(jī)子上運行了下。在iOS上基本上流暢運行眷唉,沒有出現(xiàn)卡頓的現(xiàn)象予颤,在Android部分設(shè)備上,出現(xiàn)了卡頓的現(xiàn)象冬阳。

Android流暢性評測
iOS流暢性評測

由于沒有復(fù)雜的例子蛤虐,其實這個流暢性的測試,意義不是特別大肝陪,官方簡單的控件展示demo程序驳庭,本身就很簡單,但是在Android上還是出現(xiàn)了不少問題氯窍,只能說明整體還有非常大的優(yōu)化空間饲常。

編寫復(fù)雜程度

試著照著一張設(shè)計稿進(jìn)行了簡單的純布局代碼工作,初次接觸用起來還是比較復(fù)雜狼讨,尤其是那恐怖的嵌套層級贝淤,對代碼維護(hù)來說絕對是個問題,而且由于Flutter的widget機(jī)制政供,很多組件只支持最基本的操作播聪,例如一些擴(kuò)展的屬性,都得自己去實現(xiàn)布隔,況且現(xiàn)在組件庫還不是非常的豐富离陶。代碼量也比較多,整個代碼大概有500行左右衅檀,還只是不涉及到一些交互以及數(shù)據(jù)綁定等枕磁。

iOS和Android運行對比

從運行效果看,還是比較的不錯术吝,兩者還原的效果都挺不錯的计济。

結(jié)論

如果是個人而言茸苇,我覺得可以放心大膽的去學(xué)習(xí)嘗試,如果自己開發(fā)app的話沦寂,可以寫一套代碼学密,在多個平臺運行發(fā)布。

如果是商業(yè)團(tuán)隊传藏,這個就要自行取舍腻暮,目前而言,F(xiàn)lutter生態(tài)還是非常的不完善毯侦,相關(guān)的資料也非常少哭靖。目前處于beta 3階段,多久能到release侈离,能否到release试幽,都是個未知數(shù),而且卦碾,用Flutter铺坞,最大的風(fēng)險,就是項目整體的不可把控洲胖,一旦出現(xiàn)一些坑济榨,如果能填好,那還行绿映,如果涉及到無法解決的問題擒滑,就只能放棄。因此看自己團(tuán)隊人力以及時間合理安排比較合適叉弦。目前看阿里的咸魚團(tuán)隊在研究Flutter丐一。

如果單純從Flutter本身能夠解決的問題的方面出發(fā),使用Flutter確實能夠產(chǎn)生一定的收益卸奉,節(jié)省開發(fā)成本钝诚,如果考慮到目前坑比較多的狀況颖御,加上踩坑的時間榄棵,可能就無法去評估了。

總體來說潘拱,F(xiàn)lutter確實是一個比較不錯的東西疹鳄,如果谷歌能夠把它發(fā)展的比較完善,對于個人以及小團(tuán)隊來說芦岂,確實是個福音瘪弓。

參考

  1. Flutter中文網(wǎng)
  2. Google 悄悄開發(fā)的全新操作系統(tǒng) Fuchsia 被發(fā)現(xiàn)了!
  3. 為什么Flutter會選擇 Dart 禽最?
  4. Flutter教程(二) 了解Dart語言
  5. 為什么移動端跨平臺開發(fā)不靠譜腺怯?
  6. 為什么說Flutter是革命性的袱饭?
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市呛占,隨后出現(xiàn)的幾起案子虑乖,更是在濱河造成了極大的恐慌,老刑警劉巖晾虑,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疹味,死亡現(xiàn)場離奇詭異,居然都是意外死亡帜篇,警方通過查閱死者的電腦和手機(jī)糙捺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笙隙,“玉大人洪灯,你說我怎么就攤上這事√友兀” “怎么了婴渡?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長凯亮。 經(jīng)常有香客問我边臼,道長,這世上最難降的妖魔是什么假消? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任柠并,我火速辦了婚禮,結(jié)果婚禮上富拗,老公的妹妹穿的比我還像新娘臼予。我一直安慰自己,他們只是感情好啃沪,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布粘拾。 她就那樣靜靜地躺著,像睡著了一般创千。 火紅的嫁衣襯著肌膚如雪缰雇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天追驴,我揣著相機(jī)與錄音械哟,去河邊找鬼。 笑死殿雪,一個胖子當(dāng)著我的面吹牛暇咆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼爸业,長吁一口氣:“原來是場噩夢啊……” “哼其骄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扯旷,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤年栓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后薄霜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體某抓,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年惰瓜,在試婚紗的時候發(fā)現(xiàn)自己被綠了否副。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡崎坊,死狀恐怖备禀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情奈揍,我是刑警寧澤曲尸,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站男翰,受9級特大地震影響另患,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蛾绎,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一昆箕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧租冠,春花似錦鹏倘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至镜粤,卻和暖如春捏题,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背繁仁。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工涉馅, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留归园,地道東北人黄虱。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像庸诱,于是被迫代替她去往敵國和親捻浦。 傳聞我的和親對象是個殘疾皇子晤揣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容