Vue 筆記1–也來寫 Vue.js 好了
7 | 28,532 |
觀注 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 筆記也要來囉~
Comments
# by Vincent
我也是在你的網站先學了 knockoutjs. 然後又去學了vue.js 覺得 Vue 比 knockout 還易入門. 希望早日看到你的筆記學習
# by Milian Liao
暗黑大大, 我也是要從NG1跳槽,走向ASP.NET MVC + Vue的組合,但是webpack好像避無可避了,因為 Single File Componet就是.vue的檔案這個一定要經過WebPack或Browserify幫忙編譯,當然也可以不用.vue,但覺得那樣檔案跟程式碼裡面會整齊很多。頭痛~"~ https://vuejs.org/v2/guide/single-file-components.html
# by Jeffrey
to Milian Liao, (握手)歡迎加入NG1轉Vue的行列。造化弄人(這成語好像不該用在這兒 XD),我近期的工作重心都在後端,前端荒廢已久,筆記不知何年何月才會繼續... Orz 後來再接觸了一些資訊,我的看法與你相近,目前所有方便的高效率工具都以webpack為基礎,撇開它自己搞一套的成本驚人,開發時借助主流解決方案才是王道,甚至VSCode也該是選項,我也還在學習與評估中。
# by Tenno
你好,我也是學c#的,我也想用vue js來做一個網頁 如果我只是想做一個簡單的購物網站,我需要再學 Vuex跟webpack嗎?我目標是當後端工程師。
# by Reengo
請問,這是什麼意思呢? " TypeScript 比 JavaScript 更適合寫中型規模以上的程式 "?
# by Jeffrey
to Reengo,TypeScript 且有強型別檢查,中型規模以上系統程式複雜度高,一旦需要「找出所有呼叫這個函式的程式碼」或是「想更改個屬性、方法的名稱」,TypeScript 可以用 IDE 一個操作搞定,JavaScript 只能靠搜尋比對字串再肉眼確認修改,相較之下 TypeScript 好維護修改許多。參考: https://blog.darkthread.net/blog/hello-typescript/
# by Terry Lin
你的文筆有幽默喔。讚。