JavaScript框架比較：AngularJS vs ReactJS vs EmberJS

Javascript場景的易變性

Web開發的變化發生的很快。幾乎每個月都會引入一個新的JavaScript框架，並且現有的框架經常被更新。由於這些框架是開放源代碼的，因此世界各地的大型社區也都可以不斷地使之豐滿起來。因此，瞭解每個框架的優點和它們之間的區別並不是一件容易的事情。

深入Angular vs React vs Ember

許多開發人員因爲JavaScript框架的種類繁多而感到眼花繚亂——框架外觀和功能非常不同。

讓我們來比較一下三個最流行和廣泛使用的JavaScript框架的優勢：AngularJS，ReactJS和EmberJS。

框架	AngularJS	ReactJS	Ember.js
是什麼?	超級JavaScript MVW框架	一個不止用於構建用戶界面的JavaScript庫	一個用於創建高要求的web應用程序的框架
建立	由MiškoHevery建立於2009年	創建者：Jordan Walke，2013年開源	最初由Yehuda Katz於2007年創建叫做SproutCore，後被Facebook收購，並於2011年更名爲EmberJS
官方主頁	https://angularjs.org/	https://reactjs.net/	http://emberjs.com/
Github	https://github.com/angular/angular.js	https://github.com/facebook/react	https://github.com/emberjs/ember.js
Bug 報告	https://github.com/angular/angular.js/issues	https://github.com/facebook/react/issues
許可證	MIT	MIT	BSD-3-Clause
被使用的熱門網站	Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store	Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog	Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon
最適合使用的地方	構建高度活躍和交互式的Web應用程序。	數據設置頻繁更改的大型Web應用程序	動態SPA

AngularJS： 框架領域的冠軍

Angular.js是一個開源的Web應用程序框架，具有由Google提供的Model-View-Controller（MVC）架構（Angular 1）和Model-View-ViewModel（MVVM）架構（Angular 2）。它是上面提到的三個框架中最古老的。因此，它擁有最大的社區。 Angular.js通過使用指令擴展HTML的功能來解決開發SPA（單頁應用程序）的問題。此框架強調讓你的app快速完成和運行。

Angularjs的優缺點

優點：

• 創建自定義的文檔對象模型（DOM）元素。
• 簡單的UI設計和更改。
• 在HTML文檔中創建輸入字段時，將爲每個已渲染字段創建單獨的數據綁定。Angular傾向於在重新渲染之前檢查頁面上的每個單個綁定字段的任何變化。
• 依賴注入。
• 簡單路由。
• 易於測試的代碼。
• 此框架利於HTML語法的擴展，並通過指令創建可重用的組件。
• 強大的模板構建解決方案。在HTML屬性中使用綁定表達式來驅動模板功能。Angular的模板引擎對DOM有着深入的理解，且其結構良好的模板減少了創建結果頁面所需的代碼總量。
• 數據建模限於小數據模型的使用，以使代碼簡單易於測試。
• 在渲染靜態列表時速度快。
• 偉大的代碼重用（Angular庫）。

缺點：

• 指令API的複雜性。
• 對於具有許多交互元素的頁面，Angular變得緩慢。
• 原始設計往往很慢。
• 由於許多DOM元素，性能方面有問題。
• 複雜的第三方集成。
• 陡峭的學習曲線。
• 範圍很容易使用，但很難調試。
• 路由受限。

注意。Angular 2的功能與上述不同。Angular 2不是從Angular 1重新設計的，它被完全重寫了。兩個版本的框架之間的巨大變化在開發人員之間引起了相當大的爭議。

ReactJS： 在塊上的新生兒

ReactJS是一個開源的JavaScript庫，用於構建高性能的用戶界面，專注於由Facebook引入和提供的驚人的渲染性能。React專注於模型視圖控制器（Model View Controller）架構中的“V”。在React第一次發佈後，它迅速吸引了大量用戶。它是爲了解決與其他JavaScript框架的常見問題——大數據集的高效渲染而創建的。

Reactjs的優缺點

優點：

• 簡單的界面設計和學習API。
• 比其他JavaScript框架顯着的性能提升。
• 更快的更新。React使用最新的數據創建新的虛擬DOM和修補機制，並高效地將其與以前的版本進行比較，創建一個最小的更新部分列表，使其與真正的DOM同步，而不是每次更改時重渲染整個網站。
• 服務器端渲染允許創建同構/通用web app。
• 容易導入組件，儘管具有很少的依賴性。
• 良好的代碼重用。
• 非常適合JavaScript調試。
• 完全有可能用React增強Angular以增強麻煩的組件的性能。
• 完全基於組件的架構。
• JSX，一種JavaScript擴展語法，允許引用HTML並使用HTML標記語法來渲染子組件。
• React本地庫。

缺點：

• 不是一個完整的框架，而是一個庫。
• 非常複雜的視圖層。
• Flux架構不同於開發人員習慣的範例。
• 很多人不喜歡JSX。
• 陡峭的學習曲線。
• 將React集成到傳統的MVC框架，如Rails中需要一些配置。

EmberJS： 所有的繁重工作

EmberJS是一個用於創建單頁面客戶端Web應用程序的開源JavaScript應用程序框架，使用Model-View-Controller (MVC)模式。此框架提供通用數據綁定和URL驅動方法，用於構建不同的應用程序，重點放在可擴展性。

Ember在2007年最初被髮布時，叫做SproutCore。2011年，它被Facebook收購，並重命名爲Ember。它結合了本地框架，例如Apple的Cocoa的經過驗證的概念以及輕量級的敏感性。

Embersjs的優缺點

優點：

• 約定優於配置。Ember.js不是爲應用程序中的各種路由提供詳細的配置，而是喜歡遵循命名約定並自動生成結果代碼，僅在不遵守約定的情況下指定配置。
• 客戶端渲染和結構到可擴展的web應用程序超出視圖層。
• URL支持。
• Ember的對象模型利於鍵值觀察。
• 嵌套的UI。
• 最小化DOM。
• 適用於大型應用程序生態系統。
• 強數據層與Java集成良好。
• 完全成型的模板機制（Handlebars模板引擎構建在流行的Mustache 模板引擎上）減少了編寫的代碼總量。它對DOM一無所知，而是依賴於直接的文本操作，動態地構建HTML文檔。
• 使用觀察者來改變值，這將導致僅渲染更改的值。
• 通過使用附件避免“髒檢查”。
• 更快的啓動時間和固有的穩定性。
• 性能焦點。
• 友好的文檔和API。

缺點：

• Ember.js缺少控制器級別的組件重用。
• 有很多過時的不再工作的內容和示例。
• 陡峭的學習曲線。
• Handlebars使用許多<script>標記來污染DOM，用作標記以使模板保持更新到模型。
• 當走出其典型用途時會很麻煩。
• Ember的對象模型實現膨脹Ember的整體大小並在調試時調用堆棧。
• 最有見地和最重的框架。
• 對於小項目而言過大。
• 測試用例似乎模糊/不完整。

比較Angularjs Vs Reactjs Vs Emberjs功能

特性	AngularJS	ReactJS	Ember.js
動態UI綁定	允許在純對象或甚至屬性級別使用UI綁定。可以同時更新多個綁定，而不需要耗時的DOM更新。	直截了當地將狀態直接鏈接到UI。狀態參數作爲對象傳遞，併合併到React組件的內部參考狀態。	使用Handlebars默認模板引擎。你必須在模型上使用特定的setter方法來更新綁定到UI的值，在Handlebars渲染頁面的時候。其他綁定選項包括一個可能性以讓你的Model在View和甚至另一個Model之間用一種要麼單向要麼雙向的綁定模式。
可重複使用的組件	Angular組件稱爲“指令”，它們比Ember組件強大得多。它們能夠創建你自己語義的和可重用的HTML語法。	在視圖和控制器級別使用mixin，因此組件不必UI相關，並且可能只包含一些實用程序或甚至複雜的程序邏輯。	基於Widget的方法稱爲Ember組件。Handlebars佈局和Ember的後端基礎設施允許編寫你自己的特定於應用程序的HTML標籤。然後，可以在任何Handlebar模板中使用自定義元素。
路由	需要模板或控制器到其路由器配置，必須手動管理。	React不處理路由。但是有很多模塊用於路由，如react-router，flow-router。	更強大的路由，以犧牲可增加的複雜性爲代價。
意見	靈活的意見。給出一點靈活性來實現你自己的客戶端堆棧。	靈活的意見。給出一點靈活性來實現你自己的客戶端堆棧。	靈活的意見。給出一點靈活性來實現你自己的客戶端堆棧。
數據綁定	雙向	單向	雙向

定義你的需求並使選定的框架發揮最大的作用

確定哪個框架適合你，只需要評估應用程序的需求以及每個框架的優勢即可。這需要深入瞭解所考慮的每個框架的優點和缺點，以及它們如何在不同用例下競爭。所有框架都有很多共同點：開源，在許可證下發布，並創建具有MVC設計模式的SPA。它們都有視圖，事件，數據模塊和路由。然而，不同的JavaScript框架更適合不同類型的應用程序。

如果你正在決策創建一個web app，對於長期支持和活躍的社區，Angular，React和Ember是最安全的。此外，目前Angular是這三個中最受歡迎的。你可以一站式使用。它是大型企業的首選框架。Ember是那些尋求全工具包含框架方法的人的最佳解決方案。Ember可以幫助你做出許多決策，所以你不必花時間研究和膠合庫。由於Ember需要很長時間學習，所以它適合長期項目。React是上面提名的三個框架中最輕量級的。它的偉大在於一件事：渲染UI組件。許多人甚至將其與前面提到的框架進行配對。如果你需要逐漸現代化現有的代碼庫，那麼這是一個合適的選擇。

正如你看到的，沒有明確的勝利者。有的框架比其他框架更適合特定的項目。當然，你也可以從幾個不同的角度檢查你的項目，包括成熟度，大小，依賴性，互操作性，功能等，並聯系專業的前端web開發公司來構建完美的網站架構和網站設計，以便於更好地滿足你的業務。