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

轉自 Q吹個大氣球Q

本文主要介紹Flutter相關的東西,包括Fuchsia、Dart、Flutter特性、安裝以及整體架構等內容。

簡介

Flutter作為谷歌最近推出的跨平臺開發框架,一經推出便吸引了不少注意。關于Flutter,目前我們知道它是一個跨平臺開發框架。但是它本身并不止于此,例如Fuchsia、Dart等,我們也都需要去了解。

Fuchsia

說到Flutter,絕對繞不開Fuchsia,這個是谷歌開發的一款全新的操作系統,GitHub地址以及Google source主頁。Fuchsia內核是Magenta Kernel,一個基于LittleKernel的項目。該系統與Android相比,無論是存儲器還是內存之類的硬件要求都大幅降低,外界推論是一款面向物聯網的系統。筆者倒是沒有查到谷歌開發這款操作系統的目的,如果有知曉的,也煩請告知。

就像很多博客主說的那樣,如果只是取代Android,那無疑是一種很不好的做法。任何技術的推動,都得靠背后的商業驅動,尤其是這種涉及到手機廠商利益的技術。

Flutter

Flutter是Fuchsia的開發框架,是一套移動UI框架,可以快速在iOS、Android以及Fuchsia上構建高質量的原生用戶界面。 目前Flutter是完全免費、開源的,GitHub地址。其官方編程語言為Dart,也是一門全新的語言。所以說,上手成本比較高,對于移動端開發人員,語言以及框架都是全新的,整個技術棧的積累也都得從頭開始。

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

  • 快速開發:Flutter的熱重載可以快速地進行測試、構建UI、添加功能并更快地修復錯誤。
  • 富有表現力,漂亮的用戶界面:自帶的Material Design和Cupertino(iOS風格)widget、豐富的motion API、平滑而自然的滑動效果。
  • 響應式框架:使用Flutter的現代、響應式框架,和一系列基礎widget,輕松構建您的用戶界面。
  • 訪問本地功能和SDK:Flutter可以復用現有的Java、Swift或ObjC代碼,訪問iOS和Android上的原生系統功能和系統SDK。
  • 統一的應用開發體驗:Flutter擁有豐富的工具和庫,可以幫助開發者輕松地同時在iOS和Android系統中實現想法和創意。
  • 原生性能:Flutter包含了許多核心的widget,如滾動、導航、圖標和字體等,這些都可以在iOS和Android上達到原生應用一樣的性能。

其實從官方特性來看,唯一有點吸引力的就是統一的應用開發體驗。一套代碼運行在多個平臺,做到真正的跨平臺。像熱加載,目前Android開發本身就支持了,響應式框架以及訪問本地功能和SDK,對于Native來說,本身并沒有多大的吸引。至于漂亮的用戶界面,國內的商業項目,哪一個會去按照Material Design去設計。

跨平臺本身,往往意味著性能受損,通用性解決不了的問題,又得回到Native去實現。所以這些因素也是跨平臺從移動端誕生之初就開始提,到現在也沒有被很好解決的一個原因。至于谷歌能夠做到什么程度,或者說開發者該保持什么期許,我覺得都不好說,或許谷歌解決了一個多年的難題,或者又像被谷歌放棄掉的其他項目一樣。拋開商業層面,對于技術人員,我們更多的是應該去關注它的思想,谷歌是如何去解決這些實際存在很久的問題的,至于技術本身的發展,這個是個人開發者無法去左右的,技術的更迭,保持一種學習的狀態,然后努力鍛煉身體,就能夠保證不被淘汰掉。

Dart

Dart是谷歌開發的計算機編程語言,于2011年10月份發布,可以被用于web、服務器、移動端和物聯網等領域的開發。Flutter采用Dart,原因很多,拋開商業層面的Java版權問題,單純從技術層面:

  • Dart是AOT(Ahead Of Time)編譯的,編譯成快速、可預測的本地代碼,使Flutter幾乎都可以使用Dart編寫;
  • Dart也可以JIT(Just In Time)編譯,開發周期快;
  • Dart可以更輕松地創建以60fps運行的流暢動畫和轉場;
  • Dart使Flutter不需要單獨的聲明式布局語言;
  • Dart容易學習,具有靜態和動態語言用戶都熟悉的特性。

Dart最初設計是為了取代JavaScript成為web開發的首選語言,最后的結果可想而知,到Dart 2的發布,專注于改善構建客戶端應用程序的體驗,可以看出定位的轉變。用過Java、Kotlin的人,可以很快的上手Dart。

一門語言的成敗,拋開背后的商業推動,我想很重要的一點在于其生態,生態的好壞,主要包括開發者以及第三方庫的數目,目前看,Dart的生態還是比較差。對于個人開發者,可以根據心情來選擇,但是對于商業應用,有更復雜的考量標準。Dart背后有谷歌的推動,能發展到什么程度,還得看其商業運作能力了。

配置

此部分針對Mac平臺,Windows平臺的安裝配置Linux平臺的安裝配置。由于筆者主要做移動端開發,如果想使用Flutter進行iOS和Android全平臺的開發,環境也建議是Mac平臺,畢竟iOS只能在Mac下進行模擬調試。

安裝Flutter

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=`pwd`/flutter/bin:$PATH

iOS設置

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Android設置

下載Android Studio,安裝Flutter插件,會將Dart插件也一起安裝。

體驗Flutter

IDE建議選擇Android Studio,安裝了Flutter插件后,Flutter的開發跟Android
開發類似,附帶三種模版工程、斷點調試等。

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

Flutter架構

Flutter是一款移動應用程序SDK,一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序。

Flutter不同平臺表現

Flutter對于移動開發人員,最誘惑的能力是其完全的跨平臺特性,不同于RN這種一處學到處寫,它是一處寫到出跑,但是他跟其他的跨平臺有何區別呢?

跨平臺解決方案

市面上的跨平臺解決方案,可以大致歸結為兩類:

  • 使用平臺支持的web技術:這些解決方案基本上加載了應用程序中的移動瀏覽器,并在該瀏覽器中執行所有的邏輯,例如PhoneGap。
  • 本地跨平臺:程序員編寫的代碼自動轉換為Native代碼,這種方式的優點是近乎原生的性能,例如RN、Weex、Xamarin等。

這些方案是否真正的解決了跨平臺問題呢?從目前的狀況來看,很顯然是沒有的,因為它們都始終逃不開性能、包大小、流暢性、內存、平臺特性等問題。

2017年8月跨平臺性能測試

RN單獨擰出來說,是因為它們并不是追求的一次寫到處跑,FB自己也知道不現實,所以把口號改成一次學到處寫,去考慮平臺的特性,去考慮這個被跨平臺方案經常忽略的問題。但是RN也并沒有被廣泛的接納,從阿里開始使用到放棄,里面的很多坑都繞不過去。寫一次到處跑確實很誘人,從企業角度講,可以節省大量的人力,但是卻忽略了一個很基礎的問題,不同平臺是否希望如此,蘋果是否會愿意自己的生態被打破,不同平臺的特性是否應該被歸為一致。

Flutter的跨平臺解決方案

上面簡單說了傳統跨平臺解決方案,我們再回過頭看看Flutter的解決方案,Flutter跨平臺最核心的部分,是它的高性能渲染引擎(Flutter Engine)。Flutter不使用瀏覽器技術,也不使用Native的原生控件,它使用自己的渲染引擎來繪制widget。

說到widget,就要說一句Flutter的一切皆為widget理念。widget是Flutter應用程序用戶界面的基本構建塊。每個widget都是用戶界面一部分的不可變聲明。與其他將視圖、控制器、布局和其他屬性分離的框架不同,Flutter具有一致的統一對象模型:widget。在更新widget的時候,框架能夠更加的高效。

對于Android平臺,Flutter引擎的C/C++代碼是由NDK編譯,在iOS平臺,則是由LLVM編譯,兩個平臺的Dart代碼都是AOT編譯為本地代碼,Flutter應用程序使用本機指令集運行。

Flutter正是是通過使用相同的渲染器、框架和一組widget,來同時構建iOS和Android應用,而無需維護兩套獨立的代碼庫。

Flutter

Flutter將UI組件和渲染器從平臺移動到應用程序中,這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas,以便定制的UI組件可以出現在設備的屏幕上。

Flutter框架

Flutter框架是一個分層的結構,每個層都建立在前一層之上。

Flutter 框架

框架沒什么可介紹的(主要是詳細介紹我也沒找到啥資料,大寫的尷尬),看著很簡單,就分為兩個部分,Framework和Engine部分,其中Framework提供了各種基礎的組件庫,Engine部分渲染各種widget,兩者共同作用,使得運行性能高效穩定。

Flutter調研

生態

在Flutter官方的Pub平臺上,純Flutter Package大概有兩千多個,基本上常見的庫還是都有的,例如網絡、圖片、音視頻播放等等。但是對于目前Android以及iOS的生態,還是遠遠的不足的,對于一些復雜的UI或者一些不是特別通用的功能,就得自己去實現。

包大小

根據官網的介紹,一個最小的Android版本的Flutter應用。release版本大小約6.7MB,其中核心引擎大約3.3MB,框架+應用程序代碼大約是1.25MB,LICENSE文件(包含在app.flx中)是55k,必需的Java代碼.dex為40k,并且約有2.1MB的ICU數據。考慮到目前網絡環境,包大小的增加,還也在可以接受的范圍。

Crash

iOS運行官方的例子,會有時候crash掉,因此我們將一個開源的Flutter應用,添加了Bugly上報,在Android平臺進行了眾測。

眾測人次及啟動次數

參與人次大概150人左右,啟動次數大概500次左右,沒有出現一次Crash數據上報,由于app很簡單,并不能說明很多問題,但是眾測用戶反饋了約12條信息,其中1條是類似于ANR,無法操作,其余的部分則是卡頓相關的反饋。

流暢性

將官方的例子發給測試同學,讓在iOS以及Android平臺的不同機子上運行了下。在iOS上基本上流暢運行,沒有出現卡頓的現象,在Android部分設備上,出現了卡頓的現象。

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

由于沒有復雜的例子,其實這個流暢性的測試,意義不是特別大,官方簡單的控件展示demo程序,本身就很簡單,但是在Android上還是出現了不少問題,只能說明整體還有非常大的優化空間。

編寫復雜程度

試著照著一張設計稿進行了簡單的純布局代碼工作,初次接觸用起來還是比較復雜,尤其是那恐怖的嵌套層級,對代碼維護來說絕對是個問題,而且由于Flutter的widget機制,很多組件只支持最基本的操作,例如一些擴展的屬性,都得自己去實現,況且現在組件庫還不是非常的豐富。代碼量也比較多,整個代碼大概有500行左右,還只是不涉及到一些交互以及數據綁定等。

iOS和Android運行對比

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

結論

如果是個人而言,我覺得可以放心大膽的去學習嘗試,如果自己開發app的話,可以寫一套代碼,在多個平臺運行發布。

如果是商業團隊,這個就要自行取舍,目前而言,Flutter生態還是非常的不完善,相關的資料也非常少。目前處于beta 3階段,多久能到release,能否到release,都是個未知數,而且,用Flutter,最大的風險,就是項目整體的不可把控,一旦出現一些坑,如果能填好,那還行,如果涉及到無法解決的問題,就只能放棄。因此看自己團隊人力以及時間合理安排比較合適。目前看阿里的咸魚團隊在研究Flutter。

如果單純從Flutter本身能夠解決的問題的方面出發,使用Flutter確實能夠產生一定的收益,節省開發成本,如果考慮到目前坑比較多的狀況,加上踩坑的時間,可能就無法去評估了。

總體來說,Flutter確實是一個比較不錯的東西,如果谷歌能夠把它發展的比較完善,對于個人以及小團隊來說,確實是個福音。

參考

  1. Flutter中文網
  2. Google 悄悄開發的全新操作系統 Fuchsia 被發現了!
  3. 為什么Flutter會選擇 Dart ?
  4. Flutter教程(二) 了解Dart語言
  5. 為什么移動端跨平臺開發不靠譜?
  6. 為什么說Flutter是革命性的?
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,030評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,310評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,951評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,796評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,566評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,055評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,142評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,303評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,799評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,683評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,899評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,409評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,135評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,520評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,757評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,528評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,844評論 2 372

推薦閱讀更多精彩內容