应用程序设计框架 |
|
| Ext JS: | AngularJS: |
|
组件: |
|
Ext JS:
Ext JS区别于其他框架的一个主要特性就是包含一套有丰富的主题能力的UI组件。
Pros:
使用Ext JS提供的方便的组件可以节省大量时间。
Cons:
Sencha组件往往会产生冗长的DOM输出，其结果就是需要更多标签。
| AngularJS:
|
|
路由的好处 |
|
ExtJS:
Ext JS没有路由。不过，许多单页面应用程序可能不需要路由，除非你希望通过内部/深度链接来实现SEO友好性或支持书签。 | AngularJS:
|
|
可测试性: |
|
ExtJS:
| AngularJS: |
|
双向数据绑定:双向数据绑定是应用程序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
|
|
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 CheckingDirty
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:
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. |
|