三大 JS 框架的較量：Angular.js 與 React.js 與 Ember.js

rita63 8年前發布 | 16K 次閱讀 Ember.js React JavaScript開發 angularjs

通過選擇合適的JavaScript框架來更好適配你的項目需求，這有利于提高你的開發能力與web apps的競爭力。

然后，你可以為基于JavaScript的應用或者網站想個極佳的主意。選擇合適框架應該對你項目的成功有顯著效果。它可以推到你及時完成項目，并且有助于你將來維護代碼。JavaScript框架，比如Angular.js，Ember.js，或者React.js，能提供很好的代碼框架，并且保持代碼的組織性，從而使得你的app更具靈活性與可擴展性，開發過程更加容易。

JavaScript場景的波動

Web開發變化速度非常快。幾乎每個月都有一個JavaScript框架誕生，并且已存在的框架也在頻繁更新。這些框架和開源代碼一樣，世界各大社區可以對它們進行完善。到頭來，比較每個框架的優點與不同點，成了一件不容易的事情。

Angular Vs React Vs Ember.Deep Dive

許多開發者都對JavaScript框架有著困惑，因為框架外表與功能差異很大。

下面，讓我們來比較三大廣泛應用于web的流行JavaScript框架的優點：AngularJs、ReactJs和EmberJs。

框架概覽

框架 AngularJS ReactJS EmberJS
概述 主要的 JavaScript MVW 框架 主要用于構建用戶界面，但不僅限于此的 JavaScript 庫 一個用于創建復雜 Web 應用程序的框架
創立 2009 由 Mi?ko Hevery 創立 2013 年由 Jordan Walke 創立，開源 2007 年由 Yehuda Katz 創立，名為 SproutCore，2011 年被 非死book 收購，更名為 EmberJS
主頁 https://angularjs.org/ https://reactjs.net/ http://emberjs.com/
Github https://github.com/angular/angular.js https://github.com/非死book/react https://github.com/emberjs/ember.js
錯誤報告 https://github.com/angular/angular.js/issues https://github.com/非死book/react/issues
授權 MIT MIT BSD-3-Clause
使用該技術的知名網站 油Tube, Vevo, Freelancer, Istockphoto, Weather, Sky Store 非死book, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon
理想用途 建立調試活躍和互動的 Web 應用程序 數據變化頻繁的大型 Web 應用程序 動態 SPA（Scratch Pad Area，暫存區）

AngularJS.框架空間的王者

Angular.js是一個應用模型-視圖-控制器（MVC）結構（Angular 1）的開源web應用框架，模型-視圖-視圖模型（MVVM）結構（Angular 2），版權歸谷歌所有。它是以上最老的三大框架命名。因此，他擁有最龐大的社區。Angular.js通過徑向擴展HTML功能，解決了開發SPA的問題（單頁應用）。框架的突出特點是快速啟動與運行你的app。

AngularJs 的優缺點

優點：

  • 自定義文檔對象模型（DOM）元素的 創建 。

  • 明確的UI設計與替換。

  • 當在一個HTML文檔創建輸入屬性時，會為每個渲染屬性創建一個獨立的數據 綁定。在發生變化需要重渲染之前，Angula先檢測 r頁面的 每一個明確屬性。

  • 依賴注解。

  • 簡單路徑。

  • 代碼容易測試。

  • 框架支持HTML語法 的 擴展 ，直接創建可復用的組件。

  • 穩健的模板生成方案。在HTML屬性使用綁定表達式來驅動模板功能。Angular的模板引擎擁有一個深度理解的DOM，它的優越結構模板減少了創建生成頁面所需的代碼量。

  • 數據模型對于小規模數據的使用有所限制，其目的為了使得代碼簡單容易測試。

  • 快速渲染靜態列表。

  • 良好的代碼復用（Angular庫）。

痛點：

  • API指令的復雜度高。

  • 對于有 元素 相互調用的 頁面，Angular速度變得很慢。

  • 初始設計變得慢起來。

  • 由于大量DOM元素，影響性能。

  • 復雜的第三方集成。

  • 曲折的學習路線。

  • 域容易使用，但是難以調試。

  • 路徑具有局限性。

提示：Angular 2 的功能與上述有所不同。Angular 2 沒有沿用Angular 1 的設計，它徹底重寫了。該框架兩個版本有翻天覆地的變化，在開發商之間引起很大的爭議。

ReactJS. 領域中的新生代

ReactJS是一個開源庫，利用其驚人的渲染性能來構建持久的用戶接口，由非死book推出與發布。React在模型視圖控制器結構中專注“V”層。React首次發布之后，它迅速達到頂峰。它的出現是為了解決其他JavaScript框架的共同問題——渲染大數據集合的效率。

ReactJs 的優缺點

優點：

  • 接口設計與學習API容易。

  • 與其他JavaScript框架相比，具有顯著性能。

  • 更新速度快。React創建一個新的虛擬DOM，利用最近數據與比較上個版本的差異提供完善修復機制，創建一個最小的更新列表構成真正的DOM使其同步，而不是每次發生變化都進行重復渲染。

  • 服務端渲染允許創建同構/通用的web apps。

  • 容易導入組件，雖然有一些依賴。

  • 更好的代碼復用。

  • 方便JavaScript的調試。

  • 在提高復雜組件性能方面，Angular與React難分高低。

  • 基于層次的全系組件。

  • JSX，一個JavaScript擴展語法，允許引用HTML與使用HTML標簽語法來渲染子組件。

  • React Native 庫。

痛點：

  • 它不是完整框架，它是一個庫。

  • 非常傳統的視圖層。

  • Flux結構是開發者使用過的一個與眾不同的范例。

  • 大量開發者不喜歡JSX。

  • 曲折學習路線。

  • 集成React到傳統MVC框架，猶如鐵軌一樣需要一些配置。

EmberJS. 挑起重擔

EmberJS 是一個開源的JavaScript框架，用以創建單頁 客戶端web應用 ，使用模型-視圖-控制器（MVC）模式。該框架提供通用數據綁定， 基于網址驅動的方法用于構建不同應用，重點放在可擴展性上。

在2007年，Ember起源于SproutCore。在2011年，它被非死book收購，重命名為Ember。它從本地框架例如蘋果的Cocoa使用輕量靈敏性中，結合了成熟概念。

EmberJs 的優缺點

優勢：

  • 約定優于配置。Ember.js支持跟隨命名約定于自動生成代碼，而不是在你的應用不同路徑提供詳細配置，專款專用的情況下，不遵守公共約定。

  • 客戶端渲染，在視圖層之外擴展web應用結構。

  • 支持URL。

  • Ember的對象模型有利于鍵值對的觀察。

  • 嵌套的UIs。

  • 最小化DOM。

  • 在龐大應用生態系統運行良好。

  • 很好地集成java與強大數據層。

  • 完全成熟模板機制（處理板模板引擎構建基于流行的Mustache模板引擎），減少了代碼編寫。它并不知道什么是DOM，而是直接依賴文本操作，構建動態的HTML文檔。

  • 使用觀察者來觀察內容的變化，只需要重新渲染改變的部分。

  • 使用配件避免“臟檢查”。

  • 更快的啟動時間與固有的穩定性。

  • 性能專注。

  • 友好的文檔API接口。

痛點：

  • Ember.js在控制等級上缺乏組件復用。

  • 有許多再也不用的過時內容與例子。

  • 曲折學習曲線。

  • 處理板有大量<腳本>標簽會污染DOM，它被用作標志，保持模板與您的模型同步更新。

  • 它的典型用法會很繁瑣。

  • Ember的對象模型安裝后體積過度膨脹與調試時調用棧。

  • 框架中最具爭議的并且是最笨重的。

  • 對于小項目有點大材小用。

  • 測試手段似乎是模糊的，不夠完整。

清楚你的需求并且選擇最有前途的框架

到底哪個框架適合你，取決于對你的應用程序需求評估與框架性能的匹配度。這需要深入剖析每個框架的優勢與不足，它們 如何應用于 不同場合。所有框架有許多共同點：它們都是開源的，擁有發布版本證書，也是使用MVC設計模式來創建SPAs。它們都有視圖，事件，數據模塊與路徑。但是，不同JavaScript框架能更好地適合不同類型的應用程序。

假如你正在決定創建一個web app，Angular，React和Ember是最安全提供長期支持并且活躍的社區。另外，最近Angular是三者中最流行的（框架）。你可以把它當做一站式服務商店來 使用。大企業傾向選擇它作為框架。Ember則是提供框架中工具齊全的最佳解決方案，所以你不必花費反復查詢與合并庫。由于Ember需要花很長時間來學習，它比較適合長期的項目。React是以上框架中最輕量級的。它在這方面做得尤為出色：渲染UI組件。許多場合甚至把它應用于上述的框架。假如你需要逐步改善存在的代碼，它將是一個合適的選擇。

如你所見，沒有絕對的王者。對于特定工程，一些框架比其他更加適合。從幾個角度檢查你的項目，包括：成熟度、大小、依賴、互相操作性與特征等等。聯系專業的web開發公司來構建完美的網站架構和網站設計，以達到最適合你的業務需求。

 

來自：https://www.oschina.net/translate/comparison-of-js-frameworks

 

 本文由用戶 rita63 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！