Hummingbird 對比 Angular Dart：該選擇哪個？

Hummingbird在12月4日的flutter發佈會上宣佈。這個項目將容許咱們將咱們的fulluer應用程序編譯成完整的漸進式Web應用程序。那麼...... Angular Dart還值得嗎？

我將嘗試分享到目前爲止我收集到的信息，但願個人發現也能幫助其餘人。

他們都準備好了嗎？

第一個問題是咱們是否能夠實際使用這二者。

Angular Dart

當前版本的AngularDart是5.2.0。它是穩定的（已經有幾年了），用於谷歌的高影響力項目，以及世界各地的項目。

Hummingbird

有些人會聲稱Hummingbird目前處於其阿爾法狀態。可是，咱們所擁有的只是技術概述。更多的聲音是比團隊完全討論他們正在考慮的技術方向的任何其餘建議。 （連接）

他們實際上在作什麼

很高興你問！咱們將嘗試瞭解單頁應用程序是什麼，漸進式Web應用程序是什麼，並查看Angular和Hummingbird的預期輸出。這將有助於咱們理解他們打算解決的問題。

SPAs vs PWAs

單頁應用程序

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. — Wikipedia

包含在URL中的字符＃，而不是致使頁面從新加載，將致使頁面內的一些交互。 SPA使用此瀏覽器特性。

例如，在維基百科中，若是咱們點擊索引中的標題，而不是頁面從新加載，瀏覽器會將咱們帶到頁面的該部分。

• 轉到www.wikiwand.com/en/Single-p…
• 將Ajax更改成Websockets並按Enter鍵。
• 頁面會從新加載嗎？不會。它會簡單地改變配置

SPA正在將其提高到新的水平。整個應用程序及其全部屏幕使用基於#Based的網址從單個頁面開始工做，以實現其全部功能。

PWAs

Progressive Web Apps are user experiences that have the reach of the web, and are reliable, fast and engaging — developers.google.com

PWAs是以某種方式優化的網站（能夠是常規網站，也能夠是單頁應用）

• 離線和不可靠的互聯網（Lie-Fi）可靠地工做
• 快速，優化以得到高感知性能
• 參與 - 感受就像一個本機應用程序，並無少其餘功能。

AngularDart作了什麼？

AngularDart或Angular一般是編寫SPAs的框架。它爲開發人員提供了一種使用如下功能編寫SPA的方法：

• 雙向數據綁定
• 路由
• 模板
• 指令

以及更多。實際的UI仍然使用HTML + CSS編寫。 Angular僅提供使Web開發人員可以開發其SPA的全部其餘功能。要點是：

• Angular Dart不是UI框架
• Angular Dart應用程序能夠是也能夠不是PWAs

那什麼是Angular Web Components呢？

它們是由angular_components包提供的一組材料設計組件，它們充當用於構建應用程序的模板。

• Internet Explorer不支持它們
• 它們仍然是用HTML + CSS + Dart編寫的

Hummingbird會作什麼？

到目前爲止，這只是猜想。它的目標是將任何flutter應用程序轉換爲PWA。它多是也可能不是SPA（最有可能）。然而，它會嘗試作全部那些原來flutter作的事情。

有了它，咱們可使用Flutter UI框架，使用全部flutter的SDK功能，如狀態管理小部件和全部......只需點擊一下，就能夠生成咱們已有的Android和iOS應用程序的PWA！

在此過程當中存在許多挑戰，但若是Google意識到這一點，那將是SDK的全部功能。

All-Dart應用程序的狀態

讓咱們嘗試理解Flutter + AngularDart和Flutter + Hummingbird組合之間的區別，若是咱們要爲web和native編寫一套全套的應用程序。

Flutter + Angular Dart

要編寫這樣的應用程序，咱們須要：

• 編寫一個包含全部業務邏輯的核心包，確保它沒有angular或flutter的依賴關係，全部這些依賴關係都是從外部注入的

• 編寫Angular PWA訂閱核心以獲取全部功能

  *使用HTML + CSS或組合angular組件的UI

  *路由，狀態管理與Angular的服務方式

• 編寫一個Flutter應用程序，爲全部功能訂閱相同的核心

  *具備fltter UI框架的UI

  *路由，狀態管理等，用顫抖的方式作事

• 從flutter項目編譯到iOS和Android

• 從Angular項目編譯到Web

代碼共享是否會減小工做量？

雖然代碼共享確定會減小「代碼量」，但根據個人經驗，它並無真正減小須要完成的工做量。這須要我在整個過程當中更加周到。

那有什麼好處呢？

• 代碼更清晰，架構更好
• 我被迫，如今更容易在各個平臺上維護功能奇偶校驗。

將來：Flutter + Hummingbird

要編寫這樣的應用程序，咱們須要：

• 寫一個flutter應用程序

  *帶有flutter框架的UI

  *路由，狀態管理等flutter方式

• 在三個不一樣平臺上編譯

• 完成

##工做少了嗎？ 固然不是～好吧！

結論

這就是咱們對flutter，angular，hummingbird和彼此共享代碼的瞭解細分。

若是你如今正在開發什麼東西......

使用flutter + angular dart。它不像hummingbird想得那麼容易，但仍然是最好的方式。

到目前爲止，hummingbird是一個遙遠的夢想。一個項目，咱們必定但願有一天可以取得成果，並對得起咱們全部的努力，但將來仍舊是遙遠的。