ExtJS and AngularJS Frameworks

ExtJS and AngularJS are the two industry leading frameworks for Rich UI development.
This article compares these two frameworks over 30+ points around benefits, architecture, testing, mobility, performance, build and deployment among other things.

Architectural Differences:
* Application Design Framework
* Components
* Routing benefits
* Testability
* Data Binding
* SEO Friendly
* Mobile Solutions
* Dom Approach
* Deferred and Promises
* Dirty checking
* Deferred bootstrap

Summary:ExtJS is component based (Grid, Tree, Forms, Charts); the code begins with extending API classes and configuring models, customizing the presentation or behavior/events if needed, adding these components to containers/layouts. It follows object oriented principles and MVC pattern and direct interaction with DOM is rarely needed.

AngularJS, on the other hand, is declarative programming, we begin with adding AngularJS directives in plain HTML, configuring models, view configuration using templates and routes; and the framework takes care of final DOM creation. Since we are dealing with HTML, there is a direct interaction with HTML structure or DOM elements.


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.

Performance Comparison Stats

To evaluate the performance aspect of these two frameworks, we developed a small application with a simple grid, tree and a chart component. The prescribed build process for both these technologies were performed - so we can have minified builds for exact weight comparison. YSlow was used to collect the performance metrics. Other details:

• ExtJS: using grid, tree and chart components.
• AngularJS: using 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 modules.
• The same http requests, for the data part of these components are used, going to the same web server.
• Conclusion: ExtJS is 3 times heavier than AngularJS.

EXTJS:

If we use ext-all, then the stats are:



AngularJS:

When to use which framework:

Use ExtJS if:

• You want to use handy components delivered with Sencha Ext JS. It is a huge time saver.
• You do not want to worry regarding cross compatibility issues while Programming and Developement. It is a big plus.
• You or your client need specialized licensing or an accountable party to call for support.
• If separate rich desktop applications (with Sencha ExtJS) and mobile web applications (with Sencha Touch) is valuable.
• If paid support contracts and a per-seat / per-server commercial license is affordable.

Use AngularJS if:

• Smaller Footprint is required. For more details, see the Performance Comparison Stats.
• Responsive design is a requirement for your application.
• Your organization find value in automated testing and automated testing is a part of your development culture.
• It would be cheaper to integrate existing 3rd-party components which are free.
• Your team is comfortable with CSS and dealing with cross-browser compatibility issues.
• If the team will be able to manage integrating new releases and bug fixes from the selected 3rd-party libraries throughout the application's development lifecycle.

Application Design Framework:
Ext JS: It follows MVC framework. As ExtJS application size and complexity increases, Sencha Touch and Ext JS can be augmented with Deft JS to add an Inversion of Control (IoC) container, for dependency injection and dynamic application assembly. It is component-based and hence modular.	AngularJS: AngularJS is HTML enhanced for web apps. It is described as a 'Model-View-Whatever' framework in which it does not prescribe a specific application architecture or set of patterns. However it is sufficiently flexible to support popular patterns such as Model-View-Controller or Model-View-ViewModel. It is module based. It autowires the dependency modules within the html elements.
Components:
Ext JS: One of the primary attributes that distinguishes ExtJS from other JavaScript frameworks is the inclusion of a rich suite of theme-able UI components. Pros: The handy components delivered with Ext JS are a huge time saver. Cons: Sencha components tend to produce verbose DOM output, resulting in many more tags that might otherwise be required.	AngularJS: What AngularJS does not address is a rich library of user interface components. However, there are a number of open source and commercial components which provide integration for AngularJS including AngularUI, AngularUI Bootstrap, Kendo (and Angular-Kendo), Wijmo and others.
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 URLs which 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 two They 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. Routing benefits:
ExtJS: ExtJS does not have a router. However most of the single page applications may not require a router unless you want to make internal/deep-linked pages as seo friendly or with bookmark support.	AngularJS: AngularJS router wires together controllers, view templates, and the current URL location in the browser. Using this feature we can implement deep linking. Deep linking consists of using a hyperlink that links to a specific, generally searchable or indexed piece of web content on a website. It lets us utilize the browser's history (back and forward navigation) and browser's bookmarks feature.
Testability:
ExtJS: Applications built with Sencha's framework can be tested using several popular third-party JavaScript testing frameworks such as Siesta (optimized specifically for Ext JS), Jasmine and Mocha. The Sencha product suite does not include a testing framework or test runner.	AngularJS: AngularJS was designed from the ground up to create testable applications. It supports all three facets of automated testing: unit, integration and functional testing. The AngularJS team has also developed its own Karma test runner. In addition, 3rd party tool Protractor is the end to end test framework for Angular apps.
Two way data binding: Two way data binding is a glue between the application UI (User Interface) and model objects, so that changes to an object’s properties reflect in the UI and vice-versa.
ExtJS: ExtJS has excellent data binding feature using its Store object. To execute two way data binding, a little work needs to be done such as reloading the store etc. Reference: http://www.techferry.com/articles/ExtJS-vs-AngularJS.html	AngularJS: Two way data binding in AngularJS is executed with the scope which is basically a model nested in a prototypal inheritance tree of scopes (models). Cons: Application becomes laggy if there are 2000-3000 bindings in a template. 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.