官方承諾：K60至尊版將會(huì)首批升級(jí)MIUI 15
全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會(huì)搭載天璣9200+處理器和獨(dú)顯芯片X7的同時(shí)，Redmi給出了官方承諾，K60至尊重大更新首批升級(jí)，會(huì)首批推送MIUI 15。也就是說雖然
在開始尋找最佳的跨平臺(tái)移動(dòng)開發(fā)框架的過程中，F(xiàn)lutter、React Native 和 Ionic 是讓我印象深刻的。這三款產(chǎn)品很有吸引力，因?yàn)樗鼈兂兄Z在為多個(gè)平臺(tái)使用單一代碼庫的同時(shí)提供良好的性能。
為了開始冒險(xiǎn)進(jìn)入這個(gè)新世界，我創(chuàng)建了三個(gè)版本的移動(dòng)應(yīng)用程序，這些應(yīng)用程序使用 API 并在屏幕上顯示基本數(shù)據(jù)。這個(gè)想法很簡單：構(gòu)建一個(gè)應(yīng)用程序，顯示一個(gè)隨機(jī)國家的詳細(xì)信息。我以前在 Python 中做過類似的項(xiàng)目。
迷你液晶顯示屏每天顯示隨機(jī)國家/地區(qū)的詳細(xì)信息
為了公平地比較，該應(yīng)用程序的所有三個(gè)版本都必須滿足以下要求：
讓我們先深入了解一下我使用 Flutter 構(gòu)建移動(dòng)應(yīng)用程序的經(jīng)驗(yàn)。
正如 Flutter 網(wǎng)站上所描述的那樣，“Flutter 是 Google 的一個(gè)開源框架，用于從單個(gè)代碼庫構(gòu)建漂亮的、原生編譯的多平臺(tái)應(yīng)用程序。它創(chuàng)建于 2017 年，基于面向?qū)ο蟮木幊陶Z言 Dart。
在開始開發(fā)之前，我花了一個(gè)小時(shí)閱讀 Flutter 的文檔和觀看教程。Flutter 背后的團(tuán)隊(duì)充滿熱情和吸引力，這激發(fā)了我深入研究的動(dòng)力。
開發(fā)環(huán)境和 Android 模擬器的設(shè)置進(jìn)行得很順利。這是意料之中的，因?yàn)槲沂褂?Google IDE （Android Studio） 來使用 Google 框架 （Flutter） 為 Google 操作系統(tǒng) （Android） 創(chuàng)建應(yīng)用程序。
是時(shí)候創(chuàng)建應(yīng)用程序了。計(jì)時(shí)器打開。在 4 小時(shí)內(nèi)，我制作了這個(gè)：
Flutter 應(yīng)用程序
在開發(fā)過程中沒有遇到任何特別復(fù)雜的問題。在開發(fā)過程中，Android Studio 的建議幫了大忙。還有熱重載？真是省時(shí)省力！只需按下 Ctrl+S 鍵，您就能看到您的更改立即反映在設(shè)備上，而無需刷新頁面！
盡管在設(shè)置和工具方面有很好的體驗(yàn)，但當(dāng)我深入開發(fā)時(shí)，我還是遇到了一個(gè)突出的設(shè)計(jì)模式：小部件的普遍使用。Flutter 的“一切皆小部件”概念變得顯而易見，這導(dǎo)致了大量的嵌套和元素樣式的混合。甚至連填充都是小部件！與我習(xí)慣的基于組件的結(jié)構(gòu)相比，這種方法感覺不太直觀。
看看這個(gè)例子就明白我的意思了：
class CountryDetails extends StatelessWidget { final Country country; const CountryDetails(this.country, {super.key}); @override Widget build(BuildContext context) { var formatter = NumberFormat.decimalPattern('en-US'); return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.only(bottom: 10), child: Image.network(country.flag, height: 200), ), CountryProperty('Name: ', country.name), CountryProperty('Region: ', country.region), if (country.capitals.isNotEmpty) CountryProperty('Capital: ', country.capitals[0]), CountryProperty('Population: ', formatter.format(country.population)), ], ); }}在屏幕實(shí)際內(nèi)容的正上方創(chuàng)建填充，這是一個(gè)小的 UI 細(xì)節(jié)，這讓我有輕微的不適感。我只能想象它在具有眾多 UI 要求的場景中會(huì)是什么樣子。當(dāng)這些不同的關(guān)注點(diǎn)在同一視野內(nèi)爭奪注意力時(shí)，保持專注將具有挑戰(zhàn)性。
React Native 由 Meta 于 2015 年創(chuàng)建，是一個(gè)開源 JavaScript 框架，可讓您構(gòu)建原生 Android 和 iOS 應(yīng)用程序。React Native 已在業(yè)界獲得廣泛采用，是 Facebook 和 Instagram 等知名應(yīng)用程序的基礎(chǔ)。
我以前使用過 React 庫。VS Code 已經(jīng)安裝好了。我只需要運(yùn)行 React Native。
哦，那可真是太痛苦了。當(dāng)我開始使用 React Native 時(shí)，與 Flutter 的流暢設(shè)置相比，這是一場完全不同的游戲。一開始，我就面臨著兩種管理工作效率的選擇：Expo Go 和 React Native CLI。我沒有意識(shí)到這兩個(gè)選項(xiàng)是相互排斥的，因此在不了解它們之間區(qū)別的情況下，我試圖按照網(wǎng)上的解決方案進(jìn)行操作。這導(dǎo)致依賴關(guān)系一團(tuán)糟，難以管理。如果您想為 React Native 設(shè)置環(huán)境，請確保只遵循官方文檔。這樣做，你可能會(huì)避免遇到同樣的挫折。
盡管圖像顯示方面的問題尚未解決，應(yīng)用程序還是在 2.5 小時(shí)內(nèi)完成了。為了確保旗幟顯示出來，我強(qiáng)制調(diào)整了寬度和高度，但有時(shí)會(huì)導(dǎo)致旗幟變形。我根本無法在安卓設(shè)備或模擬器上顯示旗幟。它只能在瀏覽器中運(yùn)行。
React Native 應(yīng)用程序
React Native 在代碼方面提供了一種簡潔易讀的方法。這種簡潔性來自于 React 基于組件的架構(gòu)，它促進(jìn)了模塊化和代碼可重用性。每個(gè)組件都是一個(gè) JavaScript 函數(shù)。通過使用 JSX（JavaScript XML），React 允許我們編寫類似 HTML 的代碼來描述組件的 UI。在我的示例中，它看起來像這樣：
const CountryDetails = (props) => { return ( <View> <Image source={{ uri: props.flag }} style={{ marginBottom: 10, width: 300, height: 200 }} /> <CountryProperty property="Name" value={props.name} /> <CountryProperty property="Region" value={props.region} /> {props.capital && <CountryProperty property="Capital" value={props.capital} />} <CountryProperty property="Population" value={props.population.toLocaleString("en-US")} /> </View> )}Ionic 成立于 2012 年，是“一個(gè)開源的移動(dòng) UI 工具包，用于從 React、Vue 或 Angular 中的單個(gè)代碼庫構(gòu)建現(xiàn)代、高質(zhì)量的跨平臺(tái)移動(dòng)應(yīng)用程序。Ionic 將大量投資投入到一組豐富的 UI 組件和有吸引力的用戶界面上，以適應(yīng)目標(biāo)平臺(tái)。
Ionic Angular 是我選擇的應(yīng)用程序。Angular 是 Google 于 2016 年構(gòu)建的成熟框架，用于他們的許多 Web 應(yīng)用程序。我花了 30 分鐘觀看 Ionic 視頻和閱讀指南。熟悉的 Angular 開發(fā)生態(tài)系統(tǒng)讓我有信心在短暫的學(xué)習(xí)期后啟動(dòng)應(yīng)用程序。
我按照網(wǎng)站上的說明，從空白模板啟動(dòng)應(yīng)用程序。設(shè)置完成后，結(jié)果是一個(gè)生成了多個(gè) JSON 和 TypeScript 配置文件的項(xiàng)目，這讓我很不舒服。“為什么我需要這么多文件”？我想。但至少有了一個(gè)中間有文本的應(yīng)用程序，可以在瀏覽器中快速預(yù)覽。
開發(fā)過程非常簡單，僅用了 2 個(gè)小時(shí)即可實(shí)現(xiàn)與 Flutter 和 React Native 版本相同的功能。但是如果我說我沒有從 React Native 版本（即 Country 類的構(gòu)造函數(shù)）復(fù)制一些代碼，那我就是在撒謊。
Ionic app
Ionic 提供了一組 UI 組件，使 UI 實(shí)現(xiàn)變得更加容易。我使用了 Spinner 和Floating Action Button。該文檔提供了簡單的示例，以便無縫集成。
與 React 相反，Angular 不使用 JSX。相反，它使用模板語法。模板是 HTML 的一部分，但添加了更多功能，例如插值、事件綁定和指令。
<ion-content [fullscreen]="true"> <div id="container"> <div *ngIf="currentCountry; else loading"> <img [src]="currentCountry.flag" style="margin-bottom: 10px; width: 300px;"/> <app-country-property property="Name" [value]="currentCountry.name"></app-country-property> <app-country-property property="Region" [value]="currentCountry.region"></app-country-property> <app-country-property *ngIf="currentCountry.capital" property="Capital" [value]="currentCountry.capital"></app-country-property> <app-country-property property="Population" [value]="currentCountry.population.toLocaleString('en-US')"></app-country-property> </div> <ng-template #loading> <ion-spinner></ion-spinner> </ng-template> </div></ion-content>通過將 UI 分離為特定的 .html 文件，我的 TypeScript 文件變得只關(guān)注邏輯，這可能會(huì)減輕在同一屏幕上工作的開發(fā)人員之間的協(xié)作沖突。
在我看來，基于 JavaScript 的框架在代碼可讀性和簡單性方面勝出。與 Flutter 相比，我用更少的代碼行實(shí)現(xiàn)了相同的功能。我不太喜歡 Flutter 的嵌套代碼風(fēng)格。它看起來令人困惑且難以閱讀，邊距、填充、大小、元素和邏輯都混淆了，這與 React Native 和 Ionic 相反。您是喜歡 JSX 還是 Angular 模板來實(shí)現(xiàn)視圖，最終取決于個(gè)人喜好。我傾向于 Angular，因?yàn)樗奈募Y(jié)構(gòu)與將在 DOM 中呈現(xiàn)的內(nèi)容非常相似。
雖然我以前知道一些 React 和 Angular（但既不是 React Native 也不是 Ionic），這可能影響了開發(fā)時(shí)間差，但我確實(shí)覺得它們比 Flutter 更容易學(xué)習(xí)。
評(píng)估框架采用情況的一種有趣方法是檢查使用它們構(gòu)建的已安裝應(yīng)用程序的數(shù)量。截至 2024 年 4 月，在美國，前 500 名安裝應(yīng)用程序（來自 Play 商店）中有 12.57% 是使用 React Native 構(gòu)建的，相比之下，F(xiàn)lutter 占 5.24% 的份額，Ionic 僅占 0.52%。
這三個(gè)框架提供了大量的文檔。他們也都在交互式示例上進(jìn)行了一定程度的投資，但我覺得 React Native 在設(shè)置和工具方面有時(shí)更令人困惑。我親眼目睹了我對 Expo Cli 和 React Native Cli 的迷失方向。這并不完全是 React Native 的錯(cuò)：有許多非官方的指南，有許多不同的方法來啟動(dòng)應(yīng)用程序。React Native 在構(gòu)建項(xiàng)目時(shí)也提供了很大的自由度，盡管它帶來了很多解決方案，但在某些領(lǐng)域提出了缺失的文檔和不明確的最佳實(shí)踐。
Flutter 的采用率正在增長，超過了 React Native 和 Ionic 的公共 GitHub 存儲(chǔ)庫的數(shù)量。盡管如此，當(dāng)我們比較語言而不是框架時(shí)，比 Dart 大 16 歲的 JavaScript 仍然是采用率的明顯贏家。JavaScript 是為前端開發(fā)而生的，但現(xiàn)在也被廣泛用于服務(wù)器端。整個(gè) JavaScript 生態(tài)系統(tǒng)充滿了所有類型的資源，包括用于眾多用例的第三方庫。如果你學(xué)習(xí) Flutter，你只是在學(xué)習(xí) Flutter。如果你使用 React Native 或 Ionic 進(jìn)行構(gòu)建，您將學(xué)習(xí)如何使用標(biāo)準(zhǔn)技術(shù)構(gòu)建 Web 組件。
為了在瀏覽器中進(jìn)行測試，所有三個(gè)框架都將在進(jìn)行更改時(shí)重新加載應(yīng)用程序。在我的手動(dòng)測試中，他們?nèi)齻€(gè)在代碼更改后執(zhí)行了非常快的重新加載，在 1-2 秒后顯示另一個(gè)隨機(jī)國家/地區(qū)，其中包括對國家 API 的 1 次調(diào)用。
在 Android 設(shè)備或模擬器中進(jìn)行測試時(shí)，F(xiàn)lutter 憑借 Hot Reload 取得了勝利。更改文件足以更新視圖，而無需刷新整個(gè)頁面。它只是重建小部件樹。然而，在 React Native 和 Ionic 中，文件中的任何更改都會(huì)觸發(fā)整個(gè)頁面的刷新（包括額外的 API 調(diào)用），這使得比較 UI 更改之前和之后的難度略有增加。盡管在某些情況下，React Native 應(yīng)該能夠通過快速刷新來保留狀態(tài)，但在我的測試中，它沒有，顯示出與 Ionic 的 Live Reload 相同的結(jié)果。
這些框架使用不同的調(diào)試方法;總而言之，我們可以通過瀏覽器遠(yuǎn)程調(diào)試 Android 應(yīng)用程序。在我的測試中，F(xiàn)lutter 是打開應(yīng)用程序（已安裝）進(jìn)行無線調(diào)試的最快方法。
Flutter DevTools 具有簡單直觀的界面，其中包含許多可以在著名的 Chrome 開發(fā)者工具中找到的功能。我發(fā)現(xiàn)有趣的是，有一個(gè)選項(xiàng)可以放慢動(dòng)畫速度來幫助微調(diào)它們。它還包括應(yīng)用內(nèi) UI 調(diào)試功能，這將有助于更好地了解實(shí)現(xiàn)的設(shè)計(jì)規(guī)范，例如邊距和大小。
Flutter 開發(fā)工具
Flutter 應(yīng)用內(nèi)調(diào)試
說到Chrome開發(fā)者工具，調(diào)試Ionic應(yīng)用程序類似于調(diào)試標(biāo)準(zhǔn)網(wǎng)站，這是一個(gè)很大的優(yōu)點(diǎn)。熟悉此界面簡化了調(diào)試過程。從性能到網(wǎng)絡(luò)，以及快速嘗試 CSS 更改的可能性，Chrome 開發(fā)者工具都能滿足我們的需求。Ionic 是這三個(gè)框架中唯一不提供任何應(yīng)用內(nèi)調(diào)試功能的框架。
圖片
盡管 React Native 具有應(yīng)用內(nèi)調(diào)試功能，例如性能疊加、網(wǎng)絡(luò)信息和元素檢查器，但在遠(yuǎn)程調(diào)試方面，它仍然落后于 Flutter 和 Ionic。React Native 提供 React DevTools，它專注于應(yīng)用程序的組件層次結(jié)構(gòu)。也可以使用 Hermes 引擎，該引擎將允許（僅）使用 Chrome 開發(fā)者工具的一些功能進(jìn)行調(diào)試。
React DevTools
雖然我還沒有探索任何減少發(fā)布.apk大小的方法，但 Ionic 產(chǎn)生了 3.2MB 的文件大小，而 Flutter 產(chǎn)生了 18.1MB 和 React Native 25.2MB。安裝后，它們分別占用了 9.61MB、34.66MB 和 55.47MB。
構(gòu)建具有一致和現(xiàn)代外觀的跨平臺(tái)移動(dòng)應(yīng)用程序?qū)τ谔峁o縫的用戶體驗(yàn)至關(guān)重要。Flutter 的預(yù)構(gòu)建 UI 組件和 Ionic 的自適應(yīng)樣式功能都確保了 Android 上的 Material Design 和 iOS 上的 Cupertino 的一致性。換句話說，F(xiàn)lutter 和 Ionic 使 UI 組件的外觀適應(yīng)目標(biāo)平臺(tái)。
使用 React Native，必須依賴第三方庫才能開發(fā)出符合 Material Design 的用戶界面。對于許多開發(fā)人員來說，維護(hù)額外的依賴關(guān)系很容易成為禁忌。當(dāng)我不得不在 React Native 版本的浮動(dòng)操作按鈕中實(shí)現(xiàn)更多樣式時(shí)，我感受到了其中的差異，最終獲得了與 Flutter 和 Ionic 相似的用戶界面。
從理論上講，當(dāng)它編譯為原生代碼時(shí)，F(xiàn)lutter 應(yīng)該比 React Native 運(yùn)行得更快，因?yàn)楹笳咭蕾囉?JavaScript 橋接。這是一種用于允許 JavaScript 代碼訪問移動(dòng)設(shè)備的本機(jī)功能的技術(shù)。這樣的過程可能會(huì)給應(yīng)用程序的性能帶來開銷。Ionic 是三者中速度較慢的，因?yàn)樗\(yùn)行在 Web 視圖（用戶不可見的瀏覽器）上。然而，Ionic 指出，它比 React Native 慢的神話只是......一個(gè)神話。
鑒于其幾乎不存在的性能要求，我無法用我的應(yīng)用程序測試這種比較。
我有興趣更深入地研究 Flutter 的代碼風(fēng)格，盡管我還沒有完全接受它。關(guān)于最佳實(shí)踐，有很多東西需要學(xué)習(xí)，而熱重載功能似乎是調(diào)試的游戲規(guī)則改變者。盡管如此，將現(xiàn)有的 TypeScript、HTML 和 CSS 知識(shí)轉(zhuǎn)移到移動(dòng)應(yīng)用程序的開發(fā)中也非常有吸引力。對 JavaScript 生態(tài)系統(tǒng)的熟悉和建立的信心使我傾向于暫時(shí)將 Flutter 放在一邊。
從開發(fā)到調(diào)試，包括與現(xiàn)有 Web 庫的集成，構(gòu)建 Ionic 應(yīng)用程序感覺就像構(gòu)建傳統(tǒng)的 Web 應(yīng)用程序一樣。這讓我相信，提高我在 Ionic 開發(fā)方面的技能不僅會(huì)提高我作為移動(dòng)開發(fā)人員的熟練程度，還會(huì)提高我作為 Web 開發(fā)人員的熟練程度。與 React Native 相比，Ionic 在實(shí)現(xiàn)遵循 Android 和 iOS 設(shè)計(jì)原則的接口方面也取得了勝利。
重要的是要承認(rèn)，雖然獲得了有價(jià)值的見解，但許多方面，如代碼組織、關(guān)注點(diǎn)分離和組件可重用性，可能只會(huì)隨著項(xiàng)目的發(fā)展而變得明顯。
正如移動(dòng)開發(fā)行業(yè)所顯示的那樣，無論使用哪種框架，都可以開發(fā)出性能良好并能使用本地功能的優(yōu)秀應(yīng)用程序。因此，不要低估選擇一個(gè)自己喜歡的框架的重要性。與其花幾個(gè)小時(shí)在網(wǎng)上尋找答案，為什么不使用示例應(yīng)用程序進(jìn)行探索呢？
希望你能從我的故事和我作為跨平臺(tái)移動(dòng)開發(fā)學(xué)徒的角度，度過一段愉快的時(shí)光。
原文：https://medium.com/@fmmagalhaes/i-built-the-same-app-with-flutter-react-native-and-ionic-33ff8b358562
本文鏈接：http://www.www897cc.com/showinfo-26-88326-0.html我用 Flutter、React Native 和 Ionic 構(gòu)建了相同的應(yīng)用程序
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 從零開始搭建 Kafka集群
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)