标签：
原文地址：http://www.techferry.com/articles/ExtJS-vs-AngularJS.html
|
ExtJS 和AngularJS 是两种企业级的富 UI设计框架。 这篇文章从优势、架构、测试、性能等各个方面比较了 ExtJS 和 AngularJS |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Sencha ExtJS 和 AngularJS对比 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
性能比较为了全方位比价两个框架的性能，我们开发了一个包含简单的表格，树，绘图组件的应用。规范使用这两种技术构建应用的过程 - 这样我们能够构建一个尽量小的应用来进行深度的测试。 YSlow 用于收集 performance数据。其他方面：
 AngularJS:  If we use ext-all, then the stats are:  |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
两种框架的具体使用环境使用 ExtJS：
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
架构的不同： |
||
|
我们从11个方面来分析这两种技术的不同.
|
摘要： |
|
应用设计框架 |
||
Ext JS：
|
AngularJS：
|
|
组件： |
||
| Ext JS： ExtJS和其他javascript框架最大的区别，就是拥有一套强大的UI组件 好处： 完整的组件体系，能够大大的减少开发时间 坏处： ExtJS的组件会生成冗长的DOM代码，这样会影响效率 |
AngularJS：
|
|
路由： |
||
| ExtJS： ExtJS 5 支持路由
|
AngularJS：
|
|
测试； |
||
ExtJS：
|
AngularJS：
|
|
数据绑定双向数据绑定是连接页面UI和数据模型的纽带，及更改模型的数据，页面UI能够同步响应 |
||
ExtJS：
|
AngularJS： AngularJS的双向数据映射执行的作用域，是基于一个原型继承树作用域的嵌套模型 (models). Cons： 如果模版中有2000-3000个绑定应用程序会变慢 当许多数据呈现在了页面上的时候，Bindonce是一种很好的方法来减少监视。一旦渲染完成，就不会改变，你不需要在对其改变进行监视 |
|
SEO：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 create them separately, either with static HTML/CSS or if you do 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 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:
|
|
移动解决方案： |
||
ExtJS：
|
AngularJS:
|
|
Dom算法 |
||
| ExtJS： 深度优先、自底向上 |
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. |
|
脏检查脏检查：框架比对旧值和新值，如果他们不一致，就触发change事件 |
||
ExtJS：
|
AngularJS：
|
|
Deferred bootstrap:Bootstrap指的是初始化的过程，Deferred bootstrap用于延迟启动进程加载很重、很大的依赖文件或者目标。 Deferred bootstrap主要用于端对端测试。虽然deferred bootstrap对于开发和单页应用测试没有意义，但是它对AngularJS 应用的端对端测试很有用。一些javascript测试工具，比如 Batrang 和 Angular Scenario Runner (AngularJS团队开发的，用于AngularJS项目的端对端测试) 需要 deferred bootstrap. |
||
| ExtJS: 多种受欢迎的JavaScript 测试框架，比如Siesta (专为 Ext JS 优化), Jasmine 和 Mocha，并不需要延迟EXT JS应用程序的启动 |
AngularJS:
|
|
AngularJS的消化周期:
如果一个模型有2000-3000个观测者，那么系统会变慢 就算你的应用足够快，使用户不会感到相应延迟，你也不能直接在一页上展示2000个信息给用户。因为这是一个很坏的UI设计，用户会感动无所适从，但是，使用排序组件或者具有双向绑定功能的表格，你能够很好的组织这2000条数据，给用户更好的展现。 观测者： 默认情况下，所有绑定到UI的模型数据都被观察。比如，他们都有一个观测者注册到了观察列表上。你也可以通过$watch 函数手动触发观测者。一个观测者有两个函数：一个观察函数和一个观察表达式。观察函数是用于数据改变时被触发的监听函数，观察表达式是确定那些数据需要被观察（作用域）。 Asynchronous nature of dirty cycle: 通过赋值，比如 $scope.username="angular" ，并不会马上触发$watch，而是在 $digest 阶段才会触发。这个延迟的好处，是可以将多个模型的更新操作，合并到一个$watch消息通知中，这样，可以确保这个$watch通知运行时，没有其他的 $watches 在允许。如果一个$watch改变了模型的值，它就会被加入$digest周期 |
||
标签：
原文地址：http://www.cnblogs.com/animal/p/4267109.html
Sencha Ext JS
AngularJS