Vue 筆記1–也來寫 Vue.js 好了

觀注 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 該用哪一個? - TechOrangeReact,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 已經慢了別人一大截,但好處是網路上的學習資源十分豐富,攀附在前輩身上吸經驗值覺得很讚。列舉我這段時間參考的一些資料:

初步心得

  • 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 筆記也要來囉~

歡迎推文分享:
Published 12 October 2017 07:16 AM 由 Jeffrey
Filed under:
Views: 3,792



意見

# Vincent said on 16 October, 2017 05:59 AM

我也是在你的網站先學了 knockoutjs. 然後又去學了vue.js

覺得 Vue 比 knockout 還易入門.

希望早日看到你的筆記學習

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2017>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication