JS 框架比較：AngularJS vs ReactJS vs EmberJS

選擇最適合專案需求的JavaScript框架，可以提高你釋出有競爭力的web app的能力。

最後，你對基於JavaScript的app或網站找到了一條奇妙的思路。選擇正確的框架可能對你專案的成功有著相當大的影響。它可以影響你按時完成專案並在將來維護程式碼的能力。JavaScript框架，如Angular.js，Ember.js或React.js，給你的程式碼帶來結構，並保持其有序化，從而使您你的app更靈活，更具可擴充套件性，並更容易開發。

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開發公司來構建完美的網站架構和網站設計，以便於更好地滿足你的業務。