五分鐘搞懂Vue.js的技術定位—用更低的學習成本換取高效的前端實作能力
後端工程師的前端框架研究筆記
本篇不談實作，主要是把我前期技術研究的資料做個綜整，以便於我釐清Vue.js這個前端框架的技術特色，雖然做個簡單的Hello World實作對於理解技術是相當有幫助的，建議可參考官方的介紹頁面，其透過相當簡潔直覺的程式碼，展示了Vue的特色與功能： https://v3.vuejs.org/guide/introduction.html#what-is-vue-js大家被如雨後春筍般冒出的前端框架搞得暈頭轉向時，特別需要一個簡潔有力的技術解釋，以便在決定投入時間學習React、Vue或Angular前，有個基本的考量。若要用一句話推薦大家使用Vue.js，我會說：
Vue.js使得開發人員能用更低的學習成本換取高效的前端實作能力
本篇文章主要就是說明為什麼我會這樣說。
Vue.js是什麼？
Vue.js是一個用來開發使用者介面(UI)的框架。
框架(Framework)：由包含各種功能與開發規則的函數庫組成。我們可以利用其提供的功能加速開發，不必從零開始；而其開發規則通常是經過驗證的良好開發方法，只要follow它，就可以避免很多問題與錯誤。因此框架通常有著加速開發並易於維護的特性。同時也是一個以視圖(view layer)為核心的網頁介面(Web UI)開發方法。
MVC架構：我們通常可以簡單地把系統根據其職責拆分成三個部分—模型(Model)、視圖(View)及控制器(Controller)，以便於維護和分工開發。
1.View單純負責呈現使用者介面。
2.Model負責業務邏輯，包含程式所需的資料與主要的程式邏輯。
3.Controller負責View與Model間的溝通，類似一個仲介的角色，讓View與Model可以各司其職，由Conㄔroller來負責彼此的溝通。一個最簡單理解Vue的方法，是單純使用它的Template語法撰寫一個Hello World範例：
在這個範例中，我們知道，透過Vue可以將資料從視圖(View)中抽離出來，統一管理，同時，維持著HTML的可讀性。而我們可以透過el: ‘<id>’來指定哪個DOM element可以使用Vue的功能。
Vue可以提供什麼？
一個學習成本相當低的前端網頁開發框架：
- 相較於React和Angular這類前端網頁框架，其學習成本更低，且易於整合其他library或既有的project，換言之，其相當彈性且更容易導入既有系統中，讓我們更快速地享用框架帶來的好處。
一個利於開發單頁應用(SPA)的工具與函數庫：
- Vue可網頁拆成數個可重複使用的元件(component)，並組織成一個樹狀結構。
- 這些元件可能是註冊表單、聊天視窗、股票線圖。
- 每個元件都擁有屬於自己的HTML、CSS、Javascript。換言之，我們不必重複撰寫其邏輯與外觀，即可像疊積木般組合出我們想要的畫面。
一個漸進式的開發框架：
- 我們可以漸進式的導入Vue，這有利於既存系統的技術遷移。
- 我們可以局部的導入框架，測試其適切性，在累積足夠的開發經驗後，慢慢擴大應用範圍。
- 利用可插拔(Pluggable)的特性，讓我們可以漸進式導入Vue。這是由於Vue是以View為核心擴展的Library，環繞著這個Library，Vue提供了各種可額外掛載的工具，滿足我們擴展應用程式規模的需求。而我們不必在一開始就學習這麼多工具，可以漸進地學習與使用它們。
為什麼使用Vue.js
起源——技術背景
隨著個人電腦性能愈來愈強，西元2000年起，Javascript已成為一個新的趨勢，讓我們把許多的程式邏輯，從伺服器端(Server Side)移到了客戶端(Client Side)，藉以降低伺服器的負擔。
Client端和Server端是什麼？源自一種稱之為主從式架構(Client-server model)的網路架構，此架構目的之一是希望降低軟體開發的複雜性，因此把程式拆分成伺服器端與客戶端。1.伺服器端——通常包含資料庫、核心商務邏輯（例如AlphaGo圍棋AI的下棋演算法)
2.用戶端—— 通常是圖形使用者介面，可能是Android App、iOS App、網頁等，亦可能是一些智能設備(Apple HomePod, Google Nest, Amazon Echo)
什麼樣的程式邏輯被移到了客戶端了呢？以前我們可能得把會員註冊資料送到Server端，由Server端負責判斷Email格式、生日格式，再把結果回傳給客戶端。但這種與介面高度相關的處理邏輯，其實更適合用Javascript撰寫，藉以降低來回傳遞資料的延遲與伺服器端的負擔，可改善操作體驗。
以網頁或網站為基礎的應用程式：我們通常將伺服器端稱為後端(Back End)、客戶端稱為前端(Front End)或瀏覽器端，畢竟這類型的應用程式，使用者必然是使用瀏覽器在操作系統的。其主要使用HTML、Javascript、CSS作為前端主要的程式語言開發而成的：
1.HTML(HyperText Markup Language)——瀏覽器能將HTML格式的標籤式語言(Markup Language)文本轉換成圖文並茂的網頁，例如將”<button>Send</button>”變成一顆寫著”Send”的按鈕。
2.CSS(Cascading Style Sheets)——負責美化網頁。HTML定義了基本的網頁架構與功能，如果我們希望按鈕呈現藍底白字的圓角按鈕，這就需要靠CSS來定義其外觀了。例如”.button{background-color: blue; color: white; border-radius: 15px;}”
3.Javascript——將靜態網頁轉換成更具互動性的動態網頁。只有HTML和CSS的網頁就像一張張漂亮的廣告，我們希望改善使用者的操作體驗，例如會員註冊頁面，在使用者還沒填寫會員名稱前，無法按下”Send”按鈕(if(memberName ===’’) button.disabled = true)。時至今日，我們在客戶端留下了數以千行計的Javascript程式碼，這些程式碼又連結著不同的HTML與CSS檔。這些程式碼沒有被適當的組織在一起，造成系統維護與更新的困難。這也是我們使用Angular、React或Vue這類前端框架的主因——
改善龐大的前端原始碼難以維護的問題。
瀏覽器的角色與職責：瀏覽器就是負責把的HTML、Javascript、CSS轉換成網頁的應用程式，換言之，就是它把本來枯燥乏味的文本程式碼變成圖文並茂的網頁的。隨著網頁技術的發展，瀏覽器也必須支援更先進的HTML、Javascript、CSS語法，才可以正確顯示網頁，這也是微軟的IE逐漸被淘汰的原因（它對新的語法的支援度太差了）。而使用者有時用不同的瀏覽器開啟網頁會發現跑版等問題，也可能是因為各個瀏覽器對於上述語言的支援程度不盡相同導致的。使用框架來改善開發效率與系統品質
我們通常簡單地將工程師分成前端工程師和後端工程師，前端工程師需要有HTML、Javascript、CSS等程式語言的開發經驗，為了改善開發效率或系統品質，亦會進一步學習一些前端框架，如Vue.js、React、Angular。
學習框架有一定的學習成本，我在學習Vue.js之前，已經使用過jQuery、Bootstrap等各種前端框架或Library開發過一些專案了。對我來說，我更希望專注在商業邏輯的開發上，而不是花費大量的時間學習新框架，所以Vue.js提供了一個這樣的選項。
框架轉移的隱性成本
框架轉移是個相當麻煩的問題，例如我們在既有的系統中已經使用jQuery了，新的框架不斷地推陳出新，到了某個黃金交叉點時，我們看見了很多事實：勞力市場中很難找到使用舊框架的開發人員、新框架的優勢與效率明顯高於舊框架、愈來愈多公司的系統導入新框架。至此，我們可以確定新框架已成熟並得到驗證了，這時，我們會評估導入新框架對既有系統的利弊，也許新框架帶來的好處只適用於某些應用，也許舊系統不需要導入新框架也能維持其競爭力。
若利弊分析後，我們決定淘汰舊框架，就等於是拋棄既有的開發資源、人力、方法與專業知識。這會帶來一定的成本，使用新框架會帶來一定的風險，包括新框架是否能實踐舊系統上所有的功能？對既有的開發流程、資源、團隊合作會有什麼影響？維護的難易度？人才供需？學習成本？
我們在對新技術不熟悉的情況下，很難做出精確的評估，而歸功於Vue.js緩和的學習成本，開發團隊可以降低轉移的風險。
前端框架比較 (Angular vs React vs Vue)
- Angular的功能最多、最複雜，其定位傾向於一個開發平台。
- React強調簡化，專注在建置UI上，其定位傾向於一個Library。其撰寫風格傾向於使用Javascript來實現所有的事情，例如利用JSX描述HTML。目前受歡迎的程度為三者中最高，工作機會最多。
- Vue.js介於Angular和React之間，但更專注在編程上，其定位傾向於一個 Framework。其撰寫風格傾向於拆開HTML、JS、CSS。學習成本較低。目前工作機會最少，但成長速度相當快。
結論
Vue的普及程度不及React與Angular，換言之，就業市場仍以後兩者的需求最大，但Vue成長相當快速，三者並列三大前端框架。已經可以看到許多大型公司採用Vue開發系統，可說是有機會挑戰React霸主地位的後起之秀。
對於尚未使用任何現代前端框架（如React、Angular等等)的團隊而言，使用Vue，除了能提高開發效率並降低維護成本，Vue更汲取了許多Angular的良好設計，並改進了其既有的設計問題，同時相較於React，有著更緩和的學習曲線。
Vue的學習曲線確實提供了一個不錯的定位，可藉由學習其概念，理解Angular與React的設計思維，更有利於學習其他框架。或者，我們以一個經營者的角度來看，我們只要找尋會Javascript的開發者，給他們幾天的時間，他們就能成為Vue.js的開發者，這種學習成本和轉移優勢是React和Angular望塵莫及的，它代表的是開發團隊可以更容易地補齊前端開發人力，對於技術人員而言，我們用很低的成本換取等效React的前端實作能力。
參考：
