Comparison of ExtJS and Angularjs

Original address: http://www.techferry.com/articles/ExtJS-vs-AngularJS.html

ExtJS and Angularjs are two enterprise-class, rich UI design frameworks. This article compares ExtJS and AngularJS from various aspects, such as superiority, architecture, testing, performance, etc.
We developed a simple test application with ExtJS and Angularjs to perform a complete performance test. We select the same components and standardize the testing process to ensure the results of the test. ExtJS vs AngularJS: Feature comparison Performance comparison Frame comparison Schema comparison Further analysis	Sencha Ext JS A powerful enterprise-level development framework Good browser compatibility Framework development based on MVC Icon Plugin Modern UI Widgets	AngularJS HTML Enhancements for Web Apps Can work with other class libraries Open source JavaScript framework, Google Maintenance Declarative programming methods
Sencha ExtJS and Angularjs contrast
Serial Number Features ExtJS AngularJS 1. UI App Store ? ? 2. Rich UI Component Styles ? Fortunately, Angularui already contains many open source components, Angularui Bootstrap, Kendo (and Angular-kendo), Wijmo, and others. 3. Develop a single page application ? ? 4. Cross-browser compatibility ? AngularJS is based on jqlite/jquery for browser compatibility. However, its integrated third-party components do not necessarily support cross-browser compatibility. Note: Anugularjs (1.3 and later) removed support for IE8. If you need support for IE8, select ExtJS 5. Drawing components The ExtJS contains a separate drawing component, which is very powerful. is sufficient in most enterprise applications The AngularJS D3 drawing component is based on the D3 drawing component provided by Amazon. Please see D3 charts at D3.js for details. 6. Learning costs High Medium Architecture 7. Application Design Framework ExtJS 5 supports MVC (Model-view-controller) and MVVM (Model-view-viewmodel) MVW (Model-view-whatever). It supports popular design patterns such as Model-view-controller (MVC) and Model-view-viewmodel (MVVM) 8. Dependency Injection Ext JS can increase dependency injection by extension (Deft JS) ? 9. Data binding ? ? 10. Manipulating DOM elements directly ? ? 11. Modular ? ? Test 12. Automated Test support By extending the tool to implement ? 13. Test Framework or test tool Many third-party testing frameworks, such as Siesta (specifically optimized for ExtJS), Jasmine and Mocha can be used for EXTJS testing The AngularJS comes with a karma for end-to-end testing. Protractor is the framework for end-to-end testing of Angular apps Performance 14. Dom algorithm Depth first, bottom up For Dom trees, directives are depth-first, bottom-up algorithms. And for the controller is the way from the top down. 15. Performance Highly encapsulated, so the ExtJS is relatively slow In our performance test, AngularJS is 3 times times faster than ExtJS. 16. Lightweight-Download the package ? ? Mobile side 17. Mobile-side support for Web apps Sencha recommends Sencha touch to develop a mobile version. Some components, such as nestedlist, are better than grids on the mobile side. This means that you need to develop a standalone mobile app. Implement responsive Web applications using the Ng-touch library, Angular-gestures, and AngularJS response modules 18. Cross-platform mobile applications or hybrid applications Use Sencha Touch and Apache cordova/phonegap integration to achieve Angularjs uses Trigger.io, CORDOVA/PHONEGAP integration, Ionic framework to develop rich and robust mobile applications 19. Mobile Site Sencha Touch is used to develop mobile sites. AngularJS Response Module (angular-responsive, Angular-deckgrid, etc.), UI Bootstrap, AngularJS responsive directives, angular-gestures and the Ngtouch library. Routing 20. Built-in routing ? ExtJS 5 is included ? 21st. Deep links ? ExtJS 5 is included ? 22. Browsing history, forward and backward support ? ExtJS 5 has been introduced Implemented through Ext.util.History in earlier versions ? 23. Browser Favorites Support ? ExtJS 5 has been introduced ? 24. SEO Support For most single-page applications, access is based on permissions, so there is no need for SEO. For publicly available pages, consider using Ajax based SEO. Consider Ajax based SEO with either Prerender.io or headless browser in your web-server. Deployment 25. Compiling tools ExtJS 4.x or later use Sencha command tool Sencha SDK Tools for upgrading ExtJS 3.x Third-party grunt tools 26. Package Management Tools Sencha cmd tool Yeoman, Grunt and Bower Licensing and Support 27. Agreement Per-seat/per-server Commercial License and open source software based on GPL license Open source JavaScript framework, based on the MIT license. 28. Complete stability, tutorials, food, case ? ? 29. Support: General discussion, bug submission, development of new feature requests Basic support and paid support Fully supported 30. Full extent: Integration of third-party controls, no issues caused by third-party control bugs ? ? Other 31. Animation effect Support ? ? 32. Deferred and Promises Deftjs provides a number of extensions for ExtJS, including Deferred and Promises. ? 33. Dirty Checking ? ? 34. Deferred Bootstrap Until now, ExtJS applications ' testing have never required delay in the Bootstrap as Third-party JavaScript testing Framewo Rks which is used for EXTJS application testing does 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.
Performance comparison in order to compare the performance of all two frames, we have developed an application that contains simple tables, trees, and drawing components. Standardize the process of building applications using these two technologies-so that we can build a minimal application for in-depth testing. YSlow is used to collect performance data. Other aspects: ExtJS: Working with tables, trees, and drawing 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. Same HTTP request, all data from the same server Conclusion: ExtJS is 3 times times slower than Angularjs ExtJS: AngularJS: If we use Ext-all and then the stats is:
The specific usage environment for both frameworks uses ExtJS: You want to use a powerful ExtJS component. This will save a lot of time. You don't want to worry about compatibility issues. It's a big highlight. You and your client need a special license or need special support If the desktop app and mobile app are two sets of programs. If you are willing to pay support fees Using AngularJS: Require smaller packages to be used Responsive design Required Automated testing required Integrating third-party components Your team is able to debug CSS and resolve browser compatibility issues Your team is able to resolve bugs in third-party components

Different schemas:
We analyze the differences between the two technologies in 11 ways. Application Development Framework Component Routing Test Data binding Seo Mobile Solutions Dom algorithm Deferred and Promises Dirty Check Deferred Bootstrap	Summary: ExtJS are component-based (tables, trees, forms, drawings), code begins with extensions to existing classes, configures models, customizes displays and behaviors/events, and joins these components into the container/layout. It follows object-oriented design concepts and MVC design patterns, and rarely directly manipulate DOM elements AngularJS, walking is another road, is a declarative program. Add ANGULARJS directives to the HTML tag, configure the model, use templates and route configuration views, and the framework eventually implements the creation of the DOM. We are still working with DOM elements based on HTML schemas
Application Design Framework
EXT JS: Support for MVC and MVVM With the increase of EXTJS application scale and complexity, Sencha Touch and Ext JS can realize dependency injection through Deft JS. It is component-based, modular	AngularJS: ANGULARJS is an HTML extension for Web apps. It is described for the ' model-view-whatever ' framework, and it does not provide for the use of specific development frameworks. But it's very easy to support Model-view-controller or Model-view-viewmodel. It is modular. It automatically dials the dependency injection module in the HTML element
Component:
EXT JS: The biggest difference between ExtJS and other JavaScript frameworks is having a powerful set of UI components Benefits: Complete component system, can greatly reduce development time Harm: ExtJS components generate lengthy DOM code, which can affect efficiency	AngularJS: AngularJS does not have a complete library of components However, there are a lot of third-party components, such as Angularui Bootstrap, kendo (and Angular-kendo), WIJMO, etc.
Routing:
ExtJS: ExtJS 5 Support Routing ExtJS 5 Routing enables application state tracking by using the browser history stack It allows deep linking to the application. Allow direct link to one part of the application It supports browser favorites and browser forward/backward navigation	AngularJS: The Angularjs route links controllers, view templates, and the browser's current URL address. Using this feature, we implemented a deep link Using a deep link enables you to navigate to a specific location on this page using a hyperlink. It allows us to use browser history (forward/backward navigation) and browser favorites
Test
ExtJS: ExtJS applications can be tested using third-party test frameworks, such as Siesta (specifically for EXT JS optimization), Jasmine and Mocha. Does not include test frameworks and test tools on its own	AngularJS: Angularjs at the beginning of the design, it takes into account the testability of the application Support Unit testing, integration testing and functionality The AngularJS team developed the Karma test tool. In addition, third-party tool protractor can also be used for ANGULARJS testing
Data binding bidirectional data binding is the link between a page UI and a data model, and changes the model's data, and the page UI can respond synchronously
ExtJS: ExtJS 5 components have a new binding configuration to implement this functionality in earlier versions of ExtJS, the store object was used to implement this functionality. But there is still some work to do, such as loading the store and so on	AngularJS: AngularJS The scope of the bidirectional data map execution, is a nested model based on a prototype inheritance tree scope   ( Models). Cons: If there are 2000-3000 bound applications in the template will be slower   Bindonce is a great way to reduce monitoring when many of the data is present on the page. Once the rendering is complete, it does not change, and you do not need to monitor its changes
seo:most of the single page apps which work behind authentication need not being indexed for SEO. If you have some pages in your app which is public and which needs to be indexed, you can create them separately, either With the static html/css or if need to use dynamic content, consider Ajax based SEO as described below.  ajax based SEO:  for The indexing of dynamic/ajax-based single page Web apps, all of which have to do are T o Generate the additional static content so this when the crawlers access your page, they get easy access to that static C Ontent and when the users access your page, they see the app. To achieve the functionality you could either the use some tools like Prerender.io:fully Open-source or you had to set up t He headless browser support in your Web-server which are 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 would check and see If it has a snapshot or already rendered page for that URL, if yes, it would send it to the crawler, if not, it'll rende R 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 t He headless HTML browser.
Mobile Solutions:
ExtJS: Sencha Touch-An enterprise-class, high-performance mobile HTML5 framework for developing powerful, robust mobile apps or mobile sites. Sencha Touch integrates cordova/phonegap for cross-platform hybrid applications.	AngularJS: AngularJS can be used to develop responsive Web applications/sites. To develop cross-platform hybrid applications, ANGULARJS integrates the following components Trigger.io Ionic framework-advanced HTML5 Hybrid mobile Framework and optimized for AngularJS Cordova/phonegap
Dom algorithm
ExtJS: Depth-first, bottom-up	AngularJS: Directives is linked in a depth-first, bottom-up approach to the DOM tree. Controllers is linked in a top-down manner.
Deferred and promises:deferred and Promises break the complexities of asynchronous programming, separate out the Synchrono US and asynchronous world, remove the tight coupling between the and the They is for asynchronous programming what try, catch And throw keywords is 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 check dirty check: frame compared to old value and new value, if they are inconsistent, trigger change event
ExtJS: ExtJS 4.x uses the store's binding feature to implement dirty checking. The ExtJS store allows you to delay dirty check behavior by setting AutoSync to False. User changes to the data, will be on the UI to put up a tag, when the store update, the ability to batch submit these updates. It takes a little bit of work to show the changes in the data to the UI, like reloading store data	AngularJS: Angular using digest Cycle for dirty checking With the angular API, you do not need to handle it manually, angular will automatically recycle dirty data. But for third-party APIs, you need to call the $apply method to reclaim dirty data. When dirty data is reclaimed, changes to the data are rendered on the UI. The Dirty check is asynchronous
Deferred Bootstrap:bootstrap refers to the process of initialization, Deferred Bootstrap is used to delay the startup process from loading heavy, heavily dependent files or targets. The Deferred bootstrap is primarily used for end-to-end testing. Although deferred bootstrap is not meaningful for development and single page application testing, it is useful for end-to-end testing of ANGULARJS applications. Some JavaScript test tools, such as Batrang and Angular Scenario Runner (Angularjs team Development, end-to-end testing for ANGULARJS projects) need deferred bootstrap.
ExtJS: A variety of popular JavaScript test frameworks, such as siesta (designed for Ext JS optimization), Jasmine and Mocha, do not need to delay the launch of the Ext JS application	AngularJS: Batrang is a new angular team-recommended chrome plugin that provides a tool to show application performance bottlenecks and apply Debug. AngularJS Batarang and Angular Scenario Runner require Deferred Bootstrap feature to hooks into Angular ' s Bootstrap process and sneak in modules to the DI registry which can replace or augment DI services for the purpose of Instrumentatio n or mocking out heavy dependencies.
Digestive Cycle of Angularjs: The digestive cycle refers to the corresponding period of data change. In general, the browser's Event-loop waits for an event to arrive when it receives an event, emits an event on the input control, captures this event for the event handle, triggers the corresponding function, and passes it as a parameter into the execution context of the ANGULARJS. The function will implement the change of the model, at the end of the digestion period, the exception handle will be triggered In all digestive cycle mechanisms, observers in the watch list iterate through the expression of each observer, get to a specific scope, the new value in the scope and the old value will be compared, determine whether the change, and then the corresponding function will be executed. In this case, the following two scenarios may occur: If the listener function does not change scope, the browser will re-mark the DOM element as dirty data, then the model will be declared as stable, and the digest cycle ends. If the scope changes, the other listener is triggered, and the observer remains in the running state until no other observer is triggered. A Maximum iteration limit exceeded ' error will be thrown if the 10 observer is triggered by a multi-ability Dirty data check see asynchronously. three kinds of dirty data check mechanism reference-based dirty data check: use = = = to compare new and old values. This approach is best for both memory and computation, because it does not require copying or traversing data. It just makes reference comparisons. value-based dirty data check: It does a depth-to-object-tree comparison. This means that in each $digest cycle, AngularJS will check whether the old and new data have the same structure. Collection-based dirty data check: It compares physical object references. The set observer maintains a copy of the values for arrays and objects, iterates through the old and new values in each digest cycle, and compares the changes by = = =. For example, unlike reference-based dirty data checking, it goes one-level deep and performs a additional, shallow reference check of the top level items in the Collection. key points of the dirty check: If a model has 2000-3000 observers, the system slows down Even if your app is fast enough that users won't feel the delay, you won't be able to display 2000 of messages directly to the user on one page. Because this is a bad UI design, the user will be touched at a loss, but, using a sorting component or a table with two-way binding function, you can well organize these 2000 pieces of data to give users a better presentation. observed by: By default, all model data that is bound to the UI is observed. For example, they all have an observer registered on the watch list. You can also manually trigger the observer via the $watch function. An observer has two functions: an observation function and an observation expression. The observation function is the listener function that is triggered when the data is changed, and the observation expression is to determine which data needs to be observed (scope). asynchronous nature of dirty cycle: By assigning values, such as $scope. Username= "Angular", the $watch is not triggered immediately, but only at $digest stage. The benefit of this delay is that multiple models of update operations can be combined into a $WATCH message notification, so that the $watch notification runtime can be ensured, no other $watches is allowed. If a $watch changes the value of the model, it will be added to the $digest cycle

Comparison of ExtJS and Angularjs