Flutter介紹 - Flutter,H5,React Native之間的對比


Flutter介紹

Flutter是Google推出的開源移動應用開發框架。開發者可以通過開發一套代碼同時運行在iOS和Android平台。

它使用Dart語言進行開發,並且最終編譯成各個平台的Native代碼,這樣既保證了開發效率,也保證了各個平台的運行效率。其相當於從頭到尾重寫了一套UI框架,不依賴具體平台的組件。其所有的組件都是"Widget"。渲染引擎則依靠高效渲染庫Skia實現。

下面我們對比一下H5、React Native、Flutter這些跨平台的解決方案。

移動端的跨平台技術

H5技術

常被人提起的H5技術,其實就是網頁+JavaScript。比如目前的一些流行的JS框架Vue,React,AngularJS等都是為了構建網頁。針對移動端構建出來的網頁可以實現在跨平台的功能,但是其缺點也很明顯:

  • 渲染效率低下,用戶體驗差。很多H5在iOS平台表現尚可,但是在Android上特別是一些低端機上的表現確實讓人不敢恭維。
  • 網頁調用設備硬件相關API比較困難,而且支持的功能較少,實現此類需求是H5的短板。

React Native

React Native(RN)發布於2015年,也是使用JavaScript語言進行跨平台APP的開發。與H5開發不同的是,它使用JS橋接技術在運行時編譯成各個平台的Native代碼,其使用的技術Facebook的Flux技術。
其優點是目前的生態比較成熟,目前也有很多跨平台應用使用React Native。它也是跟Flutter對比的主要對象。
其特點是:

  • 使用JavaScript語言,由於JS被廣泛地使用,所以RN也很容易被接受。
  • RN依賴JS的運行時環境,也就是JS橋接技術。其使用Facebook的Flux架構。
  • RN僅提供了UI渲染和設備訪問的API,很多功能必須依賴第三方庫來實現對本地組件的使用。
  • 生態目前比較完善,使用的公司也比較多,特別是對JS比較熟悉的同學容易上手。
  • 支持熱部署,開發過程中可以節約很多時間。

但是它也並不是完美的:

  • 它的渲染方式還是調用各個平台的原生控件,有時需要針對不同的平台做不同的優化。
  • 其性能相對於H5有很大的提高,但是並沒有完美解決,白屏,丟幀問題依然存在。

Flutter

Flutter也看到了目前的跨平台解決方案並不完美,所以它借鑒了React Native的一些思想,做出了很大的優化。它將代碼編譯成原生代碼,並且直接在各個平台中使用其高效渲染引擎Skia進行渲染,沒有橋接,不調用平台相關控件。

這種設計思想完美解決了不同平台的性能問題。

歸功於其設計思想,我們可以真正實現一套代碼,運行不同的平台。在其推出之后,關注的開發者數量和相關的教程的增長速度遠超當時的React Native。

其特點包括:

  • 使用Google自主開發的Dart語言。Dart語言是一個強類型的語言,很好地支持面向對象,並且易於學習和使用。
  • 使用谷歌自己的Skia渲染引擎,Android自帶Skia引擎,iOS平台上Flutter也會把Skia引擎打包到APP中,實現高效渲染。
  • 目前有非常豐富的視圖組件,可以點擊這里查看其組件目錄,包括Android上常用的材料設計(Material Design)的UI風格,和iOS風格(Cupertino)。由於其渲染不依賴各平台相關組件,所以運行在不同平台上的效果是一致的。
  • 同樣支持熱部署,開發時可以像網頁開發一樣實時看到效果。

目前它存在的一些問題是:

  • 國內學習資源目前並不豐富,使用Flutter的公司也比較少。
  • 相關的生態還沒有React Native那樣豐富,但是其發展速度大大超過了React Native。

總結

雖然Flutter目前並不是非常流行,但是筆者相信它是跨平台解決方案的未來。
如果谷歌的新系統Fuchsia OS能像當今的Android這樣如日中天,甚至替代掉Android的話,Flutter的發展也會迎來它的頂峰。

本系列博客我們就來深入學習和探討使用Flutter。

后面的文章我們會逐步深入學習Flutter的功能與實戰。
我的博客中關於Flutter的所有文章可以點擊這里找到,歡迎關注!

如果有問題可以留言,或者給我發郵件lloyd@examplecode.cn,期待我們共同學習與成長!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM