前端框架 Angular Dart 小小心得

前言

本文分享我在 Angular Dart 開發一年來的經驗，重點放在一些議題的思考上，並不是講解特定技術的文章。

因為工作關係開發方向由行動轉到Web前端領域，早聞前端的世界變化萬千，進門後也深有同感，既然變化如此快速，就不要提太久遠的技術了。

近一兩年呼聲較高的前端「技術」不外乎 Angular, React, Vue.js 與其他 *.js 眾們(太多啦，原諒我沒一一列出)。

縱使這些「技術」們各自專精的部份不同，但他們幾乎都能幫你實現所有需要的功能，差異在於實現的過程、成本與適切的程度。

本文主旨「前端大混戰之 Angular Dart」，對於 Angular 尚未接觸的讀者，或剛接觸即擁抱 TypeScript 的開發者也許會對 Dart 有些陌生。現在的 Angular 揮別了 Angular JS 時代－－幾乎是一種「學習曲線高」的代名詞，在 2016 年 Angular 2 釋出時，它走出了三條路線，或說以三種語言來實作這個前端框架，分別是 JavaScript, TypeScript 與 Dart。

面對現實吧

你想從這些既有的框架中得到什麼呢？

技術狂熱者，可能會想要把所有新鮮技術都試過，更甚於深入其底層探就一番；也許你有個不錯的想法，想要快速實踐；也許你想要學習新技術，作為日後工作的籌碼；也許你是學生，需要實作個系統好完成報告。

以上，如果你是基於這些理由想要挑選(學習)前端框架(或相關技術)我想都不是大問題，但若你是要打造企業產品，絕對需要多想幾回。通常一項資訊產品背後往往藏有相當可觀的成本，產品很難是拋棄式、用完即丟的。

我的看法是，引入新技術除了確認它是否可以解決我們現有的問題，同時也要避免引入後的「新問題」。例如開發團隊是否容易上手嗎？需要多久時間來建構開發標準與典範，特別是在這個技術很新的情況下！以及團隊的反彈，為什麼要學新技術？特別是這門技術好像不會用很久，似乎隨時會被取代

Dart vs. Type Script

撰文的當下(2017/08)，不諱言 TypeScript 的社群之大，並非 Dart 可及。其作為 JavaScript 的超集，先天上就帶有一些優勢。

Dart 作為一門年輕的語言，呼聲相對小了些。即便最終部署時仍需轉成 JavaScript (大概是Google也很難要求各家瀏覽器嵌入Dart VM 吧)，但它在開發階段確實帶給前端開發者一種新的、丟掉歷史包袱的開發體驗。

Java Script 的歷史包袱以及各種弔詭事蹟就不再贅述，各位也可以從某個動物系列的資訊書商看到各種 JavaScript 的「解疑」書籍，不難想像其骨子裡藏有多少陷阱。

Dart 可以為開發團隊屏蔽一些盲點，這是我希望達到的效益，其本身也有不差的生態系，自己的 Package 管理工具 (Pub)，單論開發 Web App 是足夠，嗯…？這樣還是不能說服你嗎？Google 自己也在用，這邊有一份清單可供參考 Who Uses Dart。

Angular Dart 帶來的優勢

易於學習

也許子標題下得略顯聳動，但實際執行下來 Angular Dart 的學習並不是特別困難。經過幾輪的教育訓練，開發團隊是具備開發與維護的能力，且這些成員事前並不具備相關框架的使用經驗。

Angular 這個框架包山包海，大多數需要實現的功能它都有對應的解決方案，不像一些技術是發散的，要實現單一功能，有太多不同的實作來解決，反而舉棋不定。

Angular Dart 的挑戰

開發工具支援不足

現階段支援度最高的 IDE 是 WebStorm (需付費)，其次是 IntelliJ (有免費版)，有別於 TypeScript 通常基於 VS Code (免費) 進行開發。在 Plug-in 方面，Angular TS (for VS Code) 的資源亦是相當豐富，Angular Dart 目前還是掛蛋的狀態 (有沒有善心人士要投入開發的 😆)。

測試

這邊指的測試是單元測試，基於 test 與 angular_test 兩個 package 進行。執行的成本不低，其需先經過 Dart to JavaScript 的過程，對於硬體的需求較高。即便其標榜轉譯後即會快取，且是漸層式的，但仍然避不掉「第一次」執行時耗時的問題。

我們也嘗試將測試執行在 Chromium 之上，令其跳過轉譯過程，這招的確解決了耗時問題，但有時仍會遇到一些未曾見過的問題，再加上 Dart 2.0 之後不使用 Chromium，這可能不是最佳解。

Dartium is going away in Dart 2.0: In Dart 2.0, you’ll use Chrome or other standard browsers for testing instead of Dartium, thanks to a new development compiler called dartdevc. For information on Dartium’s removal, see Dart 2.0 Updates.

我也有試過 Angular TS 的測試，感覺體驗比 Dart 版的好上許多。

SSR 支援

Angular Dart 目前缺乏 Server Side Render 的支援，不像 Angular TS 可以使用 Angular Universal，在某些情況下不利 SEO。

文件

官方文件不及 TypeScript 齊全，有時候開發得仰賴通靈或是拿出科學家作實驗的精神突破難關。

總要有點希望

至今 Dart 與 Angular Dart 仍是持續成長，文件也有陸續增補，社群雖然不大但還有前進的動力。撰文的當下 (2017/08)，Dart 2.0 與 Angular Dart 4.0 即將釋出，期待這微妙的組合能夠再帶給前端開發者全新的體驗。

將 Angular2 Dart 專案部署至 Firebase

前言

本文介紹如何將Angular2 Dart專案部署至Firebase，這是個十分有趣的應用方式，諸如Angular這種前端框架可幫助我們將特有的系統運作邏輯於前端實現，再配合Firebase提供的Database、Storage與Authentication作為後端，可使我們輕鬆建構並部署Web AP。

本文並無探討Angular2 Dart的設計與建構，僅關注在如何將其部署至Firebase Hosting。

事前準備

實際上在 Firebase Console 中的 Hosting 即有簡明引導教學，但有些細節仍需要注意。

請參考以下步驟進行：

1. 在 Firebase console 中建立 Firebase 專案
2. 安裝 Node.js (以便取得npm)
3. 安裝Firebase CLI (npm install -g firebase-tools) 
4. 登入Google (firebase login)
5. 啟動(初始化) Firebase專案，請見下一小節

Firebase 專案初始化

現有Angular2 Dart專案若要部署至Firebase即需將其初始化為Firebase專案。具體操作為：

1. 切換至專案根目錄。
2. 執行 firebase init 指令。

執行firebase init指令時，會出現互動式的命令列操作，流程如下：

1. Are you ready to proceed? 回答 Y
2. What Firebase CLI features do you want to setup for this folder?
•  Database: Deploy Firebase Realtime Database Rules
•  Hosting: Configure and deploy Firebase Hosting sites 選擇此項
3. What Firebase project do you want to associate as default?
   將會列出您目前在Firebase Console內已建立的專案，也可以在此新建專案。請選擇您要關聯的專案，即您要將專案部署到哪個Firebase專案。
4. What file should be used for Database Rules? 採用預設值 database.rules.json
5. What do you want to use as your public directory?
   預設為public，我們需要調整它，將它指向build目錄，這部份您可以參考下一小節「調整設定檔」，若當下您尚無法確定，也可以事後更改此項。
6. Configure as a single-page app (rewrite all urls to /index.html)? 回答 Y
7.  若一切正常您將看到 Firebase initialization complete!

確認與調整設定檔

當您完成firebase init操作後，在你執行該指令的目錄下將產生兩份重要的設定檔 ── firebase.json與database.urles.json。

讓我們先來看看firebase.json，它的內容大致上是：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

請特別注意 hosting 節點下 public 值，我們必須把它指定到 build 目錄下。

這是因為 Angular2 Dart 應用需要將 Dart 轉譯為 Javascript，以及將零零總總的 package 資源彙整，這些操作是透過 pub build 來完成，預設所有產出的資源檔案皆置於 build 目錄中。

而database.urles.json記載了Firebase Database的存取權限設定，這份設定會覆蓋您手動透過Firebase Console中進行的Database設定，不可不慎！

執行部署

使用指令 firebase deploy 即可進行部署。
此指令會將定義於firebase.json → hosting → public 所指目錄中的所有資源上載至firebase。