大家好,很高興又見面了,我是"進階前端進階",由我帶着大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發!
進階前端進階
今天給大家帶來的主題是“為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?”,同時對 Dart 和 JavaScript 做了一個簡單的對比。話不多說,直接開始進入正題。
1.JavaScript 和 Dart 介紹
什麼是 JavaScript
JavaScript 是一個具有一流功能的輕量級、解釋型和即時編譯型程式設計語言。 盡管它是作為 Web 網頁腳本語言而廣為人知,但許多非浏覽器環境,如 Node.js、Deno、Bun 等也在使用它。甚至在傳統伺服器領域也有它的身影,例如:njs v0.7.12 擴充了 nginx 功能的 JavaScript/ECMAscript 語言的子集等。
技術上看,JavaScript 是一種基于原型的多範式動态語言,支援面向對象、指令式和聲明式風格。
不管你喜不喜歡,JavaScript 目前已經無處不在,與日常開發息息相關。 但是,JavaScript 在其早期并沒有引起這麼大的關注,自從它與 node.js 一起進入伺服器端後,它已經成長為在多個領域占據主導地位的巨頭,無論是 Web 端還是手機端、IoT,甚至 AI。
随着各種 Web 前端架構,如: React.js、Angular 、Vue、Solidjs 等的興起,JavaScript 不可否認已經處于其高光時刻,格外耀眼。伴随着 Facebook React Native 的推出,JavaScript 在混合移動應用程式(PHA)開發場景也是風光無限。同時,近年來随着衆多主流浏覽器對 WebAssembly 的支援加速,與 JavaScript 雙劍合璧更是在衆多語言中獨占鳌頭,實力不容小觑。
什麼是 Dart
介紹了 JavaScript,讓我們一起回到本文的主角,即 Dart 這門程式設計語言本身,順便看看為何 Flutter 選擇了 Dart 而不是宇宙最強的 JavaScript。
Dart 是一種用戶端優化的程式設計語言,适用于多個平台上的快速應用程式。 Dart 由 Google 開發,用于建構移動、桌面、後端和 Web 應用程式。同時,Dart 是一種面向對象、使用者定義和垃圾回收的語言,使用 C 風格的文法,可以選擇性地轉換編譯成 JavaScript。目前 Dart (和 Flutter 一樣)是完全開源的( BSD-3-Clause license),也符合 ECMA 标準。
Dart 在 2011 年初作為 JavaScript 的直接替代品出現,也爆發出了巨大的潛力。 盡管 Dart 是由谷歌開發的,但在當時并沒法引起巨大的轟動,甚至可以說是籍籍無名。 直到 Flutter 的出現,Dart 很快成為混合移動開發應用程式的首選,知名度也是聲名鵲起。
随着 2023 年 Dart 3 的釋出,這個号稱迄今為止最大的 Dart 版本,包含了三個主要改進:
- 完成了 100% 健全的空安全
- 添加了記錄、模式和類修飾符的新語言特性
- 通過 Wasm 編譯擴大了對網絡原生代碼的平台支援
至此,Dart 可以說是完成了一次全新的蛻變。目前 Dart 項目在 Github 上開源,有超過 9.1k 的 star、1.4k 的 fork、代碼貢獻者 500+,是一個值得長期關注的跨端開源項目。
2. Dart 的特性
根據 Dart 官方描述,Dart 目前适用于在任何平台上快速建構應用程式的用戶端優化語言,具有以下特點:
- 針對 UI 的大量優化:使用專門圍繞使用者界面建立需求的程式設計語言進行開發
- 高效疊代:疊代地進行更改,使用熱加載在正在運作的應用程式中立即檢視執行結果
- 快速:為移動、桌面和後端編譯為 ARM 和 x64 機器代碼,或者編譯為 JavaScript 用于 Web。
Dart 靈活的編譯器技術允許開發者以不同的方式運作 Dart 代碼,一切隻取決于目标平台和目标。
- Dart Native:對于針對移動、桌面、伺服器等裝置的程式,Dart Native 包括一個帶有 JIT(Just-in-Time)編譯的 Dart VM 和一個用于生成機器碼的 AOT(Ahead-of-Time)編譯器
- Dart Web:對于面向 Web 程式的場景,Dart Web 包括開發時編譯器 (dartdevc) 和生産時編譯器 (dart2js)
Dart在不同平台上的實作架構
3.JavaScript 與 Dart 比較
JavaScript 和 Dart 都是跨平台移動應用程式開發的絕佳選擇,兩者在 React Native 和 Flutter 大戰中已經被無數開發者證明。 與 JavaScript 相比,Dart 是相當新的開發語言,但它具有一些非常優秀的特性和來自 Google 的強大支援。
Dart vs. JS
接下來由我帶着大家從幾個次元對 JavaScript 與 Dart 進行下簡單比較,讓大家更好的了解這兩門語言。
簡單易學
JavaScript 的學習曲線非常平緩,在網上有很多學習資源和常見問題的解決方案可供使用。 而且市場對 JavaScript 的需求量很大,比如:大量的前端架構、就業崗位,目前 JavaScript 俨然已經成為最受歡迎的現代程式設計語言。而且有标準委員會的加持(如w3c、T39等等),發展也是非常迅速,各種 JS 提案、浏覽器特性紛至沓來。
Dart 雖然也有很好的開發文檔,但對大多數新手來說, Dart 語言的特性非常讓人困惑。 但是,具有 OOPS 背景的開發人員可以輕松掌握文法,因為 Dart 文法類似于 Java。 然而,由于缺乏社群支援和資源,開發者相比之下很難找到解決 Dart 中問題的方法。
包數量
JavaScript 擁有大量的三方包,并且自 NPM 系統資料庫啟動以來一直在快速增長。 目前,NPM 注冊中心擁有超過 130 萬個開源包并且還在不斷的增長過程中,NPM 目前是世界上最大的三方包注冊中心。
相比之下,Dart 雖然也越來越受歡迎,開源軟體包數量也在穩步上升,但是要與 JavaScript 社群持平還需要很長的時間。
執行速度
JavaScript 是一種解釋型語言,很容易達到性能瓶頸,這就是為什麼很多非常耗時的操作、計算要通過更加底層的其他語言加持的原因(比如通過 wasm)。而相比之下, Dart 的速度總體上幾乎是 JavaScript 的兩倍。
圖檔來自:https://www.thebluediamondgallery.com/handwriting/p/performance.html
Dart 支援同時使用 AOT 和 JIT 進行編譯,有助于以多種方式建構應用程式。使用 JIT 編譯可以加快開發速度,并且可以在釋出過程中使用 AOT 編譯以實作更好的優化。這項技術目前已用于 Flutter 應用程式開發。下面是 JIT 和 AOT 的簡單說明:
- 即時 (JIT、Just-in-Time) 編譯器:JIT 編譯器在程式執行期間運作,即時編譯。JIT 編譯提供更快的開發周期,但會導緻執行速度變慢或不穩定。 同時,JIT 的啟動時間較慢,因為當程式開始運作時,JIT 編譯器必須先進行分析和編譯,然後才能執行代碼。
- (AOT、Ahead-of-Time) 編譯器:一般來說,隻有靜态語言才适合 AOT 編譯成本地機器代碼,因為機器語言通常需要知道資料類型,而動态語言類型無法提前确定。 是以,動态語言通常被解釋或 JIT 編譯。AOT 編譯的缺點就是拖慢開發周期(從更改程式到能夠執行程式以檢視更改結果之間的時間)。但 AOT 編譯使程式可以可預測地執行,無需在運作時暫停分析和編譯,進而執行更快。
類型檢查
JavaScript 是一種動态類型語言,使開發人員能夠執行任何代碼,錯誤隻能在運作時發現。當然,這個問題開發者可以通過使用 Typescript 、jsDoc、Flow 這樣的類型系統來有效避免。
Dart 支援與 TypeScript 使用的類型系統等效的類型系統。 由于 Dart 是一種編譯型語言,是以可以有效排除編譯時錯誤,防止将錯誤本身帶到線上環境進而給使用者帶來不好體驗。從這點來看,Dart 比 JavaScript 更類型安全。
用法
JavaScript 在 Web 開發領域占據主導地位,并在 React Native 和 Ionic 移動裝置以及 Electron、Tauri、Gluon 等的桌面裝置中也越來越受歡迎。 同時 ,Node.js 等作為後端解決方案也得到很多開發者的青睐,具有高可擴充性和快速 I/O 支援。
相比之下,Dart 因其移動開發架構 Flutter 而廣受歡迎。 在 Web 和桌面平台上,自從用于 Web 的 Hummingbird 和用于開發桌面應用程式的 Flutter for Desktop 的出現以來,它的受歡迎程度也都在逐漸增長。
- Hummingbird:允許 Flutter 應用程式開發人員建立 Web 應用程式,進而使 Flutter 更進一步。Hummingbird 的終極目标是讓應用程式建立者有能力編寫應用程式一次,并在任何地方運作
- Flutter for Desktop: 最初是為了開發 Flutter 的 Windows,macOS 和 Linux 嵌入而建立的項目,目前已經成為 Flutter 的一部分。
代碼
下面示例展示了 Dart、JavaScript 兩種語言的 hello world 示例,從示例代碼來看,Dart 的入口會從 main 函數開始,這一點與 C 非常類似,而 JavaScript 更加松散沒有諸多限制。
// JavaScript
// 代碼執行從代碼的頂部開始
console.log('Hello world!');
// Dart
main() {
// 代碼執行從主函數開始
print('Hello world!');
}
熱度
下圖展示了 Dart、JavaScript 兩種語言在 Stack Overflow 上的熱度指數,從圖上可以明顯看出後者相對前者有明顯的差異。
在看看 Google Trend 的資料,紅色代表 JavaScript、藍色代表 Dart,得出的結論與 Stack Overflow 上的熱度指數高度一緻。
4.本文總結
本文主要和大家探讨為何 Flutter 會選擇 Dart 而不是 JavaScript,相信通過本文的閱讀,大家對 Dart 會有一個初步的了解。
因為篇幅問題,文章并沒有過多展開,如果有興趣,可以在我的首頁繼續閱讀,同時文末的參考資料提供了大量優秀文檔以供學習。最後,歡迎大家點贊、評論、轉發、收藏!
參考資料
https://mobilecoderz.com/blog/javascript-vs-dart-a-quick-comparison-to-choose-dominating-one/
https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
https://github.com/dart-lang/sdk
https://www.inapps.net/dart-vs-javascript-detailed-comparison/
https://emeritus.org/blog/coding-dart-programming-language/