Flutter - 與 React Native 和 Xamarin 的比較
撲?它是什么?
Flutter 框架概述
Flutter vs React Native vs Xamarin:它們是如何工作的?
我們?yōu)槭裁匆褂?Flutter
項目回顧
結(jié)論
參考
撲?它是什么?
移動開發(fā)比以往任何時候都更令人興奮。開發(fā)者可以按照自己的方式創(chuàng)建自己的應(yīng)用,您可以選擇 . 而是在我們開發(fā)的未來編寫一次代碼并在任何地方運行的能力。
認識到這個理想,谷歌帶著他們的新武器——Flutter 加入了戰(zhàn)場。互聯(lián)網(wǎng)再次熱鬧起來,那些文章“Flutter - 以創(chuàng)紀(jì)錄的時間構(gòu)建漂亮的原生應(yīng)用程序”, “Reflectly - 從 React Native 到 Flutter”,“為什么我轉(zhuǎn)向 Flutter”,......那么什么是 Flutter?為什么大家都這么炒作呢?
如果您不熟悉React Native 或Xamarin框架,您可以在此處查看 React Native 和此處 的 Xamarin。
“ Flutter 是 Google 的移動應(yīng)用程序 SDK,用于在創(chuàng)紀(jì)錄的時間內(nèi)在 iOS 和 Android 上制作高質(zhì)量的本機界面。Flutter 使用現(xiàn)有代碼,被世界各地的開發(fā)人員和組織使用,并且是免費和開源的?!?/span>
- 谷歌 Flutter.io
簡單來說,Flutter 是 Google 創(chuàng)建的開源移動應(yīng)用程序開發(fā) SDK。它用于為 Android 和 iOS 開發(fā)應(yīng)用程序,也是為Google Fuchsia創(chuàng)建應(yīng)用程序的主要方法。Fuchsia是谷歌目前開發(fā)的新操作系統(tǒng),未來可能成為Android殺手。如果您對這個新操作系統(tǒng)感興趣,可以查看其維基百科頁面 以獲取更多信息。
Flutter 是用C、C++ 和 Dart 編寫的。該框架相對年輕,受到社區(qū)的喜愛并迅速升級。
我們的團隊做了一些研究,發(fā)現(xiàn)它很漂亮,我們決定在未來的項目中使用 Flutter。這篇文章是以一個Android初級開發(fā)者的角度寫的,在我們的作品中使用了Flutter之后?,F(xiàn)在讓我們深入挖掘。
Flutter 框架概述;語言:飛鏢
就像我說的,谷歌將 Dart 用于這個新框架。鏢?聽起來很奇怪,看起來這不會是一種友好的編程語言,對吧?但是請相信我并嘗試一下。
那么為什么 Google 使用 Dart?Dart 是一種最初由Google開發(fā)的通用編程語言。Dart 是一門 OOP 語言,它天生就是要取代 Javascript 的,但你知道,生活改變了,現(xiàn)在 Google 將它用于 Flutter。
Dart 非常支持使用Future、async、await 和 Stream 進行異步編程。它支持您以類似于 Rx (ReactiveX) 編程的方式處理所有任務(wù)。
谷歌表示,Dart 可以穩(wěn)定地呈現(xiàn)每秒 120 幀,因為 Dart 會將您的代碼編譯到 ARM C/C++ 庫中,該庫將與移動應(yīng)用程序的本機組件兼容。這就是 Flutter 在您的設(shè)備上運行速度驚人的原因。
Dart 也有 自己的垃圾回收 和虛擬機。哇,現(xiàn)在你可以看到 Dart 和 Java 一樣偉大,但它是一種現(xiàn)代語法,太棒了。
學(xué)習(xí) Dart 并不意味著您只能通過 Flutter 創(chuàng)建移動應(yīng)用程序。但是您可以使用AngularDart創(chuàng)建您的網(wǎng)絡(luò)應(yīng)用程序,甚至可以在您的后端使用 Dart。所以有一天,我們將能夠在所有三個平臺上進行開發(fā),但只使用一種語言:Dart。
編譯器:AOT 和 JIT
Flutter (Dart) 同時使用AOT (Ahead Of Time)編譯器和 JIT (Just In Time) 編譯器
在 Debug 模式下:Flutter 將使用 JIT 編譯器,F(xiàn)lutter 將在運行時編譯您的代碼,幫助 Flutter 高效地將您的調(diào)試器、分析器附加到您的應(yīng)用程序。在這種模式下,您將不得不交換您的 APK 或 IPA 大小,以及這些必要實用程序的性能。
在 Release 模式下:Flutter 將使用 AOT 編譯器,F(xiàn)lutter 將在運行前編譯您的代碼。因此您的應(yīng)用程序?qū)⑦_到其最大性能。
高級概述
Flutter 的主要組件包括:
● 顫振引擎
● 基金會圖書館
● 小部件和特定于設(shè)計的小部件
Flutter 的引擎主要用 C++ 編寫,使用 Google 的 Skia 圖形庫提供低級渲染支持。此外,它還與特定于平臺的 SDK 交互,例如 Android 和 iOS 提供的 SDK。
Foundation 庫使用 Dart 編寫,提供了用于構(gòu)建使用 Flutter 的應(yīng)用程序的基本類和函數(shù),例如與引擎通信的 API。
Flutter 中的 UI 設(shè)計涉及組裝和/或創(chuàng)建各種小部件。Flutter 中的小部件代表了對部分用戶界面的不可變描述;所有圖形,包括文本、形狀和動畫都是使用小部件創(chuàng)建的。
Flutter 還包含兩組符合兩個著名 OS 特定設(shè)計的 widget,分別是實現(xiàn) Google 針對 Android 設(shè)計語言的 Material Design widget 和針對 Apple iOS 設(shè)計的 Cupertino widget。
平臺渠道
Flutter 提供了一個 Platform 通道,可以幫助我們與特定的 OS 組件進行通信,例如 Camera,Service,......
如上圖所示。Flutter,其實就是Android app中的Activity,iOS app中的App Delegate。這意味著您可以與您的原生組件進行通信,或者您可以使 Flutter 應(yīng)用程序成為您的原生應(yīng)用程序的一部分。
Flutter vs React Native vs Xamarin:它們是如何工作的?
它們是如何工作的?
現(xiàn)在讓我們看看 Flutter 和其他框架是如何工作的!
本國的
在本機應(yīng)用程序中,OEM SDK 的應(yīng)用程序是用各自的語言(Java、Swift 等)編寫的。
網(wǎng)絡(luò)視圖
在第一代跨平臺框架中,我們的 Javascript 代碼將創(chuàng)建一個Web 應(yīng)用程序,然后我們將其包裝到移動應(yīng)用程序 Webview 中,這是一個糟糕的解決方案。
反應(yīng)本機
在 React Native 方法中,Javascript 代碼將通過Javascript Bridge 編譯為 OEM SDK。這仍然是 React Native 框架的一個弱點,對其應(yīng)用程序的性能影響很大。
撲
好吧,以 Flutter 的方式,F(xiàn)lutter 將完成所有的工作,字面意思。Flutter 使用原生 ARM 二進制文件。它是提前編譯的。這意味著它很快。真的很快。接下來它會告訴整個框架 UI 系統(tǒng):“休息一下,我正在按我的方式進行?!比缓笏鼤褂米约旱男〔考尸F(xiàn)您的所有 UI,從而為您提供不可思議的功能。
比較
撲 | 反應(yīng)本機 | 賽馬林 | |
語言 | 鏢 | Javascript | C# |
到期 | 年輕 (v1.0.0) | 3年+ | 7 歲以上 |
生命周期管理 | 仍然缺少一些應(yīng)用程序狀態(tài) | 全力支持 | 全力支持 |
文檔 | 豐富而輕松 | 混亂不明 | 缺乏好的文件 |
工裝 | IntelliJ idea、Android Studio、... | 原子,... | 視覺工作室 |
APK 大小 | ~5.6MB | ~8MB | ~14MB |
價錢 | 自由的 | 自由的 | 往年繳納 |
插件 | 來自社區(qū)的大力支持,但仍然缺少一些。 | 一個洛特 | 訪問受限 |
語言
這三個平臺都有自己的代表語言,React Native 使用 Javascript,Xamarin 使用 C#——一直以來的頂級編程語言。而 Flutter 使用 Dart。
到期
與 React Native 和 Xamarin 相比,F(xiàn)lutter 還很年輕。作為一個新生的框架,但 Flutter 的發(fā)展速度比以往任何時候都快。雖然 Flutter 仍處于測試版,但它在 Github 上已經(jīng)有 50,5k 星。與此同時,React Native 需要花費 3 年時間才能獲得 73,0k star,而 Xamarin 僅獲得 2,6k star。
生命周期管理
這三個框架都有自己的生命周期管理,但 Flutter 只支持 widget 的幾種狀態(tài),而不像 React Native 和 Xamarin 那樣支持應(yīng)用程序的生命周期。
文檔
谷歌以其編寫文檔的技巧而聞名。因此,借助其豐富且易于理解的文檔,學(xué)習(xí) Flutter 會更加容易。但另一方面,React Native 和 Xamarin 開發(fā)人員分享說,他們對該框架的初次體驗并不像他們預(yù)期的那樣好。對于新開發(fā)人員來說,React Native 和 Xamarin 文檔不清楚且混亂。
工裝
作為 Google 的產(chǎn)品,F(xiàn)lutter 得到了其所有者的所有支持。您可以在 Android Studio 甚至 IntelliJ idea IDE 中編寫 Dart 代碼。雖然 React Native 可以使用很多 IDE,例如 Atom,...但是您只能在 Visual Studio 中編寫 Xamarin。
APK 大小
我在這些平臺上創(chuàng)建了一個簡單的 Hello world 來找出最優(yōu)化的框架。在 Flutter 中,您的 APK 將只有 5.6 MB,而 React Native 為 8 MB,Xamarin 為 14 MB。
價錢
Flutter 和 React Native 都是開源框架。同時,微軟只發(fā)布了他們的源代碼。
插件
Flutter 仍處于測試版,因此可能缺少第三方插件。而 React Native 和 Xamarin 已經(jīng)足夠成熟,可以幫助您進行移動應(yīng)用程序開發(fā)。但我可以保證 Flutter 已經(jīng)準(zhǔn)備好投入生產(chǎn)。試一試!
陳列柜
你可以看到谷歌和 Facebook 為他們的產(chǎn)品使用他們自己的框架。但是盡管是一個新的框架,F(xiàn)lutter 已經(jīng)因為它的美麗和幻想而贏得了其他大公司(阿里巴巴,AppTree,..)的信任。
我們?yōu)槭裁匆褂?Flutter?
優(yōu)點
Flutter 是由 Google 開發(fā)的跨平臺框架,是為Google Fuchsia OS 創(chuàng)建應(yīng)用程序的主要方法。
Flutter 可以毫無疑問地以出色的性能構(gòu)建復(fù)雜的 UI ,與其他跨平臺框架不同,它可以每秒渲染您的應(yīng)用程序高達 120 幀。
Google 以其豐富且易于理解的文檔而聞名,
Flutter 還提供了Hot Reload,這是一個幫助移動開發(fā)人員節(jié)省大量時間的工具。想象一下,不是每次在代碼中進行簡單更改時都進行 Gradle 構(gòu)建,現(xiàn)在您只需在 Windows 操作系統(tǒng)上按 Ctrl + S 或在 MacOS 上按 Command + S,炸彈,然后您的更改已應(yīng)用到您的應(yīng)用程序,而無需再花費 5 分鐘編譯器。
最后,F(xiàn)lutter 使用 Dart,而不是 Javascript。作為一名 Android 開發(fā)人員,我使用過靜態(tài)類型語言,例如 Java、Kotlin,甚至是 C#。但是 Javascript 對我來說是一場噩夢,它使用動態(tài)類型,并且以某種方式學(xué)習(xí)它與其他編程語言有很多不同的經(jīng)歷——這太瘋狂了。Flutter 使用的是 Dart,一種類似于 Java、Kotlin 等的語言,讓我的體驗變得“更流暢”和“更快”。
缺點
盡管 Flutter 每秒可以運行高達 120 幀,但它在低端設(shè)備上的性能實際上并不好,尤其是在我 4 歲的華碩 Zenfone 上。
Flutter 已經(jīng)發(fā)布了 v1.0.0 版本,但我認為它還沒有真正為復(fù)雜的應(yīng)用程序做好準(zhǔn)備。它仍然存在一些錯誤,在 Flutter 的 Github 存儲庫上有大約 4k1 的問題,但谷歌開發(fā)人員每天都在努力修復(fù)這些問題。
最后,F(xiàn)lutter 的 APK 和 IPA 大小比 Native 大,因為 Flutter 必須將所有框架壓縮到您的應(yīng)用程序中,這與 React Native 或 Xamarin 的做法相同。
項目回顧
了解 Flutter 的潛力后,我們的團隊決定使用它。雖然這些產(chǎn)品很簡單,但使用 Flutter 是省時的解決方案,我們比客戶預(yù)期更快地交付了這些產(chǎn)品,我們的客戶對應(yīng)用程序的功能和性能感到滿意。
結(jié)論
Flutter 是一個很棒的框架,可能會改變我們發(fā)展中國家的游戲規(guī)則。如果你想嘗試跨平臺的框架,那就用Flutter吧,我保證你會喜歡的。
所以這就是我在作品中使用Flutter之后的體驗。如果本文有任何問題,請隨時指出,我們將不勝感激。感謝您的閱讀。