觀注 Vue.js 已有很長一段時間，上個月我慣用的前端元件庫-Kendo UI 正式支援 Vue 及 React，感覺時機成熟，是可以投入心力研究的時候了。
說來尷尬，手邊已有用 knockout.js 開發的線上系統，開發專案的主力則走 Angular.js 1。短短幾年就在公司裡搞出兩套框架(我還為 KO 跟 NG 都寫了 CRUD 基礎模版及元件庫)，讓同事無所適從天怒人怨(我也是萬般不願意呀，這就是他X的前端咩)，貿然宣布要玩第三套新框架，有預感會被拖到牆角餵磚頭。
不過衡量情勢，維持現狀不是選項，遲早還是要做打算。Knockout.js 已熄火這點無庸置疑，Angular 版本已更新到 NG4，不升級相關資源將逐漸凋零，長遠來看還是得跟上主流。但 NG2 形式大改，NG1 專案升級形同砍掉重練，佔不到什麼便宜，不如抛棄歷史包袱，重新評估擇選擇好了。
當前檯面公認的主流前端框架不脫 React、Angular 與 Vue.js 三家。網頁開發者各有自己的設計哲學與偏好，只要系統穩定效能不差又好維護，能抓耗子就是好貓(其實還要不挑嘴不亂叫不隨地大小便不抓壞沙發，想當好貓不簡單呀)，網站設計方式與開發哲學，是決定開發者與前端框架是否看對眼的關鍵。只是有情人未必終成眷屬，因父母之命(老闆指定)、媒妁之言(顧問推薦)、家族身世(前人專案選定)、政治聯姻(資源豐富可少奮鬥30年)… 貌合神離的怨偶也不在少數。
以我慣用的網站設計模式，核心邏輯主要靠 C# 後端處理，即便前端改用 TypeScript 比 JavaScript 更適合寫中型規模以上的程式，但相同功能用 C# 寫開發效率及順手度還是完勝 TypeScript，更何況部分作業(如資料庫存取、檔案讀寫、加解密運算)在性質上屬伺服器端限定。因此我的網站設計，TypeScript/JavaScript 就專注於負責即時性的網頁 UI 呈現及 AJAX 資料交換，核心邏輯主要靠 C# 實作。
在這樣的設計概念下，Angular 內含完整 MVC、UI Routing，對我來說「太多」，功能強大與擴充性的代價是複雜度高，未蒙其利前都屬無效益的學習成本。我心中理想的前端框架只需要專注打理好 UI 層 View 這段就夠了，反正 Model 跟 Controller 交給 ASP.NET MVC 做得又快又好。(雖然改用 Angular 多時，但 Knockout 只專注 View 的定位更接近我的期望，我跟 Knockout 是情深緣淺呀)
回到下一代框架的選擇，來看看 React、Angular 4 與 Vue.js。這三者能在競爭激烈的前端框架界脫穎而出，其效能與功能肯定不在話下，選擇考量聚焦在誰比較符合我的應用情境與個人偏好就好。(網路上有不少比較文章可參考: JavaScript 框架大比拼：Vue、React、AngularJS 與 Angular2 該用哪一個？ - TechOrange、React，Vue，Angular简介 - 简书)
React 可以寫行動版 App 這點很吸引人，但與傳統先做出 HTML 再加掛標籤加上 MVVM 的設計思維截然不同，學習曲線不會太平滑。另外重要一點是我的開發生涯從 ASP 義大利麵時代開始，歷經 WebForm、MVC，到最後連 CSS、JS、HTML 都獨立成檔，已經習慣個別維護不互干擾的優點，看到 React 強推 JSX 又把 HTML、CSS、JavaScript 摻在一起做瀨尿牛丸，在我眼中就像美麗的番邦公主，有種國情不同的隔閡感(個人偏好，勿戰)；蘭妃 Angular 4 聲勢浩大，靠過去肯定能吃香喝辣，但有前面提到太過龐大複雜的缺點；見到 Vue.js 只專注於 View 層的理念，加上講求輕巧簡單易學，讓我想起了純元皇后(Knockout)，去吧，嬛嬛，就決定是你了。(甄嬛傳混搭寶可夢來著)
現在才開始學習 Vue.js 已經慢了別人一大截，但好處是網路上的學習資源十分豐富，攀附在前輩身上吸經驗值覺得很讚。列舉我這段時間參考的一些資料:
- Vuedinner #1 第一次用 Vue.js 就愛上 by Kuro - YouTube
很全面性的介紹，如果已具備 Angular 基礎但對 Vue.js 一無所知，這部 2 小時介紹影片是極佳的入門。 - Vue.js 官方教學 (簡體中文)
- Vue.js API 官方文件 (簡體中文)
- Kuro 部落格文章
- Vue.js 影音教學手冊 - 六角學院 – Quip
- Vue.js 相關資源懶人包 (英文)
初步心得
- Vue.js 語法與 Angular 相似度很高，以我過去累積的 NG 經驗，在看完 Kuro 的兩小時簡介影片後就有自己可以出新手村的錯覺。(依過去學習新技術的經驗，八成是錯覺，魔鬼都在他X的細節裡呀!)
- Kuro 介紹影片裡一些令人驚喜的語法: {{{ rawHtml }}}、.once、
.sync(註: 2.3版又加回來了)、limitBy,filterBy,orderBy Filter，2.0 版都拿掉了，不知道該哭該笑，難過的是少了簡便寫法可用，慶幸的是還好不是先狂用一番等升級再連夜改掉。 - 以 Angular 1 熟手的觀點，Vue 在語法與概念上高度相似，範圍縮小到只觀注 DOM 呈現與互動，少了 NG 裡彈性但複雜的 設計模式(例如: Dependency Injection)，很容易上手。基本上花一天把官方教學(中文版)從「介紹」到「過濾器」幾十個章節讀完就差不多夠了，範圍小加上官方教學很完整(而且有中文)，跟 Knockout 一樣好上手，在我心中 Vue 更適合成為 NG1 的接班人。
- 工作上採用 KO 與 NG 專案運作正常，短期內不會積極改版翻寫，手上的 NG 共用元件庫與 CRUD 模版已很順手成熟，正在開發的專案也會繼續使用。對於 Vue 我只打算先在 Coding4Fun 閒暇專案試槍，等累積足夠經驗再評估帶到工作上。
- 我打算跟大部分 Vue 或前端開發者走不一樣的冷僻小徑: 用 Visual Studio 2017(不是 Visual Studio Code) + ASP.NET MVC + TypeScript 寫 Vue.js，盡量避免扯到 npm、webpack 讓開發背景需求單純化，期望若有朝一日要在公司推廣，阻力可以小一點。
初步爬文，這麼搞的人真的不多，使用 VSC、npm 寫 Vue 有很多方便的套件模版相助，教學文件充足，要用 VS2017寫又不想碰 npm，有許多環節得靠自己打通。管他的，就先試試吧! (握拳) 但也說不定深入了解後很快就投降了 XD
好一片蒼翠茂盛的森林，但我好像選了左邊這條路。 XD
之前為 KO 跟 NG 寫過三十多篇筆記，依循慣例，Vue 筆記也要來囉~