2017年8月25日 星期五

前端框架 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,這可能不是最佳解。


我也有試過 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 即將釋出,期待這微妙的組合能夠再帶給前端開發者全新的體驗。