【我們為什麼挑選這篇文章】在學習基礎的程式語言語法後，選擇「框架」就成了戰爭修羅場，每個框架各有各的支持者、擁護者。初入 JavaScript 的你，要選擇最新的搖滾巨星 Vue.js 還是選擇 Facebook 推出的 React.js，還是要選最古老的 AngularJs 呢？
不管如何，選擇框架與最終的專案目標有關，仍端看發開者與使用者間的需求而定，不過認識一下其他的 JS 框架，了解趨勢仍十分重要！（責任編輯：陳君毅）
一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％ 的使用率，而且「不太可能降低」。
JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。
不管你怎麼看，JavaScript 很重要。
這也指明了潛在 Web 開發人員的方向：如果你深入前端，你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。
讓我們假設你知道 JavaScript 基礎知識，你可能對現代 JavaScript 框架們的學習更感興趣。這些框架通常帶有預置的函數和一些構建應用的方法。
JavaScript Frameworks
有些人可能會有局限性的思考，認為世界上大多數開發者更喜歡使用框架（不要將它們與庫混淆），因為它們使工作更容易，更快速，在通常情況下更可靠。
我們的開發團隊準備了他們每天使用的框架清單。雖然周圍肯定有 更多的 JavaScript 框架 ，這些是我們最關注的。
接下來，你會看到我們所愛的技術及其各自特點的簡單概述。
大街上的酷小孩－Vue.js
Vue.js JavaScript framework
這個就像一個還在讀高中的超級巨星。它不是一個成熟的技術，所以我們真的無法說，五年後，Vue 會發生什麼。然而目前，它可能是每個會議議程中最引人注目的話題。
如果你決定和 JS 極客喝兩杯，他會談論 Vue。如果 Vue 是個流行歌星，那麼現在它就是最紅的。
它由尤雨溪在 2014 年 2 月建立。在 2016 年，Vue.js 擁有驚人的 89％的開發人員滿意度評估 ，目前是 GitHub 中 star 最多的項目之一 。
虛的說差不多了，來點實際的。什麼是 Vue.js？
首先，它是本文中討論的所有 JavaScript 框架中最快最小的。它的語法和原理所需要的學習成本不是很高。此外，它還具有高覆蓋率的文檔。你想要執行的操作絕大部分情況已被記錄在案。此外，如果一個操作沒有文檔記錄，你能在線上找到解決方案的機率很小，因為 Vue 不如 Angular 或 React 更流行。
注意：Vue 的發音和「view」一樣。
隨便挑 5 個 Vue.js 的特性說一下：
- 便於擴展的插件系統。
- 擁有在使用服務端渲染時的庫 (Nuxt.js)。
- 支持範圍樣式。
- 有一個 CLI 工具，允許你通過先進的前端工作流設置，快速構建單頁應用。
- 被加入 Laravel5.4 的新特性中，用來處理前端模板
就像 React 一樣，Vue.js 僅處理視圖層。也就是，它讓開發人員自己實現他們的業務邏輯。它也有被稱為 Flux 架構實現的 Vuex。作為我們的隊友，36Kr 某員工說：
在我看來，Vuex 比 React 的 Redux 使用起來更好，更容易。
此外，Vue.js 在 Chrome 中擁有最好的開發者工具，並且 Weex 也使用 Vue 的語法，它是一個通過 JavaScript 構建原生應用的框架，也是 React Native 的競爭對手。值得注意的是，Weex 並不太完善，特別是對於商業項目。目前，它更多的是一個方案而不是一個真正的技術。
對開發者來說，Vue.js 的優勢在於：
- 易於學習和理解，能快速開發應用
- 與 Laravel 集成，所以具有 Vue 知識的開發人員對使用 Laravel 開發應用的後端團隊有所補充
- 擁有非常方便的 CLI 工具，可以快速啟動
- 有很多額外的模塊，如路由器和狀態管理工具；雖然不如其他框架那麼多
對客戶來說，Vue.js 的優勢在於：
- 降低前端應用成本，乃至全功能 web 應用的成本（在使用 Laravel 和 Vue.js 的組合時）
- 在保證穩定性的同時，是一個快速可靠的解決方案
- 較小的模塊很適用，如日曆，聯繫人表單或小部件
開發者滿意度最高－React.js
React.js JavaScript framework
React 是由 Facebook 的 Jordan Walke 創建的，GitHub 的最流行框架中排名第 5。然而，React.js（以及 React Native）最火爆的時間點是在 2015 年。
據 State of JS 調查顯示 React 的開發者滿意度最高，達到 92％。Vue 跟它在同一個級別。根據調查，React 的開發者較 平均水平 來說，在決定哪個技術配套使用前，會嘗試多種其他技術組合。
隨便挑 5 個 React.js 的特性說一下：
- 框架只負責「View」層，這意味著其它業務邏輯是完全解耦的，並且能以任何方式來實現。
- 與框架相關的 Redux 是一個非常棒的類 Flux 架構的實現。
- 模板方面，框架可以使用 JSX 語法，這個語法在剛上手時可能會有一點點難度。
- 開發者掌握 React.js 的知識後，可以直接用於基於 React Native 的移動客戶端開發。
React 對 VirtualDOM 的使用，以及由此獲得的高性能廣受開發者好評。經常使用框架的開發者也是這與這項技術相關的龐大社群的重要組成部分。React 的快速發展，除了 Facebook 的維護外，也要感謝開源項目以及第三方的模塊。
此外，隨著 React 將會有一個能夠向後兼容的重寫版 React Fiber 的消息放出，React 的「第二春」很快就會到來。
對開發者來說，React 的優勢在於：
- 龐大且活躍的社區
- 並非一個大而全的框架
- JSX 這種新的 JavaScript 語法，也是一個不錯的優點
- 相關的開發工具也很不錯
- 強制使用最新的最佳實踐
對客戶來說，React 的優勢在於：
- 大量的開發者熟悉這個框架
- React Native 使得 Web 應用的邏輯可以復用於移動客戶端
- 有足夠多的使用和測試場景來保證框架本身幾乎沒有 bug 和錯誤
智慧長老－AngularJS
AngularJS JavaScript framework
Google 在 2009 年第一次發布了 AngularJs 框架，鼓勵使用聲明式編程方法去創建用戶界面和連接各種組件，另一方面，指令式的編程用於實現程序的邏輯。
Brat Tech 公司的 Miško Hevery 是這個技術的真正作者，當時，它被創建為在線 JSON 存儲服務背後的軟件。但是業務沒有搞起來，所以公司放棄了這個想法，並將 AngularJs 作為一個開源庫發布。
AngularJS 使用雙向數據綁定的方式，適配和擴展了傳統的 HTML 來呈現動態內容。
所有這些可能聽起來很有意思，事實是 AngularJs 已經有點老了。
實際上。它是我們描述的框架裡最老的了，大 ReactJS 4 歲，Vue.js 5 歲，比 Angular2 年長了 7 歲之多。
儘管如此，他擁有 Github 上最多的貢獻者 (1,562 個)，隨後是 ReactJS，Angular2，Vue.js。
不可否認，AngularJS 有一個陡峭的學習曲線，這個缺點在某種程度上被一個大型社區抵消，保證開發人員可能遇到的大多數問題存在解決方案。
隨便說 AngularJS 的 5 個特性
- 仍然有許多項目使用 AngularJS，所以了解 AngularJS 方便你維護這些項目。
- 為不想使用新的 Angular 或 Ember.js 的團隊提供可行且穩定的解決方案。
- 使用臟值檢查（digest cycle）；與觀察者模式相比孰優孰劣取決於你的需求。
- PlayStation 3 上的 YouTube 應用是用 AngularJS 開發的。
- 以 HTML 為中心。
AngularJS 是 SPA 中最常用的 JavaScript 框架之一，也是企業級應用的一個很好的選擇。但是它確實很老了，大多時候是被老舊的應用採用。
AngularJs 對開發者來說的「優」點：
- 在 2017 年，如果你還沒有使用它，你完全可以忽略他了。
- 如果您需要更多功能的話，請使用新的 Angular 或 Ember。
AngularJS 對用戶來說的「優」點：
- 主要維護尚未準備好或無法獲得足夠重寫的舊應用。
- 由於框架複雜性，創建更複雜應用的成本很高。
Angular2（或簡稱 Angular）
儘管在不挖掘源代碼的前提下，很難完全了解 Angular2 的概念，它是一個非常強大的框架內置了相當多的功能。
以 AngularJS 為基礎，使用 Typescript 重寫。與以前的版本相比，它沒有 scope 或 controllers 的概念。相反，它使用組件層次結構化作為其主要架構概念。支持動態加載，改進了依賴注入，並提供更為簡單的路由和異步模板編譯機制。
隨便說 Angular2 的 5 個特性
- 由 TypeScript 編寫，允許開發人員使用 TypeScript，Dart 或純粹的 ECMAScript。
- 組件的模式利用了 TS 類和裝飾器。
- 陡峭的學習曲線
- 開發過程很快。
- 高級的的測試特性。
基本上，Angular 可以擺脫 AngularJS 中存在的不必要的複雜性。然而，許多人認為，即使用 CLI，單個開發人員的配置和啟動過程仍然可能太長。
我們的開發團隊也不太喜歡提供文檔，特別是對於 JS 和 Dart。另一方面，他們又喜歡將技術分解成很多模塊。
Angular 對開發者的優點：
- 你喜歡 TypeScript 就開心了
- 強制規定編寫代碼的方式，使得它成為與多個開發人員合作的好選擇
- 使用同一個庫開發移動和桌面應用
- 對於具有很多代碼的單頁應用是個不錯的解決方案
Angular 對客戶來說的優點：
- 使用該框架構建企業應用可能會降低成本
- 大量開發人員已經知道如何使用框架
有最好的 Javascript 框架嗎？
想要一個簡單的答案？
沒有。這跟公司目標、需求、以及最終的功能都有關係。舉例來說，Angular2 更像是一個百寶箱，特別適合大型項目。它非常複雜，並且需要花很多時間來全面的學習和掌握（但比 AngularJS 要簡單一些）。但使用以 JavaScript 為 核心的 React，開發者就能快速高效得拼湊出一些有用的東西。
每個框架都在以不同的方式嘗試適合用於不同場景的 Web 應用開發 ，包括 MVP、創業公司和商業場景。
——
迎戰電商市場，最適合你的決勝經營戰技是什麼， 立即測驗 找出你的經營盲點！
（本文經合作夥伴 36kr 授權轉載，並同意 TechOrange 編寫導讀與修訂標題，原文標題為 〈如何在主流 JavaScript 框架中做選擇？橫向對比 Vue, React, AngularJS, and Angular2〉。）
延伸閱讀
2017 年程式語言最佳有潛力獎：Go、Dart 與 Perl，你認識幾種呢？
2016 最紅程式語言：JavaScript，但最賺錢的不是它
如果想靠寫程式吃飯，第一個學的絕對要是 JavaScript！
C 語言已死？想取代資安漏洞寬如海溝的 C，你該用這個語言
你對製作這些科技趨勢內容有興趣嗎？ 想從 TO 讀者變成 TO 製作者嗎？ 對內容策展有無比興趣的你，快加入我們的編輯團隊吧！ TechOrange 社群編輯擴大徵才中 >> 詳細內容 意者請提供履歷自傳以及文字作品，寄至 jobs@fusionmedium.com 來信主旨請註明：【應徵】TechOrange 職缺名稱：您的大名