iT邦幫忙

0

Flutter簡介

  • 分享至 

  • xImage
  •  

Flutter簡介
Flutter 是 Google推出並開源的移動應用開發框架,主打跨平台、高保真、高性能。開發者可以通過 Dart語言開發 App,一套代碼同時運行在 iOS 和 Android平台。 Flutter提供了豐富的組件、接口,開發者可以很快地為 Flutter添加 native擴展。同時 Flutter還使用 Native引擎渲染視圖,這無疑能為用戶提供良好的體驗。

跨平台自繪引擎
Flutter與用於構建移動應用程序的其它大多數框架不同,因為Flutter既不使用WebView,也不使用操作系統的原生控件。 相反,Flutter使用自己的高性能渲染引擎來繪制widget。這樣不僅可以保證在Android和iOS上UI的一致性,而且也可以避免對原生控件依賴而帶來的限制及高昂的維護成本。

Flutter使用Skia作為其2D渲染引擎,Skia是Google的一個2D圖形處理函數庫,包含字型、坐標轉換,以及點陣圖都有高效能且簡潔的表現,Skia是跨平台的,並提供了非常友好的API,目前Google Chrome瀏覽器和Android均采用Skia作為其繪圖引擎。
目前Flutter默認支持iOS、Android、Fuchsia(Google新的自研操作系統)三個移動平台。但Flutter亦可支持Web開發(Flutter for web)和PC開發,本書的示例和介紹主要是基於iOS和Android平台的,其它平台讀者可以自行了解。

高性能
Flutter高性能主要靠兩點來保證,首先,Flutter APP采用Dart語言開發。
Dart在 JIT(即時編譯)模式下,速度與 JavaScript基本持平。但是 Dart支持 AOT,當以 AOT模式運行時,JavaScript便遠遠追不上了。速度的提升對高幀率下的視圖數據計算很有幫助。
其次,Flutter使用自己的渲染引擎來繪制UI,布局數據等由Dart語言直接控制,所以在布局過程中不需要像RN那樣要在JavaScript和Native之間通信,這在一些滑動和拖動的場景下具有明顯優勢,因為在滑動和拖動過程往往都會引起布局發生變化,所以JavaScript需要和Native之間不停的同步布局信息,這和在瀏覽器中要JavaScript頻繁操作DOM所帶來的問題是相同的,都會帶來比較可觀的性能開銷。

采用Dart語言開發
這是一個很有意思,但也很有爭議的問題,在了解Flutter為什麽選擇了 Dart而不是 JavaScript之前我們先來介紹兩個概念:JIT和AOT。
目前,程序主要有兩種運行方式:靜態編譯與動態解釋。靜態編譯的程序在執行前全部被翻譯為機器碼,通常將這種類型稱為AOT (Ahead of time)即 “提前編譯”;而解釋執行的則是一句一句邊翻譯邊運行,通常將這種類型稱為JIT(Just-in-time)即“即時編譯”。AOT程序的典型代表是用C/C++開發的應用,它們必須在執行前編譯成機器碼,而JIT的代表則非常多,如JavaScript、python等,事實上,所有腳本語言都支持JIT模式。但需要注意的是JIT和AOT指的是程序運行方式,和編程語言並非強關聯的,有些語言既可以以JIT方式運行也可以以AOT方式運行,如Java、Python,它們可以在第一次執行時編譯成中間字節碼、然後在之後執行時可以直接執行字節碼,也許有人會說,中間字節碼並非機器碼,在程序執行時仍然需要動態將字節碼轉為機器碼,是的,這沒有錯,不過通常我們區分是否為AOT的標準就是看代碼在執行之前是否需要編譯,只要需要編譯,無論其編譯產物是字節碼還是機器碼,都屬於AOT。在此,讀者不必糾結於概念,概念就是為了傳達精神而發明的,只要讀者能夠理解其原理即可,得其神忘其形。

現在我們看看Flutter為什麽選擇Dart語言?筆者根據官方解釋以及自己對Flutter的理解總結了以下幾條(由於其它跨平台框架都將JavaScript作為其開發語言,所以主要將Dart和JavaScript做一個對比):

開發效率高

Dart運行時和編譯器支持Flutter的兩個關鍵特性的組合:
基於JIT的快速開發周期:Flutter在開發階段采用,采用JIT模式,這樣就避免了每次改動都要進行編譯,極大的節省了開發時間;
基於AOT的發布包: Flutter在發布時可以通過AOT生成高效的ARM代碼以保證應用性能。而JavaScript則不具有這個能力。

高性能

Flutter旨在提供流暢、高保真的的UI體驗。為了實現這一點,Flutter中需要能夠在每個動畫幀中運行大量的代碼。這意味著需要一種既能提供高性能的語言,而不會出現會丟幀的周期性暫停,而Dart支持AOT,在這一點上可以做的比JavaScript更好。

快速內存分配

Flutter框架使用函數式流,這使得它在很大程度上依賴於底層的內存分配器。因此,擁有一個能夠有效地處理瑣碎任務的內存分配器將顯得十分重要,在缺乏此功能的語言中,Flutter將無法有效地工作。當然Chrome V8的JavaScript引擎在內存分配上也已經做的很好,事實上Dart開發團隊的很多成員都是來自Chrome團隊的,所以在內存分配上Dart並不能作為超越JavaScript的優勢,而對於Flutter來說,它需要這樣的特性,而Dart也正好滿足而已。

類型安全

由於Dart是類型安全的語言,支持靜態類型檢測,所以可以在編譯前發現一些類型的錯誤,並排除潛在問題,這一點對於前端開發者來說可能會更具有吸引力。與之不同的,JavaScript是一個弱類型語言,也因此前端社區出現了很多給JavaScript代碼添加靜態類型檢測的擴展語言和工具,如:微軟的TypeScript以及Facebook的Flow。相比之下,Dart本身就支持靜態類型,這是它的一個重要優勢。

Dart團隊就在你身邊

看似不起眼,實則舉足輕重。由於有Dart團隊的積極投入,Flutter團隊可以獲得更多、更方便的支持,正如Flutter官網所述“我們正與Dart社區進行密切合作,以改進Dart在Flutter中的使用。例如,當我們最初采用Dart時,該語言並沒有提供生成原生二進制文件的工具鏈(這對於實現可預測的高性能具有很大的幫助),但是現在它實現了,因為Dart團隊專門為Flutter構建了它。同樣,Dart VM之前已經針對吞吐量進行了優化,但團隊現在正在優化VM的延遲時間,這對於Flutter的工作負載更為重要。”

總結
本節主要介紹了一下Flutter的特點,如果你感到有些點還不是很好理解,不用著急,隨著日後對Flutter細節的了解,再回過頭來看,相信你會有更深的體會。

Flutter框架結構
本節我們先對Flutter的框架做一個整體介紹,旨在讓讀者心中有一個整體的印象,這對初學者來說非常重要。如果一下子便深入到Flutter中,就會像是一個在沙漠中沒有地圖的人,即使可以找到一個綠洲,但是他也不會知道下一個綠洲在哪。因此,無論學什麽技術,都要先有一張清晰的“地圖”,而我們的學習過程就是“按圖索驥”,這樣我們才不會陷於細節而“目無全牛”。

Flutter Framework
這是一個純 Dart實現的 SDK,它實現了一套基礎庫,自底向上,我們來簡單介紹一下:

底下兩層(Foundation和Animation、Painting、Gestures)在Google的一些視頻中被合並為一個dart UI層,對應的是Flutter中的dart:ui包,它是Flutter引擎暴露的底層UI庫,提供動畫、手勢及繪制能力。
Rendering層,這一層是一個抽象的布局層,它依賴於dart UI層,Rendering層會構建一個UI樹,當UI樹有變化時,會計算出有變化的部分,然後更新UI樹,最終將UI樹繪制到屏幕上,這個過程類似於React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分,它除了確定每個UI元素的位置、大小之外還要進行坐標變換、繪制(調用底層dart:ui)。
Widgets層是Flutter提供的的一套基礎組件庫,在基礎組件庫之上,Flutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。而我們Flutter開發的大多數場景,只是和這兩層打交道。
Flutter Engine
這是一個純 C++實現的 SDK,其中包括了 Skia引擎、Dart運行時、文字排版引擎等。在代碼調用 dart:ui庫時,調用最終會走到Engine層,然後實現真正的繪制邏輯。

總結
Flutter框架本身有著良好的分層設計,本節旨在讓讀者對Flutter整體框架有個大概的印象,相信到現在為止,讀者已經對Flutter有一個初始印象,在我們正式動手之前,我們還需要了解一下Flutter的開發語言Dart。

如何學習Flutter
本節給大家一些學習建議,分享一下筆者在學習Flutter中的一些心得,希望可以幫助你提高學習效率,避免不必要的坑。

資源
官網:閱讀Flutter官網的資源是快速入門的最佳方式,同時官網也是了解最新Flutter發展動態的地方,由於目前Flutter仍然處於快速發展階段,所以建議讀者還是時不時的去官網看看有沒有新的動態。
源碼及注釋:源碼注釋應作為學習Flutter的第一文檔,Flutter SDK的源碼是開源的,並且注釋非常詳細,也有很多示例,實際上,Flutter官方的SDK文檔就是通過注釋生成的。源碼結合注釋可以幫你解決大多數問題。
Github:如果遇到的問題在StackOverflow上也沒有找到答案,可以去github flutter 項目下提issue。
Gallery源碼:Gallery是Flutter官方示例APP,里面有豐富的示例,讀者可以在網上下載安裝。Gallery的源碼在Flutter源碼“examples”目錄下。
社區
StackOverflow:如果你還沒聽過StackOverflow,這是目前全球最大的程序員問答社區,現在也是活躍度最高的Flutter問答社區。StackOverflow上面除了世界各地的Flutter使用者會在上面交流之外,Flutter開發團隊的成員也經常會在上面回答問題。
Flutter中文網社區:Flutter中文網是筆者維護中文網站,目前也是最大的中文資源社區,上面提供了Flutter官網的文檔翻譯、開源項目、及案例,還有申請加入組織的入口哦。
博客:隨著Flutter技術的推廣,相信很快網上將會有很多Flutter相關的文章、博客,讀者可以多去瀏覽、閱讀。總結
有了資料和社區後,對於我們學習者自身來說,最重要的還是要多動手、多實踐,在本書後面的章節中,希望讀者能夠親自動手寫一下示例。準備好了嗎,下一章中,我們將正式進入Flutter的世界!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言