天天看點

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

作者:進階前端進階

大家好,很高興又見面了,我是"進階前端‬進階‬",由我帶着大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發!

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

進階前端‬進階

今天給大家帶來的主題是“為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?”,同時對 Dart 和 JavaScript 做了一個簡單的對比。話不多說,直接開始進入正題。

1.JavaScript 和 Dart 介紹

什麼是 JavaScript

JavaScript 是一個具有一流功能的輕量級、解釋型和即時編譯型程式設計語言。 盡管它是作為 Web 網頁腳本語言而廣為人知,但許多非浏覽器環境,如 Node.js、Deno、Bun 等也在使用它。甚至在傳統伺服器領域也有它的身影,例如:njs v0.7.12 擴充了 nginx 功能的 JavaScript/ECMAscript 語言的子集等。

技術上看,JavaScript 是一種基于原型的多範式動态語言,支援面向對象、指令式和聲明式風格。

為何 Flutter 青睐 Dart 而不是宇宙最強的 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 标準。

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

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)
為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

Dart在不同平台上的實作架構

3.JavaScript 與 Dart 比較

JavaScript 和 Dart 都是跨平台移動應用程式開發的絕佳選擇,兩者在 React Native 和 Flutter 大戰中已經被無數開發者證明。 與 JavaScript 相比,Dart 是相當新的開發語言,但它具有一些非常優秀的特性和來自 Google 的強大支援。

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

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 的兩倍。

為何 Flutter 青睐 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 上的熱度指數,從圖上可以明顯看出後者相對前者有明顯的差異。

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

在看看 Google Trend 的資料,紅色代表 JavaScript、藍色代表 Dart,得出的結論與 Stack Overflow 上的熱度指數高度一緻。

為何 Flutter 青睐 Dart 而不是宇宙最強的 JavaScript?

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/

繼續閱讀