為什麼我們需要 Vue、React、Angular 這樣的前端框架？以及如何選擇？

Back in the days
「框架或工具都是因應某個需要被解決的問題而生。」在不同的時間點，就會有不同的問題需要被解決。而前端最關鍵的任務，就是將資料與狀態視覺化，除了要維護原本從後端取得的商業邏輯的狀態，還要維護 UI 元件顯示邏輯的狀態。

過去在使用原生 JavaScript 做 DOM 操作時，都必須先用一長串程式來抓取元素（如 document.getElementsByClassName(‘.el’)），才能讓網頁元素與使用者進行互動，於是 jQuery 誕生了，我們開始只需要使用 `$(‘el’)` 就能輕鬆做到一樣的事，還順便解決了惱人的跨瀏覽器問題。

接下來面臨的就是狀態管理的問題。從早期的義大利麵式程式碼 (Spaghetti Code) 把所有的東西通通往 HTML 頁面塞，到後來有人提倡關注點分離， 將 HTML、CSS 及 JavaScript 拆開來，這是表現層級上的關注點分離。而當專案的架構越來越大，人們開始把關注點從表現層移到了架構層面，也就是所謂的 MVC。

MVC 設計模式將程式分成了資料層、表現層以及邏輯層，藉由先把資料和畫面顯示這兩者分開，再藉由使用者操作事件將兩者連接起來。比起將不同功能的程式放在一起，這樣的開發方式讓架構變得清楚直觀，但實際上仍不夠好維護。

所以與以往 JavaScript 框架以 DOM 做為基礎操作不同的是，Vue、Angular 使用 MVVM 的概念延伸出資料和邏輯的雙向綁定，這些框架使得開發更著重於資料狀態上，進一步地省去許多抓取元素的繁瑣和狀態更新的時間。

回顧前端技術的發展，不難發現新技術和新工具總是圍繞著問題而生。當現有的工具不夠好用，就會有人開發一套新的解法。過時的技術或工具並不是現在不能用，只是隨著時間過去，隨著技術進步，我們有更好的做法，於是舊技術慢慢退場。不過，學習為了解決不方便而創造出來的庫或框架，總會幫助我們對相應的觀念更加熟悉，比方說：學習 jQuery 讓我們在操控 DOM 元素上變得更加熟練；學習 D3 讓我們對 SVG 底層更加透徹；而學習 MV 框架則讓我們更熟悉狀態與畫面同步的觀念。

那麼，該如何選擇前端框架呢？
專案有它本身的複雜度，當然工具以及其生態圈也是。如果 jQuery 甚至原生的 JavaScript 就可以解決你的需求，那麼你也許並不需要使用前端框架；而如果你想建置 SPA 網站，或是你的專案資料運算邏輯重、有兩個以上不同的 API 要串接，又或是產品的生命週期長（注重載入先後順序、Template 模組化、其他 UI, API 的相依），你完全可以從 Vue、React、Angular 當中任選一套，因為他們都已足夠成熟。

若你真的很在意選擇，的確有快速篩選的方法：如果你習慣關注點分離（Separation of Concerns），喜歡讓程式保持整潔、平衡，那麼可以選擇使用 HTML 寫法的 Vue；如果你是個 JavaScript 愛好者，專案在未來有擴充的計畫，你可以選擇使用 JS 擴展語法 — JSX（JavaScript XML），並且擁有許多社區插件的 React；如果你注重結構性和功能完整度，並且使用 TypeScript，那麼你可以選擇 Angular。
選哪一個前端框架除了學習成本，沒太大差異，各自在專案上的缺點都可以被克服，所以選擇主要依照團隊喜好。快速選擇框架後，接著從小型、無長期維護需求的活動專案，或是自己的 Side Project 開始實作。你需要的是盡快投入，並把它摸得夠深。

參考資料：
一份全面的 React、Angular 和 Vue 比較指南
Vue 和 React 大比拼，你 pick 誰
Angular、Vue、React 框架選擇是個偽命題
前端工程師養成手冊
談談前端框架

感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。