Architectural Differences:

We have tried to classify architectural differences between ExtJS and AngularJS along the following 10 dimensions.

1. Application Design Framework
2. Components
3. Routing benefits
4. Testability
5. Data Binding
6. SEO Friendly
7. Mobile Solutions
8. Dom Approach
9. Deferred and Promises
10. Dirty checking
11. 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.

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