革命性web前端框架Flutter詳細介紹和學習路徑 [復制鏈接]

2019-3-14 10:25
ceshishangchuan 閱讀:328 評論:0 贊:1
Tag:  

Flutter是什么

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,并且Flutter是完全免費、開源的。

Flutter歷史

說到Flutter,可能很多小伙伴都會以為它是新興的、移動端、動態化、跨平臺、開發框架,其實早在2014年10月,它就已經誕生。

從去年開始Flutter的熱度在不斷地上升,那么它對很多小伙伴造成了一個誤區:認為Flutter是最近新興的一個開發框架。說Flutter是最流行的框架呢,是沒有任何問題的,但它并不是一個最近才出現的開發框架。為什么這么說呢?

革命性web前端框架Flutter詳細介紹和學習路徑

Flutter歷史

2014.10 - Flutter的前身Sky在GitHub上開源

2015.10 - 經過一年的開源,Sky正式改名為Flutter

2017.5 - Google I/O正式向外界公布了Flutter,這個時候Flutter才正式進去大家的視野

2018.6 - 距5月Google I/O 1個月的時間,Flutter1.0預覽版

2018.12 - Flutter1.0發布,它的發布將大家對Flutter的學習和研究推到了一個新的起點

2019.2 - Flutter1.2發布主要增加對web的支持

由此可以看出:Flutter正在逐漸的走向成熟和壯大,它的生態圈也在不斷的發展,所以現在學習Flutter的時機是非常的好。

Flutter框架原理

Flutter實現跨平臺采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScript,而是自己實現了一臺UI框架,然后直接系統更底層渲染系統上畫UI。所以它采用的開發語言不是JS,而Dart(Dart是面向對象的、類定義的、單繼承的語言。它的語法類似C語言,可以轉譯為JavaScript,支持接口(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type syste)。據稱Dart語言可以編譯成原生代碼,直接跟原生通信。

Flutter將UI組件和渲染器從平臺移動到應用程序中,這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas,以便定制的UI組件可以出現在設備的屏幕上,以及訪問事件(觸摸,定時器等)和服務(位置、相機等)。這是Flutter可以做到跨平臺而且高效的關鍵。另外Flutter學習了RN的UI編程方式,引入了狀態機,更新UI時只更新最小改變區域。

系統的UI框架可以取代,但是系統提供的一些服務是無法取代的。Flutter在跟系統service通信方式,采用的是一種類似插件式的方式,或者有點像遠程過程調用RPC方式。這種方式據說也要比RN的橋接方式高效。

Flutter為什么要采用Dart語言了?

Dart能成為Flutter不可或缺的一部分,根本原因還是因為其具有以下特性:

1)Dart是AOT(Ahead Of Time)編譯的,編譯成快速、可預測的本地代碼,使Flutter幾乎都可以使用Dart編寫。這不僅使Flutter變得更快,而且幾乎所有的東西(包括所有的小部件)都可以定制;

2)Dart也可以JIT(Just In Time)編譯,開發周期異常快,工作流顛覆常規(包括Flutter流行的亞秒級有狀態熱重載);

3)Dart可以更輕松地創建以60fps運行的流暢動畫和轉場。Dart可以在沒有鎖的情況下進行對象分配和垃圾回收。就像JavaScript一樣,Dart避免了搶占式調度和共享內存(因而也不需要鎖)。由于Flutter應用程序被編譯為本地代碼,因此它們不需要在領域之間建立緩慢的橋梁(例如,JavaScript到本地代碼)。它的啟動速度也快得多;

4)Dart使Flutter不需要單獨的聲明式布局語言,如JSX或XML,或單獨的可視化界面構建器,因為Dart的聲明式編程布局易于閱讀和可視化。所有的布局使用一種語言,聚集在一處,Flutter很容易提供高級工具,使布局更簡單;

5)開發人員發現Dart特別容易學習,因為它具有靜態和動態語言用戶都熟悉的特性。

Flutter 和 React Native 底層架構的比較

React-Native、Weex 核心是通過 Javascript 開發,執行時需要 Javascript 解釋器,UI 是通過原生控件渲染。Flutter 與用于構建移動應用程序的其它大多數框架不同,因為 Flutter 既不使用 WebView,也不使用操作系統的原生控件。 相反,Flutter 使用自己的高性能渲染引擎來繪 制 widget。Flutter 使用 C、C ++、Dart 和 Skia(2D渲染引擎)構建

Skia 是一個 2D的繪圖引擎庫,其前身是一個向量繪圖軟件,Chrome 和 Android 均采用 Skia 作為繪圖引擎。Android 自帶了 Skia,所以 Flutter Android SDK要比 iOS SDK小很多。

在 ReactNative 中,引入了虛擬 DOM 來減少DOM的回流和重繪,系統將虛擬 DOM 與真正的 DOM 進行比較,生成一組最小的更改,然后執行這些更改,以更新真正的 DOM。最后,平臺重新繪制真實的 DOM 到畫布中。

React Native 是移動開發的一大進步,并且是 Flutter 的靈感來源,但 Flutter 更進一步。 在 Flutter 中,UI 組件和渲染器已經從平臺中集成到用戶的應用程序中。沒有系統 UI 組件可以操作,所以原來虛擬控件樹的地方現在是真實的控件樹。Flutter 渲染 UI 控件樹并將其繪制到平臺畫布上。

UI 一致性

Flutter 因為是自己做的渲染,因此在iOS和Android的效果基本完全一致。 React Native存在將RN控件轉換為對應平臺原生控件的過程,存在一定的差異(如之前在調研里提到過的Button在iOS和Android下面顯示效果不一樣)。

動態化技術

Flutter使用的Dart語言,支持AOT和JIT兩種模式,在Dev時候,通過JIT可以實現熱重載,開發者可以即時的看到代碼修改的效果。而在Release Build的時候,通過AOT事先編譯,來最大化的優化性能。因此目前Flutter不支持代碼的熱更新。

ReactNative 的代碼通過加載 JSBundle.js執行,JSBundle.js可以保存在本地,也可以通過遠程加載。目前有很多RN的熱更新方案供選擇。

App體積

Flutter iOS空項目 30M左右,Android空項目 7M左右。 (iOS需要額外集成Skia) React Native iOS空項目 3M左右,Android20M左右。(Android會加入OKHttp導致體積增大)

Flutter 部分的底層功能在 Android 系統上已經有實現,因此 Android 上適配要好(RN在 Android 上有可能遇到兼容性問題)。

Flutter的優勢

運行效率上,Flutter和ReactNative都可以達到理論上的60幀的刷新率,來實現「Native般的流暢體驗」,Flutter是全Native在執行,基于底層代碼(Android 上為 C++ with NDK,iOS 上為 C++ with LLVM),而ReactNative是Native控件 + JavaScript代碼,實際性能上,Flutter應該優于ReactNative,據官方文檔,Flutter可以在支持的設備上達到120FPS,而ReactNative的文檔上,只提到了可以達到60FPS(RN是否支持120FPS未深入調研,文檔上 RN 可以通過優化 diff 的方法提升渲染效率)。

兼容性上,Flutter 提供的 widget 都是基于 skia來實現和精心定制的,與具體平臺沒關,所以能保持很高的跨 os 跨 os version 的兼容性。 Flutter 從更基礎的層去抹平平臺差異,站在了更寬廣、更可控的一個基礎平臺上去演變和發展。 Flutter 官方提供了大部分 Material Design 控件的實現(甚至比 Android Design Support 實現的更多)。

說了這么多,那么學習Flutter都需要掌握哪些知識呢?接下來給大家分享一個Flutter技術棧供大家參考

學習Flutter需要掌握的技術棧?

學習Flutter需要掌握的技術棧

該如何學習Flutter?

如何系統化的學習Flutter,可以從以下方面入手:

快速上手Flutter開發

Dart基礎知識

什么是聲明式UI

Flutter入門基礎知識

項目結構、資源、依賴和本地化

認識視圖(Views)

布局與列表

狀態管理

路由與導航

線程和異步UI

手勢檢測及觸摸事件處理

主題和文字處理

表單輸入與富文本

調用硬件、第三方服務以及平臺交互、通知

Flutter入門:Flutter必備基礎入門

學習構建Flutter實例項目

圖片控件開發詳解

動畫Animation開發指南

Flutter調試技巧

Flutter進階提升:網絡編程與數據存儲技術

基于Http實現網絡操作

異步:Future與FutureBuilder實用技巧

JSON解析與復雜模型轉換實用技巧

基于shared_preferences的本地存儲操作

Flutter列表組件

基于ListView實現水平和垂直方式滾動的列表

基于ExpansionTile實現可展開的列表

基于GridView實現網格列表

高級功能列表下拉刷新與上拉加載更多功能實現

Flutter,Native混合開發

Flutter混合開發流程與創建Flutter module

Flutter Android混合開發實戰-集成與調用

Flutter Android混合開發實戰-調試與發布

Flutter iOS混合開發實戰-集成與調用

Flutter iOS混合開發實戰-調試與發布

Flutter通信機制&Darr端實現

Flutter與Native通信-Android端實現

Flutter與Native通信-Android實戰

Flutter與Native通信-iOS端實現

Flutter與Native通信-iOS端實戰

Flutter智能AI語音搜索模塊實現

Native SDK集成流程

百度AI語音SDK引入

語音搜索功能實現

Flutter開發包和插件開發指南

Flutter插件開發流程與步驟(LoadingContainer)

Flutte插件開發與發布

Flutter全面屏、折疊屏適配與兼容問題

Flutter 全屏幕、折疊屏適配指南

Flutter 適配iOS、Android全面屏

Flutter打包發布Flutter應用

Flutter項目優化

打包發布Flutter Android應用

打包發布Flutter iOS應用

Flutter升級與適配指南

Flutter升級與適配指南

按這個路徑學習完,你就是Flutter大神,等著被膜拜吧。


我來說兩句
您需要登錄后才可以評論 登錄 | 立即注冊
facelist
所有評論(0)
領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

两码中特期期