國內少有的Flutter乾貨分享:Flutter的原理及美團的實踐!

原文:http://blog.itpub.net/31077337/viewspace-2199818/

Flutter是Google開發的一套全新的跨平臺、開源UI框架,支持iOS、Android系統開發,並且是未來新操作系統Fuchsia的默認開發套件。自從2017年5月發佈 第一個版本 以來,目前Flutter已經發布了近60個版本,並且在2018年5月發佈了第一個 “Ready for Production Apps” 的Beta 3版本,6月20日發佈了第一個 “Release Preview” 版本。

初識Flutter

Flutter的目標是使同一套代碼同時運行在Android和iOS系統上,並且擁有媲美原生應用的性能,Flutter甚至提供了兩套控件來適配Android和iOS(滾動效果、字體和控件圖標等等),爲了讓App在細節處看起來更像原生應用。

在Flutter誕生之前,已經有許多跨平臺UI框架的方案,比如基於WebView的Cordova、AppCan等,還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

基於WebView的框架優點很明顯,它們幾乎可以完全繼承現代Web開發的所有成果(豐富得多的控件庫、滿足各種需求的頁面框架、完全的動態化、自動化測試工具等等),當然也包括Web開發人員,不需要太多的學習和遷移成本就可以開發一個App。同時WebView框架也有一個致命(在對體驗&性能有較高要求的情況下)的缺點,那就是WebView的渲染效率和JavaScript執行性能太差。再加上Android各個系統版本和設備廠商的定製,很難保證所在所有設備上都能提供一致的體驗。

爲了解決WebView性能差的問題,以React Native爲代表的一類框架將最終渲染工作交還給了系統,雖然同樣使用類HTML+JS的UI構建邏輯,但是最終會生成對應的自定義原生控件,以充分利用原生控件相對於WebView的較高的繪製效率。與此同時這種策略也將框架本身和App開發者綁在了系統的控件系統上,不僅框架本身需要處理大量平臺相關的邏輯,隨着系統版本變化和API的變化,開發者可能也需要處理不同平臺的差異,甚至有些特性只能在部分平臺上實現,這樣框架的跨平臺特性就會大打折扣。

Flutter則開闢了一種全新的思路,從頭到尾重寫一套跨平臺的UI框架,包括UI控件、渲染邏輯甚至開發語言。渲染引擎依靠跨平臺的Skia圖形庫來實現,依賴系統的只有圖形繪製相關的接口,可以在最大程度上保證不同平臺、不同設備的體驗一致性,邏輯處理使用支持AOT的Dart語言,執行效率也比JavaScript高得多。

Flutter同時支持Windows、Linux和macOS操作系統作爲開發環境,並且在Android Studio和VS Code兩個IDE上都提供了全功能的支持。Flutter所使用的Dart語言同時支持AOT和JIT運行方式,JIT模式下還有一個備受歡迎的開發利器“熱刷新”(Hot Reload),即在Android Studio中編輯Dart代碼後,只需要點擊保存或者“Hot Reload”按鈕,就可以立即更新到正在運行的設備上,不需要重新編譯App,甚至不需要重啓App,立即就可以看到更新後的樣式。

在Flutter中,所有功能都可以通過組合多個Widget來實現,包括對齊方式、按行排列、按列排列、網格排列甚至事件處理等等。Flutter控件主要分爲兩大類,StatelessWidget和StatefulWidget,StatelessWidget用來展示靜態的文本或者圖片,如果控件需要根據外部數據或者用戶操作來改變的話,就需要使用StatefulWidget。State的概念也是來源於Facebook的流行Web框架 React ,React風格的框架中使用控件樹和各自的狀態來構建界面,當某個控件的狀態發生變化時由框架負責對比前後狀態差異並且採取最小代價來更新渲染結果。

總結
Flutter目前仍處於早期階段,也還沒有發佈正式的Release版本,不過我們看到Flutter團隊一直在爲這一目標而努力。雖然Flutter的開發生態不如Android和iOS原生應用那麼成熟,許多常用的複雜控件還需要自己實現,有的甚至會比較困難(比如官方尚未提供的 ListView.scrollTo(index) 功能),但是在高性能和跨平臺方面Flutter在衆多UI框架中還是有很大優勢的。

開發Flutter應用只能使用Dart語言,Dart本身既有靜態語言的特性,也支持動態語言的部分特性,對於Java和JavaScript開發者來說門檻都不高,3-5天可以快速上手,大約1-2周可以熟練掌握。

在開發全品類頁面的Flutter版本時我們也深刻體會到了Dart語言的魅力,Dart的語言特性使得Flutter的界面構建過程也比Android原生的XML+JAVA更直觀,代碼量也從原來的900多行減少到500多行(排除掉引用的公共組件)。Flutter頁面集成到App後APK體積至少會增加5.5MB,其中包括3.3MB的SO庫文件和2.2MB的ICU數據文件,此外業務代碼1300行編譯產物的大小有2MB左右。

Flutter本身的特性適合追求iOS和Android跨平臺的一致體驗,追求高性能的UI交互效果的場景,不適合追求動態化部署的場景。Flutter在Android上已經可以實現動態化部署,但是由於Apple的限制,在iOS上實現動態化部署非常困難,Flutter團隊也正在和Apple積極溝通。

美團外賣大前端團隊將來也會繼續在更多場景下使用Flutter實現,並且將實踐過程中發現和修復的問題積極反饋到開源社區,幫助Flutter更好地發展。如果你也對Flutter感興趣,歡迎加入我們。

作者簡介

少傑,美團高級工程師,2017年加入美團,目前主要負責外賣App監控等基礎設施建設工作。

本文轉載自美團技術團隊微信公衆號,原文鏈接:https://mp.weixin.qq.com/s/cJjKZCqc8UuzvEtxK1BJCw

來自 “ ITPUB博客 ” ,鏈接:http://blog.itpub.net/31077337/viewspace-2199818/,如需轉載,請註明出處,否則將追究法律責任。

學習視頻:https://www.bilibili.com/video/av38696227
https://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650827004&idx=1&sn=c6442871abb8ab1f657a387b261d053b&chksm=80b7bc62b7c035746f286868f564323810e2f9aa3d11f5e383add86f16a46e57fd12420ae887&scene=0#rd

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章