為什麼要使用前端框架？ 如果你也曾經使用過jQuery或是純JavaScript開發大型前端應用，應該可以毫無懸念地回答：『加速開發！』或是『維持前端良好的架構！』 如果你沒有經歷過前端框架之出現之前的年代，恭喜你，已經有許多棒棒的框架供你選擇了！ 這篇文章針對2019年三大前端框架做比較分析，看目前、未來的發展趨勢，哪個框架適合你、哪些技術才是值得關注的？快來看看吧！
Angular vs. React vs. Vue 五年後的今天
- 2010年10月 AngularJS 誕生。
- 2013年5月 React.js 第一版對外發佈。
- 2014年2月 Vue.js 問世。
- 2016年9月 Angular 2 正式發表final GA版本。
話說前端框架天下大勢，原先是 Angular 與 React 的世紀爭霸。自從2014年Vue問世以來，前端框架呈現了三雄鼎立的局面。時間來到2019，五年的時光匆匆過去。這三人到底孰優孰劣，該是有個答案了吧？ (引用 Google Trends)
死亡交叉
近年來最紅的框架，還是非React莫屬！ 原本是Angular一家獨大的局面，在2017年中發生了死亡交叉，React迎頭趕上。之後React聲勢繼續一路上漲，到今日聲勢已經是Angular的3倍。後起新秀的Vue也愈來愈熱門，目前已經快要拚上Angular了！
世界版圖
目前世界版圖是React稱霸，但Angular在IT大國印度、南美洲是最熱門的；Vue則是還沒成功統治任何國家。
台灣的情況
以台灣來說，一年內最紅的還是React，Vue次之，Angular居末。比例大約是3:2:1。 Angular 最紅的地方在高雄，佔30%； React 最紅的地方在台北/新北，佔49%/50%； Vue 最紅的地方在台中，佔36%。
工作機會
什麼都是假的，能找到工作才是真的！快來看看截至2019年7月中，三種主流框架在LinkedIn的工作機會數量吧：
- Angular： 118,771
- React： 141,662 (勝)
- Vue： 76,360
結果是React稱霸，Angular緊追在後，後起新秀的Vue職缺則已經是王者的一半數量以上，不容小覷啊！
別忘了，今年的JSDC贊助商攤位一樣有許多重視技術人才的公司強力招募徵才中。如果你已經練就一身好功夫，不如多多去了解一下最新的就業市場和職缺吧！
用槍時機
如果您的公司有新的專案，正苦惱不知該選擇哪套框架，JSDC小編有些小提議，不妨參考一下：
- 如果貴公司是大型企業，追求定型化與穩定長久，並希望技術/套件可以儘量收斂，最好是有一站式的框架可以使用，則可以考慮Angular。
- 如果貴公司強者大大雲集，不斷吸收新知，致力把時下最好用、開發及維護效率最好的架構或套件引進，則可考慮React及其相關state management技術。
- 如果貴公司產品複雜度比較低，或是崇尚light weight，但也有一定技術水平，懂得尋找套件並維持code quality，則可以考慮Vue。
切記，不要為了用框架而用。依照專案的特性來審慎評估才是最專業的攻城獅。有時候Vanilla JavaScript (什麼套件都不用) 反而是最佳解喔！
如果您是新手，不知道該選擇哪套框架來學習，這邊也提供一些小建議。因為Angular 與 React學習曲線都非常陡，且開發使用的語言不是純JS，而是『改良後的JavaScript』(Angular使用TypeScript，React使用JSX)，如果您對JS還不熟悉，建議使用標準JS來學習Vue，比較可以穩穩扎根，也可以體驗到時下流行的框架帶來的好處。
PS. 如果您還是初學者，還不知該如何開始你的JS旅程，初學者 JS 懶人包 這邊可以為您指引修煉之路喔！
前端框架總結
總結來說，最紅的框架是React無庸置疑。但React不一定適合您或您的公司。如果您希望工欲善其事，先學會一個框架，Vue會是您比較好的選擇；如果貴公司在意框架的成熟度/功能完整度，則建議採用Angular。
| 熱門度/工作機會 | 入門容易度 | 成熟度/功能完整度 | |
|---|---|---|---|
| Angular | 勝 | ||
| React | 勝 | ||
| Vue | 勝 |
趨勢與學習重點
不管是哪個框架，想要達到的目標都不出以下幾點重點：
- 將複雜的前端開發簡化、元件化、封裝
- 資料綁定 (data binding)、變化偵測 (change detection)
- 解決非同步問題
將複雜的前端開發元件化、封裝，是把大型AP的開發簡化的不二法門。因為JS在ES5之前原生語法的限制，讓前端開發沒辦法像後端有物件導向、強型別等等特性。於是新的前端框架採用了ES6、TypeScript、JSX來達成，並使用webpack等工具來管理程式碼的相依性，並進行transpile (轉成ES5) 讓各種瀏覽器得以支援。如果您想要成為高手，可以多了解框架背後的想法與包裝機制喔！
資料綁定 (data binding)、變化偵測 (change detection) 是框架的一大賣點，也與前端效能息息相關。了解Angular如何用zone.js做change detection，還有React的各種one-way data flow的機制，可以對你的前端功力有大大的提升喔！
對於解決非同步造成的callback hell問題，reactive programming 與 Observable (RxJS) 是大量被使用的方式。另外ES7的async/await也是很值得學習的重點。
如果您對幾個框架都已經熟悉，不妨也關注幾個比較新的技術或框架的發展吧：
JSDC 新技術體驗工作坊
JavaScript 的發展與演進越來越快速，新技術也一直推陳出新。對於新技術的掌握與瞭解，許多新手仍止步於觀望階段。因此，我們預計在今年九月底舉辦一個實體工作坊 -「JavaScript 技術的入門與導入」，內容主要會聚焦在幾個框架的快速入門、相關生態系的選擇、與其發展的脈絡跟趨勢。
這個活動定位為「JS 新手」或「沒有使用該技術的 JS 開發者」，希望可以引導什麼時間點、什麼情境下適合出場，以及談談其的應用與發展的趨勢，讓參與者能夠快速入門/轉換新的技術線。如果您對新技術躍躍欲試，想快速了解其中眉角，別忘了到JSDC官網或FB關注九月份工作坊的報名資訊喔！
author: Ellis Chang
