【翻譯】ExtJS vs AngularJS

原文：ExtJS vs AngularJS

ExtJS和AngularJS是兩個行業內領先的富界面開發框架。TechFerry有機會使用Ext JS和Angular JS來開發多個富界面的單頁面應用程序。本文講述的就是使用這兩種技術來開發多個應用程序後的開發體驗。本文圍繞利弊、架構、測試、移動能力、性能、生成和部署等方面對Ext JS和Angular JS進行了超過30個以上的要點進行了比較。

咱們將經過使用Ext JS和Angular JS開發一個測試應用程序來了解架構細節，以便進行詳細的性能比較測試。對於性能報告，咱們使用了相似的組件集，採用了固定的生成過程，以確保比較是同類比較。

Sencha Ext JS 業界最強大的富界面應用程序開發框架 無與倫比的跨瀏覽器兼容性 先進的MVC架構 無插件的圖表 現代UI部件

AngularJS HTML加強的Web應用程序 與其餘庫的完整擴展能力和好的協同表現 開源的Javascript框架，由谷歌維護 聲明式編程

Sencha ExtJS 和AngularJS 的比較

Sno	功能	ExtJS	AngularJS
1.	一站式富界面應用程序	✔	✘
2.	具備豐富的主題套件能力的UI組件	✔	幸運的是，有大量的開源的商業組件，爲Angular JS提供了集成組件，包括AngularUI、AngularUI Bootstrap、Kendo（或Angular-Kend）、Wijmo或其餘。
3.	打頁面應用程序的設計	✔	✔
4.	跨瀏覽器兼容性	✔	Angular JS依賴於jqLite/JQuery來提供跨瀏覽器的兼容能力。但與其餘第三方庫集成可能須要跨瀏覽器兼容能力。 注意：Angular JS（1.3及以上）已經不支持IE8了，而Sencha Ext JS 5還會繼續支持IE8。若是你的企業用戶須要支持IE8，應考慮Ext JS。
5.	圖表	Ext JS獨立圖表是業內最強大和最早進的，對於大多數商業應用程序來講，它的插件是免費和足夠應付的。	AngularJS D3圖表基本上就是集成的D3圖表，這讓它擁有了使人驚異的圖表和圖形繪製功能。使用D3.js，你會愛上D3圖表的。
6.	學習曲線	高	中等
架構
7.	應用程序設計框架	MVC 還可看看 ExtJS 5 Beta	MVW (Model-View-Whatever). 它可支持流行的模式，如模型-視圖-控制器或模型-視圖-視圖模型
8.	依賴注入	對於依賴注入，Ext JS能夠經過擴充Deft JS來添加Ioc（Inversion of Control，控制反轉）容器。	✔
9.	雙向數據綁定	✔	✔
10.	直接的DOM操做	✔	✔
11.	模塊化	✔	✔
測試
12.	自動化測試支持	可經過外部工具實現	✔
13.	測試框架或測試運行器	一些流行的第三放javascript測試框架，如Siesta（專門爲Ext JS進行了優化）、Jasmine和Mocha，均可用於測試。	AngularJS依靠它本身的端到端測試運行器（Karma）來實現集成測試。Protractor就是針對Angular應用程序的端到端測試框架。
性能
14.	Dom 算法	深度優先、自底往上的算法	對於DOM樹，指令是深度優先、自底往上的算法。而對於控制器則是自上往下的方式。
15.	性能	較高的覆蓋面/重量，所以Ext JS相對比較慢。	在性能測試中，Angular比Ext JS輕3倍。請參閱性能比較統計。
16.	輕量級-較小的下載覆蓋面	✘	✔
移動能力
17.	Web應用程序的移動支持	Sencha建議使用Sencha Touch來開發應用程序的移動版本。在移動設備上，像嵌套列表這樣的組件比網格更實用。不過，這意味着須要爲應用程序開發移動版本。	使用ng-touch庫實現響應式Web應用程序，angular-gestures（手勢）和AngularJS響應式模塊。
18.	跨平臺本地移動應用程序/混合應用程序	經過Sencha Touch集成Apache Cordova/Phonegap實現。	經過Trigger.io、Cordova/Phonegap集成基於AngularJS優化過Ionic框架實現，可用來開發富界面和可靠的移動應用程序。
19.	移動網站	Sencha touch可用來開發移動網站。	AngularJS響應模塊（angular-responsive, angular-deckgrid等）、UI Boostrap、AngularJS responsive directives, angular-gestures 和ngTouch庫。
路由
20.	內置路由	✘ 參閱 ExtJS 5 Beta	✔
21.	深度連接	✘ 參閱 ExtJS 5 Beta	✔
22.	瀏覽器歷史、向前、向後按鈕支持t	經過Ext.util.History實現	✔
23.	瀏覽器書籤支持	✘ 參閱 ExtJS 5 Beta	✔
24.	SEO支持	大多數單頁面應用程序須要經過身份驗證後才能使用，於是通常不須要SEO索引。對於公共頁面，可以使用靜態HTML/CSS來實現，若是須要實現的動態內容，可考慮AjaxBased SEO。	可考慮使用Prerender.io或在Web服務器中實現無頭的瀏覽器支持來實現基於Ajax的SEO。
部署
25.	生成工具	針對Ext JS 4.x+的Sencha cmd 工具或針對Ext JS 3.x的Sencha sdk工具	第三放的 Grunt 工具
26.	包管理工具	Sencha cmd	Yeoman, Grunt 或 Bower
協議和支持
27.	協議：開源或商業	Per-seat / per-server的商業協議或GPL許可下的開源協議	MT許可下的開源javascript框架
28.	完整的文檔套件、教程、視頻示例、培訓	✔	✔
29.	支持：通常性討論、Bug報告和定製功能需求	基於Web的公共或白金（僅付費的訂閱用戶）支持	公共支持
30.	徹底的樂趣和知足：在整個應用程序開發生命週期內，不須要考慮所選擇的第三庫新版本發佈或bug修復	✔	✘
其餘
31.	內置動畫支持	✔	✔
32.	Deferred 和Promises.	DeftJS提供了一些Ext JS擴展，包含了Deferred和Promises.	✔
33.	Dirty Checking（髒檢查）	✔	✔
34.	Deferred Bootstrap	Until now, ExtJS applications' testing has never required delay in the Bootstrap as third-party JavaScript testing frameworks which are used for ExtJS application testing do not require deferring the bootstrap.	Angular Scenario Runner and Batrang require Deferred Bootstrap and hence Deferred Bootstrap concept is introduced to allow end to end tests.

性能比較統計

爲了評估這兩個框架的性能，咱們開發了一個包含網格、樹和圖表組件的小型的應用程序。這兩種技術都是按照規定的生成過程來進行的，所以，咱們可使用最小化的生成來進行量級比較。YSlow用來收集性能數據。其餘的細節：

• Ext JS：使用網格、樹和圖表組件

• Angular JS：使用angular-charts.min.js、angular.min.js、jquery.min.js、angular-route.min.js、ng-grid-2.0.7.min.js、angular.treeview.min.js、angular-animate.js模塊

• 對於這些組件的數據部分，使用的是贊成的http請求，一樣的Web服務器。

• 結論：Ext JS比AngularJS重3倍

Ext JS

AngularJS：

若是使用ext-all，那麼統計結果是：

框架的選擇：

使用Ext JS：

• 使用Sencha Ext JS提供的方便的組件，可節省大量時間。

• 若是擔憂編程和開發時的兼容性問題，它是一大亮點。

• 你或你的客戶須要專門的許可或專業支持。

• 若是富桌面應用程序（使用Ext JS）和移動Web應用程序（使用Sencha Touch）是獨立，這至關實用。

• 可承擔支持合約或per-seat / per-server 的商業許可。

使用AngularJS：

• 要求較小的足跡。更多詳細信息，請參閱性能比較統計。

• 應用程序要求響應式設計。

• 你的組織須要尋求自動化測試的價值，以及自動化測試是大家開發文化的一部分。

• 要整合的第三放組件是免費的，於是成本比較低。

• 團隊更關注CSS和跨瀏覽器的兼容性問題。

• 在整個應用程序開發生命週期內，團隊可以很好的管理所集成的第三方庫的新版本或bug修復。

架構差別：

咱們嘗試從如下10個方面來比較Ext JS和AngularJS之間的架構差別：

• 應用程序設計框架
• 組件
• 路由的好處
• 可測試性
• 數據綁定
• SEO的友好性
• 移動解決方案
• DOM算法
• Deferred和Promises
• 髒檢查
• Deferred bootstrap

摘要：

Ext JS是基於組件（網格、樹、表單和圖表）的，代碼開始於擴展的API類和配置模塊，若是須要，可自定義延時文稿或行爲/事件，將這些組件添加到容器/佈局。它遵循面向對象原則和MVC模式，不多須要與DOM直接交互。

AngularJS，恰好相反，它是聲明式編程，開始時，須要在純HTML中添加AngularJS指令、配置模塊、使用模板或路由來配置視圖，並且框架還有關注DOM的建立。因爲要處理HTML，於是須要直接與HTML結構或DOM元素交互。

應用程序設計框架
Ext JS: 遵循 MVC框架. 隨着Ext JS應用程序的大小和複雜性的增長，Sencha Touch和Ext JS能夠經過加入Deft JS來添加Ioc容器、針對依賴注入和動態應用程序的程序集。 基於組件和hence模塊	AngularJS: AngularJS是加強的HTML Web一個月程序 它被描述爲「Model-View-Whatever」框架，它沒有規定是哪種特定的應用程序架構或哪一套模式。然而，它足夠靈活去支撐流行的模式，如模型-視圖-控制器或模型-視圖-視圖模型。 基於模塊。依賴於模塊內的html元素。
組件:
Ext JS: Ext JS區別於其餘框架的一個主要特性就是包含一套有豐富的主題能力的UI組件。 Pros: 使用Ext JS提供的方便的組件能夠節省大量時間。 Cons: Sencha組件每每會產生冗長的DOM輸出，其結果就是須要更多標籤。	AngularJS: AngularJS不能解決的問題是沒有豐富用戶接口組件。 不過，有大量的開源或商業組件能夠集成到AngularJS，包括AngularUI、AngularUI Bootstrap、Kendo (或 Angular-Kendo)、 Wijmo以及其餘。
路由的好處
ExtJS: Ext JS沒有路由。不過，許多單頁面應用程序可能不須要路由，除非你但願經過內部/深度連接來實現SEO友好性或支持書籤。	AngularJS: AngularJS路由鏈接着瀏覽器中的控制器、視圖模板和當前URL定位。使用該特性就可實現深度連接。 深度連接是由網站中指定的、可搜索的或可索引的內容塊的鏈接所組出的超連接。它可讓咱們利用瀏覽器的歷史記錄（後退或前進導航）已經瀏覽器的書籤功能。
可測試性:
ExtJS: 使用Sencha框架生成的應用程序可以使用幾個流行的第三方javascript測試框架來測試，如Siesta（基於Ext JS進行了優化）、Jasmine和Mocha。 Sencha產品套件沒有包含測試框架或測試運行器。	AngularJS: AngularJS從建立之初開始就被設計爲可測試的應用程序。 它支持三方面的自動化測試：單1、集成和功能測試。 AngularJS團隊還開發了它本身的Karma測試運行器。另外，第三方工具Protractor是針對Angular應用程序的端到端測試框架。
雙向數據綁定: 雙向數據綁定是應用程序UI和模型對象之間的粘合劑，這樣，對象屬性的改變就會反映到UI，反之亦然。
ExtJS: 經過使用存儲對象，Ext JS有着優秀的數據綁定功能。爲了執行雙向數據綁定，還須要執行一些工做，如從新加載存儲等等。	AngularJS: AngularJS的雙向數據綁定基本上是經過嵌套在原型繼承樹上的模型來實現的。 Cons: 若是模板綁定的數據有2000到3000，應用程序會變得遲鈍。 Bindonce is a great way to minimize the number of watches when most of the data presented in your page, once rendered, are immutable and you need not keep watching them for changes.
SEO Friendliness: Most of the single page apps which work behind authentication need not be indexed for SEO. If you have some pages in your app which are public and which needs to be indexed, you can createthem separately, either with static HTML/CSS or if you do need to use dynamic content, consider Ajaxbased SEO as described below. Ajax based SEO: For the indexing of dynamic / ajax-based single page web apps, all you have to do is to generate the additional static content so that when the crawlers access your page, they get easy access to that static content and when the users access your page, they see the app. To achieve this functionality you could either use some tools like Prerender.io: fully open-source or you have to set up the headless browser support in your web-server which is an additional effort.
ExtJS: Ajax based seo is possible in ExtJS with hashbang urls' support in your web-server.	AngularJS: AngularJS seo with Prerender.io: When a crawler visits your page at hashbang url, the Prerender service will check and see if it has a snapshot or already rendered page for that URL, if yes, it will send it to the crawler, if not, it will render a snapshot on the fly and send the rendered HTML to the crawler for correct indexing. Alternatively, you can also build support for hashbang URLswhich may require you to set-up your web-server to summon-up the headless html browser.
Mobile Solutions:
ExtJS: Sencha Touch - the industry-leading and high-performance mobile HTML5 framework, is used to develop powerful, universal mobile web apps / mobile website. Sencha touch integration with Cordova/Phonegap is used to develop the cross platform hybrid applications.	AngularJS: AngularJS can be used to develop responsive web apps / websites although all the angular modules are not responsive. To develop the cross platform hybrid applications, integrate AngularJS with Trigger.io Ionic Framework - Advanced Html5 hybrid mobile framework and optimized for AngularJS Cordova/Phonegap
Dom Approach:
ExtJS: It follows the Depth First, Bottom-Up approach.	AngularJS: Directives are linked in a Depth-First, Bottom-Up approach to the DOM tree.Controllers are linked in a top-down manner.
Deferred and Promises: Deferred and Promises break the complexities of asynchronous programming, separate out the synchronous and asynchronous world, remove the tight coupling between the twoThey are for asynchronous programming what try, catch and throw keywords are for synchronous programming.
ExtJS: ExtJS augmented with DeftJS may provide Deferred and Promises.	AngularJS: AngularJS offers an implementation of the Q API for Deferred and Promises.
Dirty Checking Dirty checking in nutshell: The framework compares the old value and new value and if they are different, fires the change event.
ExtJS: ExtJS 4.x uses the store's binding feature to execute the dirty checking. ExtJS store allows you to delay the process of dirty checking via its autoSync config which when set to false, the user changes are marked with dirty flags in UI and are updated in batch when the user saves the store. To reflect the changes in the real data in UI, a little work is to be done like reloading the store etc	AngularJS: Angular uses the Digest Cycle to execute the dirty checking. With Angular api, you do not need to manaually call the digest cycle, angular internally fires digest cycle followed by updation of the dom but from third party api, you need to call $apply method to enter the digest cycle. Changes are reflected in the real data in UI as soon as the digest cycle is finished. The dirty checking is done asynchronously. Cons: Application becomes laggy if there are 2000-3000 watches in a template... more Bindonce is a great way to minimize the number of watches when most of the data presented in your page, once rendered, are immutable and you need not keep watching them for changes.
Deferred bootstrap: Bootstrap means the initialization process. Deferred bootstrap is to make a delay in the bootstrap process to mock out the heavy dependencies or for the instrumentation purposes. Deferred bootstrap is primarily introduced to allow end to end tests. Although deferred bootstrap has no value in the developement and testing of most single page applications, yet it serves its value in AngularJS applications' end to end testing. Some javascript test runners such as Batrang and Angular Scenario Runner (which are developed by AngularJS team for the end to end testing of the angularJS applications) require deferred bootstrap.
ExtJS: Several popular third-party JavaScript testing frameworks such as Siesta (optimized specifically for Ext JS), Jasmine and Mocha, are being used for ExtJS applications testing which do not require deferring the ExtJS application's bootstrap.	AngularJS: Batrang is a new Chrome extension, recommended by the angular team, provides the tools to address performance bottlenecks, visualize and debug applications. AngularJS Batarang and Angular Scenario Runner require Deferred Bootstrap feature to hook into angular's bootstrap process and sneak in more modules into the DI registry which can replace or augment DI services for the purpose of instrumentation or mocking out heavy dependencies.
Digest Cycle in AngularJS: The digest cycle is all about reacting to changes in data. Generally what happens is, the browser's event-loop waits for an event to arrive, as long as it recives an event, it emits the event on the input controls which is then captured in the corresponding directive's event handler which calls apply function, to enter into Angular execution context, with function/expression (the work you wish to do in Angular execution context) as parameter. Model mutation is then executed in apply function with all the error handling followed by the firing of the digest cycle in its finally phase. In all the Dirty Cycle mechanisms, all the watchers in the watch list are iterated and in each iteration watch expression in current scope is evaluated, old and new value of scope is compared and if both values differ,then the corresponding listener of the watcher function is fired which upon execution calls digest cycle again with one of the two possilities: If the listener function does not modify the scope then in the running digest turn, model is declared as stable and digest loop is finished followed by the browser re-painting of the DOM node which was dirty. If scope is modified, then it will fire the other listeners, so the watchers keep re-running until until no more watchers are fired and a max limit of 10 iterations is reached when $digest will throw 'Maximum iteration limit exceeded' to prevent infinite loops. This dirty checking is done asynchronously. Three mechanisms of Dirty Checking: Reference-Based Dirty-Checking: The old value is compared to the new with the strict equality operator=== which detect the new and old values are the same "physical" object.It is the most efficient both in terms of computation and memory, since it doesn't do copying or traversal. It merely keeps a reference to the value around for comparison. Value-Based Dirty-Checking: It performs a deep-object-tree comparison.This means that within each $digest cycle, AngularJS will check to see if the new and old values have the same structure. Collection-based dirty checking: It works by comparing physical object references. Collection watchers keep an internal copy of the array or object, and traverse the old and new values in each digest cycle, checking for changes using the strict equality operator === i.e. unlike the reference based dirty checking, it goes one-level deep and performs an additional, shallow reference check of the top level items in the collection. Cons of dirty checking: Application becomes laggy if there are 2000-3000 watches in a template. Although anything faster than 50ms is imperceptible to humans and you can't really show more than about 2000 pieces of information to a human on a single page because anything more than that is really a bad UI and humans can't process this anyway, yet while building any sort of widget or data grid with two-way binding you may easily hit 2000 bindings without the bad UI. Watcher: By default all the model data that is bound to UI are being watched upon i.e. they all have a watcher registered in the watch list, a collection used by digest cycle for the dirty checking. You can also attach a watcher to the scope by using $watch function. A watcher has two functions: A watch function or a watch expression, which specifies the piece of data you are interested in. A listener function which will be called whenever that data changes. Asynchronous nature of dirty cycle: Assignment such as $scope.username="angular" will not immediately cause a $watch to be notified, instead the $watch notification is delayed until the $digest phase. This delay is desirable, since it coalesces multiple model updates into one $watch notification as well as it guarantees that during the $watch notification no other $watches are running. If a $watch changes the value of the model, it will force additional $digest cycle.
ExtJS 5 Beta:Recently launched ExtJS5 Beta version provides support for router and hence deep linking is now possible.ExtJS 5 also supports MVC and MVVM.We will review and update the article as and when new and stable versions of ExtJS and AngularJS are released.