【翻译】ExtJSvsAngularJS-创新互联

• 业界最强大的富界面应用程序开发框架

• 无与伦比的跨浏览器兼容性

• 先进的MVC架构

• 无插件的图表

• 现代UI部件

• HTML增强的Web应用程序

• 与其他库的完整扩展能力和好的协同表现

• 开源的Javascript框架，由谷歌维护

• 声明式编程

应用程序设计框架

• 遵循 MVC框架.

• 随着Ext JS应用程序的大小和复杂性的增加，Sencha Touch和Ext JS可以通过加入Deft JS来添加Ioc容器、针对依赖注入和动态应用程序的程序集。

• 基于组件和hence模块

• AngularJS是增强的HTML Web一个月程序

• 它被描述为“Model-View-Whatever”框架，它没有规定是哪一种特定的应用程序架构或哪一套模式。然而，它足够灵活去支撑流行的模式，如模型-视图-控制器或模型-视图-视图模型。

• 基于模块。依赖于模块内的html元素。

组件:

Sencha组件往往会产生冗长的DOM输出，其结果就是需要更多标签。

• AngularJS不能解决的问题是没有丰富用户接口组件。

• 不过，有大量的开源或商业组件可以集成到AngularJS，包括AngularUI、AngularUI Bootstrap、Kendo (或 Angular-Kendo)、 Wijmo以及其他。

路由的好处

• AngularJS路由连接着浏览器中的控制器、视图模板和当前URL定位。使用该特性就可实现深度链接。

• 深度链接是由网站中指定的、可搜索的或可索引的内容块的连接所组出的超链接。它可以让我们利用浏览器的历史记录（后退或前进导航）已经浏览器的书签功能。

可测试性:

• 使用Sencha框架生成的应用程序可使用几个流行的第三方javascript测试框架来测试，如Siesta（基于Ext JS进行了优化）、Jasmine和Mocha。

• Sencha产品套件没有包含测试框架或测试运行器。

• AngularJS从创建之初开始就被设计为可测试的应用程序。

• 它支持三方面的自动化测试：单一、集成和功能测试。

• AngularJS团队还开发了它自己的Karma测试运行器。另外，第三方工具Protractor是针对Angular应用程序的端到端测试框架。

双向数据绑定:

SEO Friendliness:

• 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:

• 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 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:

Deferred and Promises:

Dirty Checking

• 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

• 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.

• Application becomes laggy if there are 2000-3000 watches in a template... more

Deferred bootstrap:

• 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.

• 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.

• 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.