介:常言道，條條大路通羅馬，可是那一條適合我呢? 由于用于構建前端頁面等現代技術的出現，JavaScript 在 Web 開發社區早已是如雷貫耳。通過在網頁上編寫幾個函數并提供執行邏輯，可以很好的支持 HTML (主要是用于頁面 ...

常言道，條條大路通羅馬，可是那一條適合我呢? 由于用于構建前端頁面等現代技術的出現，JavaScript 在 Web 開發社區早已是如雷貫耳。通過在網頁上編寫幾個函數并提供執行邏輯，可以很好的支持 HTML (主要是用于頁面的 表現 或者 布局)。如果沒有 JavaScript，那頁面將沒有任何 交互特性 可言。
現在的框架和庫已經從蠻荒時代崛起了，很多老舊的技術紛紛開始將功能分離成模塊?，F在不再需要在整個核心語言中支持所有特性了，開發者允許所有用戶創建庫和框架來增強核心語言的功能。這樣，語言的靈活性獲得了顯著提高。
如果在已經在使用 JavaScript (以及 JQuery) 來支持 HTML，那么你肯定知道開發和維護一個大型應用需要付出多大的努力以及編寫多么復雜的代碼，而 JavaScript 框架可以幫助你快速的構建交互式 Web 應用 (包含單頁面應用或者多頁面應用)。
當一個新手開發者想要學習 JavaScript 時，他常常會被各種 JavaScript 框架所吸引，也幸虧有為數眾多的社區，任何開發者都可以輕易地通過在線教程或者其他資源來學習。
但是，唉!多數的程序員都很難決定學習和使用哪一個框架。因此在本文中，我將為大家推薦 6 個值得好好學習的 JavaScript 框架。讓我們開始吧。
1. AngularJS

(注：這是我個人最喜歡的框架)
無論你是何時聽說的 JavaScript，很可能你早就聽過 AngularJS，因為這是在 JavaScript 社區中最為廣泛使用的框架了。它發布于 2009 年，由 Google 開發 (這夠有說服力讓你使用了吧) ，它是一個開源項目，這意味著你可以閱讀、編輯和修改其源代碼以便更加符合自身的需求，并且不用向其開發者支付一分錢 (這不是很酷嗎?)。
如果說你覺得通過純粹的 JavaScript 代碼編寫一個復雜的 Web 應用比較困難的話，那么你肯定會興奮的跳起來，因為它將顯著地減輕你的編碼負擔。它符合支持雙向數據綁定的 MVC (模型-視圖-控制Model–view–controller) 設計典范。假如你不熟悉 MVC，你只需要知道它代表著無論何時探測到某些變化，它將自動更新前端 (比如，用戶界面端) 和后端 (代碼或者服務器端) 數據。
MVC 可以大大減少構建復雜應用程序所需的時間和精力，所以你只需要集中精力于一處即可 (DOM 編程接口會自動同步更新視圖和模型)。由于 視圖組件 與 模型組件 是分離的，你可以很容易的創建一個可復用的組件，使得用戶界面的效果非常好看。
如果因為某些原因，你已經使用了 TypeScript (一種與 JavaScript 非常相似的語言)，那么你可以很容易就上手 AngularJS，因為這兩者的語法高度相似。與 TypeScript 相似這一特點在一定程度上提升了 AngularJS 的受歡迎程度。
目前，Angular 2.0 已經發布，并且提升了移動端的性能，這也足以向一個新的開發者證明，該框架的開發活躍度夠高并且定期更新。
AngularJS 有著大量的用戶，包括 (但不限于) Udemy、Forbes、GoDaddy、Ford、NBA 和 Oscars。
對于那些想要一個高效的 MVC 框架，用來開發面面俱到、包含健壯且現代化的基礎架構的單頁應用的用戶來說，我極力的推薦這個框架。這是為無經驗 JavaScript 開發者設計的首選框架。
2. React

與 AngularJS 相似，React 也是一個 MVC (模型-視圖-控制Model–view–controller) 類型的框架，但不同的是，它完全針對于視圖組件 (因為它是為 UI 特別定制的) ，并且可與任何架構進行無縫銜接。這意味著你可以馬上將它運用到你的網站中去。
它從核心功能中抽象出 DOM 編程接口 (并且因此使用了虛擬 DOM)，所以你可以快速渲染 UI，這使得你能夠通過 node.js 將它作為一個客戶端框架來使用。它是由 Facebook 開發的開源項目，還有其它的開發者為它貢獻了代碼。
假如說你見到過并喜歡 Facebook 和 Instagram 的界面，那么你將會愛上 React。通過 React，你可以給你的應用的每個狀態設計一個簡單的視圖，當數據改變的時候，視圖也自動隨之改變。只要你想的話，可以創建各種的復雜 UI，也可以在任何應用中復用它。在服務器端，React 同樣支持通過 node.js 來進行渲染。對于其他的接口，React 也一樣表現得足夠靈活。
除 Facebook 和 Instagram 外，還有好多公司也在使用 React，包括 Whatsapp、BBC、PayPal、Netflix 和 Dropbox 等。
如果你只需要一個前端開發框架來構建一個非常復雜且界面極好的強大視圖層，那我極力向你推薦這個框架，但你需要有足夠的經驗來處理各種類型的 JavaScript 代碼，而且你再也不需要其他的組件了 (因為你可以自己集成它們)。
3. Ember

這個 JavaScript 框架在 2011 年正式發布，是由 Yehuda Katz 開發的開源項目。它有一個龐大且活躍的在線社區，所以在有任何問題時，你都可以在社區中提問。該框架吸收融合了非常多的通用的 JavaScript 風格和經驗，以便確保開發者能最快地做到開箱即用。
它使用了 MVVM (模型-視圖-視圖模型Model–view–viewmodel) 的設計模式，這使得它與 MVC 有些不一樣，因為它由一個 連接器 (binder) 幫助視圖和數據連接器進行通信。
對于 DOM 編程接口的快速服務端渲染，它借助了 Fastboot.js，這能夠讓那些復雜 UI 的性能得到極大提高。
它的現代化路由模式和模型引擎還支持 RESTful API，這確保你可以使用到這種最新的技術。它支持句柄集成模板Handlebars integrated template，用來自動更新數據。
早在 2015 年間，它的風頭曾一度蓋過 AngularJS 和 React，被稱為最好的 JavaScript 框架，對于它在 JavaScript 社區中的可用性和吸引力，這樣的說服力該是足夠了的。
對于不追求高靈活性和大型架構的用戶，并且僅僅只是為了趕赴工期、完成任務的話，我個人非常推薦這個 JavaScript 框架。
4. Adonis

如果你曾使用過 Laravel 和 NodeJS，那么你在使用這一個框架之時會覺得相當順手，因為它是集合了這兩個平臺的優點而形成的一個框架，對于任何種類的現代應用來說，它都顯得非常專業、圓潤和精致。
它使用了 NodeJS，所以是一個很好的后端框架，同時還附帶有一些前端特性 (與前面提到那些更多地注重前端的框架不同)，所以想要進入后端開發的新手開發者會發覺這個框架相當迷人。
相比于 NoSQL，很多的開發者都比較喜歡使用 SQL 數據庫 (因為他們需要增強和數據以及其它特性的交互性)，這一現象在這個框架中得到了很好的體現，這使得它更接近標準，開發者也更容易使用。
如果你混跡于各類 PHP 社區，那你一定很熟悉 服務提供者Service Providers，也由于 Adonis 其中包含相應的 PHP 風格，所以在使用它的時候，你會覺得似曾相識。
在它所有的特性中，最好的便是那個極為強大的路由引擎，支持使用函數來組織和管理應用的所有狀態、支持錯誤處理機制、支持通過 SQL ORM 來進行數據庫查詢、支持生成器、支持箭頭函數arrow functions、支持代理等等。
如果喜歡使用無狀態 REST API 來構建服務器端應用，我比較推薦它，你會愛上這個框架的。
5. Vue.js

這是一個開源的 JavaScript 框架，發布于 2014 年，它有個極為簡單的 API，用來為現代 Web 界面Modern Web Interface開發交互式組件Reactive components。其設計著重于簡單易用。與 Ember 相似，它使用的是 MVVM (模型-視圖-視圖模型Model–view–viewmodel) 設計范例，這樣簡化了設計。
這個框架最有吸引力的一點是，你可以根據自身需求來選擇使用的模塊。比如，你需要編寫簡單的 HTML 代碼，抓取 JSON，然后創建一個 Vue 實例來完成可以復用的小特效。
與之前的那些 JavaScript 框架相似，它使用雙路數據綁定來更新模型和視圖，同時也使用連接器來完成視圖和數據連接器的通信。這是一個還未完全成熟的框架，因為它全部的關注點都在視圖層，所以你需要自己處理其它組件。
如果你熟悉 AngularJS，那你會感覺很順手，因為它大量嵌入了 AngularJS 的架構，如果你懂得 JavaScript 的基礎用法，那你的許多項目都可以輕易地遷移到該框架之下。
假如你只想把任務完成，或者想提升你自身的 JavaScript 編程經驗，又或者你需要學習不同的 JavAScript 框架的本質，我極力推薦這個。
6、Backbone.js

這個框架可以很容易的集成到任何第三方的模板引擎中，默認使用的是 Underscore 模板引擎，而且該框架僅有一個依賴項 (JQuery)，因此它以輕量而聞名。它支持帶有 RESTful JSON 接口的 MVC (模型-視圖-控制Model–view–controller) (可以自動更新前端和后端) 設計范例。
假如你曾經使用過著名的社交新聞網絡服務 reddit，那么你肯定聽說過它在幾個單頁面應用中使用了Backbone.js。Backbone.js 的原作者為之建立了與 CoffeScript 旗鼓相當的 Underscore 模板引擎，所以你可以放心，開發者知道該做什么。
該框架在一個軟件包中提供了鍵值對key-value 模型、視圖以及幾個打包的模塊，所以你不需要額外下載其他的外部包，這樣可以節省不少時間?？蚣艿脑创a可以在 GitHub 進行查看，你可以根據需求進行深度定制。
如果你在尋找一個入門級框架來快速構建一個單頁面應用，那么這個框架非常適合你。
總而言之
至此，我已經在本文著重說明了 6 個值得好好學習的 JavaScript 框架，希望你讀完本文后能夠決定使用哪個框架來完成自己的任務。
如果說對于選擇框架，你還是不知所措，請記住，這個世界是實踐出真知而非教條主義的。最好就是從列表中挑選一個來使用，看看最后是否滿足你的需求和興趣，如果還是不行，接著試試另一個。你也盡管放心好了，列表中的框架肯定是足夠了的。

需要觀看 java? web 資料的：

老規矩：轉發+關注，私信小編“資料”免費分享資料給你！

文最初發布于 Northell 博客，經原作者授權由 InfoQ 中文站翻譯并分享。

隨著社交媒體和用戶生成內容的爆炸式增長，互聯網正在向更好的方向發展。為了跟上時代發展的步伐，提供更好的交互性，開發人員開始構建庫和框架來簡化交互式站點的構建。2006 年，John Resig 發布了 jQuery，使得在 HTML 中編寫客戶端腳本變得更加容易。隨著時間的推移，其他類似的項目出現了。剛開始，它們是一個龐大的單體，而且把項目的構想強加給開發者?，F在，這些庫已經開始向緊湊型輕量級庫轉變，可以非常容易地添加到任何應用程序中。讓我們來看看其中最受歡迎的三個。

JavaScript 框架概覽

開始一個新項目總是要做許多決定。其中一個關鍵決策就是選擇合適的框架或庫。幸運的是，Vue.js 是一個功能非常多樣化的庫，可以處理各種各樣的任務。

Vue.js

Vue.js 這個庫讓你可以將交互性和附加功能添加到任何使用 JavaScript 的編碼環境中。Vue 既可以在單獨的頁面上用來解決簡單的任務，也可以作為成熟的工業應用程序的基礎。Vue.js 是一個用于構建圖形用戶界面的高級框架。它也可以與一些現代工具和附加庫一起，用于構建復雜的單向應用程序。

Vue 庫其中一個最大的優點是它不需要任何特殊知識。任何 Vue 應用程序都是使用 HTML、CSS 和 JavaScript 編寫的——熟悉這些工具就可以立即投入工作。即使你以前從未做過客戶端開發，也可以基于以前的 MVC 設計模式使用經驗進行構建，這種模式與 MVVM 非常相似。

React

借助 React 庫，我們可以輕松地創建交互式用戶界面。集成 React 時，不需要更改當前項目的代碼，它只負責渲染界面，不會額外帶來痛苦。

React 系統支持用戶界面更新，使得為應用程序創建健壯的模塊化組件更加容易。React 庫通過數據更新來實現大部分用戶界面維護工作，這對開發人員來說非常令人愉快（難怪它如此受歡迎）。

Angular

Angular 差不多是一個完整的開發環境。它包含一整套程序，包括 TypeScript 編譯器、AOT 編譯器和 Web 服務器。Angular 的 Web 服務器用于調試使用這個框架開發的站點。它是用同一個 Angular CLI 實用程序啟動的，要啟動 Angular CLI，你需要在 Windows 命令行中進入項目文件夾，并執行 ng serve 命令。

Vue、React 和 Angular 的主要特征

React 最大的其中一個優勢是：在穩定性和創新性之間做了很好的平衡，使得用戶比較容易適應。這個原因以及其他一些原因使 React 保持了它的地位，并獲得越來越多的人氣。

圖片來源：https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Cangularjs

大小

開發框架的大小對未來應用的性能至關重要?？蚣芎蛻贸绦虮仨氃趹贸绦蜷_始正常工作之前加載。

在這方面，Angular 最復雜，有 143KB。React 次之，有 43KB，而 Vue.js 只有 23KB。除非你的應用特別大，并且包含了大量的組件，否則最好使用更小的結構。

性能

在 Web 項目中，性能與 DOM 密切相關：DOM 在瀏覽器 / 代碼中表示 Web 頁面。在發生更新時，你可以通過 DOM 控制 Web 頁面。

Vue、React 和 Angular 的性能會因為任務的不同而有所差異，但在大多數情況下，它們都非常高效和快速。React 和 Vue 都實現了 DOM。得益于其精心設計的結構，Vue 提供了出色的性能和內存分配。這就是 React 和 Vue.js 優于 Angular 的地方：它們利用了虛擬 DOM——原始 DOM 的復本。

注意：DOM 是一種將 HTML 文檔的內容表示為對象的方法。此外，還有一個用于管理指定對象的接口。DOM 分常規 DOM（也稱為真 DOM）和虛擬 DOM。它們有什么區別呢？讓我們來看一個例子。如果你想修改在 HTML 標簽中找到的某些信息，算法將會這樣做：真正的 DOM 將更新所有標簽，直到它找到它需要的片段。在某些情況下，這會對性能和其他參數產生負面影響。虛擬 DOM 則只更新必要的 HTML 塊。

社區

React 是世界上最流行的框架，這已不是什么秘密。它越來越受歡迎，因為它提供了真正的 Promise。React 的 Mental Model 看起來很可靠，其組件讓創建用戶界面變得更容易，API 靈活且富有表現力，整個項目給人的感覺是就應該那樣。對 API 庫的描述也友好，更容易給人留下良好的印象。

從那時起，React 庫在基本概念和 API 方面就基本保持不變，但已經形成并發展出了一整套的知識和最佳實踐，越來越多的人在使用它。Angular 因其優點而備受贊譽，并擁有大量的社區支持。遺憾的是，盡管 Vue.js 有很多好處，但它并沒有像它的競爭對手那樣被開發者所接受。

下面讓我們從流行度和相關性兩個方面比較下這三個框架：

• GitHub：目前，Vue.js 是最流行的框架，盡管它是最年輕的，這意味著越來越多的項目將使用它。
• 谷歌搜索：在谷歌搜索中，React 查詢請求最多，緊隨其后的是 Vue.js。目前最不受歡迎的是 Angular.js。Angular.js 的人氣在下降，而 Vue.js 的人氣卻在上升。
• 勞動力市場需求：大多數職位空缺與 React.js 有關，然后是 Angular，再然后才是 Vue.js。

Vue、React 和 Angular：該選哪個？

為了選出最合適的庫，你應該首先仔細分析這些框架并理解自己的需求。無論是有許多依賴項的現有項目，還是你想使用熟悉的庫進行開發的新應用程序，Vue 都不會給你帶來任何麻煩。你可以繼續使用 Bootstrap 或 Bulma 這樣的 CSS 框架，保留為?Query 或 Backbone 編寫的組件，集成你最喜歡的庫執行 HTTP 請求，或使用 Promise 對象。

要開始使用 Vue 進行編程，你所要做的就是將 Vue.js 庫連接到 Web 頁面。不需要復雜的組裝工具！從頭到尾開發一個原型只需要 1 到 2 周的時間，這讓你能夠盡早并經常地收集用戶反饋。Vue 2 引入了服務器端渲染（SSR）支持。這讓你可以最小化初期的數據加載，并根據需要請求新的視圖和資源。與高效的組件緩存相結合，可以進一步減少流量消耗。

React 庫能夠做一些令人驚嘆的事情。因為整個用戶界面都是用 JavaScript 定義的，所以你可以使用 JavaScript 的豐富功能在模板中執行各種操作。你只會受到 JavaScript 特性的限制，而不會受到模板框架特性的限制。當你想到完全用 JavaScript 定義的視覺效果時，你可能會想到很多引號、轉義字符和 createElement 調用。別擔心，React 庫允許你（選擇性地）使用可以與 JavaScript 代碼共存的 HTML-like JSX 語法定義可視元素。

React 與其他兩個框架在以下理念上有所不同：

• 與其說它是一個框架，不如說它是一個庫（最初是為了處理 UI 而創建的）；
• 因為它不受框架的限制，所以它的功能更多——更適合專業人士，而不是初學者；
• 在 Angular 中許多可以“開箱即用”的主要特性，在這里必須單獨連接（這種方法有優點，也有缺點，對于初學者來說是缺點，因為需要做不必要的動作）；
• 更多地面向 JavaScript 而不是 TypeScript（盡管每個版本對 TS 的支持都在增加）；
• 更便于創建原生 Android 和 iOS 移動應用程序；
• 擁有大量適用于各種場合的第三方庫（多于 Angular）。

Angular 已經被用在了許多規模最大、最復雜的 Web 應用程序中。

圖片來源：https://www.madewithangular.com/

Angular 借鑒了服務器端開發中的一些最佳特性，并用它們來擴展瀏覽器中的 HTML 標記。這樣，創建具有增強功能的應用程序就更簡單輕松了。Angular 應用程序基于 MVC 設計模式構建，這個模型致力于創建具有以下特征的應用程序：

• 易于擴展：如果你理解了基礎知識，即使是最復雜的 Angular 應用，你也很容易就能夠理解，這意味著你可以很輕松地擴展應用來提供實用的新功能。
• 易于維護：Angular 應用程序很容易調試，Bug 很容易修復，這意味著長期運行的 Angular 應用也很容易維護。
• 測試工具：Angular 有良好的 go mod 和端到端測試支持。因此，你可以在用戶遇到之前找到并修復它們。
• 標準化：Angular 基于瀏覽器的內部功能，不會給你的工作帶來任何阻礙。這讓你可以創建符合標準的 Web 應用程序，包含最新的功能（例如，各種 HTML5 API）、流行的工具和框架。
• 這是一個框架——這意味著它設定了創建 Web 應用程序的規則，在初始階段設定了特定的框架，讓初學者可以少費腦筋。
• Angular 功能極多，如果需要額外的東西，可以連接第三方模塊。

Vue.js VS React：雙向數據綁定

在 Vue 中，你可以輕松地將組件變量綁定到表單字段。當你更改變量時，表單字段會更新，當用戶更改表單字段時，組件變量也會更新。這比編寫 React 中的事件處理程序要容易得多。

此外，很多人喜歡用圖表展示框架的受歡迎程度，其中 React 是 Angular 的 2 到 3 倍。它從創建移動應用程序（React Native）中獲益頗多，因為與 Angular Ionic 相比，它更方便。至于 Web 應用程序（ReactJS）開發方面，一切就沒那么簡單了。

例如，對于 Web 應用程序，我發現，使用 Angular 比使用 ReactJS 更方便。

你可以自己嘗試并比較不同的方向或技術。為此，你可以在谷歌趨勢中輸入一些關鍵字，它會為你畫出漂亮的圖表。

Vue.js vs React vs Angular

與之前的框架不同，Vue.js 是由一個人創建的，他認為 2013 年已經有的框架都太復雜。Vue 的第一個和第二個版本都是由一個人創建的，因此，在某些方面，它可能比競爭對手更糟糕，尤其是在安全方面。Vue 3 是由一個開發團隊創建的，這意味著現在許多 Bug 和缺點都得到了修復，框架本身的效率也得到了提升。

我應該學習 React 還是 Angular？

最好同時學習 Angular 和 React。這兩種框架各有優缺點。專家建議初學者首先學習 Angular，因為你所需的一切都是“開箱即用”的，這樣更不容易犯錯（框架會幫你控制）。在學習了 Angular 之后，你可以學習 ReactJS 和 React Native。另外，如果你只需要移動應用，你也可以直接跳到 React Native。事實上，你只需要學習框架的特性，僅此而已。其余的知識都是通用的（OOP、TypeScript、RP）。學習框架本身 1 到 2 周就足夠了，你已經可以創建簡單的 Web 應用程序了。

結束語

顯然，這三個框架都非常強大，但同時又很不一樣。它們有自己的優勢和劣勢，沒有一個通用的公式可以用來決出一個絕對的贏家。選哪個框架好，要看你正在創建的應用程序和你的特定需求。在做決定之前有必要進行全面的研究。對于那些從事商業投資而不是單個項目的公司來說，這一點尤其重要。

原文鏈接：

https://northell.medium.com/react-vs-vue-vs-angular-what-to-choose-for-web-development-abc5565d3f11