第一次了解Angular JS的时候,让曾经使用GWT(Google Web Toolkit)的我豁然开朗,看着我们的大型应用被精简了90%的代码,这简直是一种难以置信的体验。于是我开始转向AngularJS,因为我意识到了以前的方式有多低效。
从那时开始,我与AngularJS结缘,了解AngularJS如何使用数据绑定、模板、路由、单元测试等等,它使问题变得极为简单。但是,有些事情并不合理,比如命名和一些概念。我在学习使用的过程中,同样也无法喜欢如此复杂的指令,而且内置路由方式也有一些限制。
AngularJS虽然能使编写应用程序简单化,但如果你不懂工作原理,也同样会使你的编程速度减慢,代码又难以维护。
随着AngularJS和相关文档的逐步更新,情况开始变好。
- 数据绑定性能随着版本的演进得到提升
- AngularJS文档进行了重大的变革,使其更容易使用和理解
- 路由选择变成了可选模块
- 在社区中,人们建立了一些模块和插件来提高性能,从本地化/转换(angular 转换)到更好用的路由(ui-router)再到你可能需要的其他任何东西。
AngularJS 从1.0版本到1.3版本已经经历了许多重大变化,改善了AngularJS几乎每一个部分。很明显,它已经从一个实验性MVC框架发展成为一个稳定且支持良好的框架,被大量使用。我去年在 workshops on AngularJS 做的工作比之前加起来的总和还多。
但是AngularJS的核心团队(同时也在成长)并没有止步不前。在1.3版本之后,不仅仅是改进,他们的团队准备解决的问题被称为AngularJS 2.0,考虑到开发人员的反馈,和来自其他出色框架的灵感,AngularJS 2.0的目标是迈出从AngularJS 1.0发布以来的革命性的一步。和上次不同的是,社区已经充斥着相关设计文档(design docs available)的讨论。这就是为什么你应该期待AngularJS 2.0的原因(当然,它发布的时候还会有任何可能的改变)。
前瞻性
AngularJS 1.3已经放弃支持IE8,AngularJS 2.0看上去也会继续这个趋势,专注于桌面端更快更新的浏览器(IE10/11, Chrome, Firefox, Opera & Safari) ,和Android, iOS6+, Windows Phone 8+ 上的Chrome & Firefox 手机端。这样会使AngularJS代码库是短而简洁的(不需要hacks老版本浏览器),同时也使AngularJS能支持最新的和最好的功能,而不用担心向后兼容性和polyfills。希望在AngularJS 2.0推出的时候,它能兼容大多数浏览器的标准,使得开发人员可以更加专注于开发应用。
ECMAScript 6 + 返回依赖注入
ECMAScript 6将会是近几年JavaScript的新标准:一个有着原生js类支持的真正面向对象的语言、优秀的类模型和AMD(异步模块依赖关系),大量语法的改进使它更简洁,代码更具有声明性。整个AngularJS 2.0代码将基于ES6而写,但是你可能会想,现在还没有浏览器支持所有的ES6的特性——这对我们开发者而言意味着什么?
不要担心,尽管整个AngularJS会基于ES6而写,但是使用 Traceur compiler能编译出ES5标准(ES5我们现在也称为Javascript)。AngularJS同样也增加了对Traceur compiler注释和断言的支持。通过添加注释来替代糟糕的语法(就是目前的依赖注入,还能有什么呢?),会使你写的AngularJS的应用更具有声明性。所以这样写AngularJS代码的速度会非常快(尽管不一定是最后的语法)。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Inject(CoffeeMaker, Microwave) class Pantry { constructor(coffeeMaker, microwave) { this.coffeeMaker = coffeeMaker; this.microwave = microwave; } makeCoffee(finishedCb) { this.coffeeMaker.turnOn(); this.coffeeMaker.makeCoffee(finishedCb); } } |
AngularJS 2.0 将与ES5完全向后兼容(必须这样),如果你想,你可以继续写等效语法,而不用考虑ES6的语法。And AngularJS 2.0 will be fully backwards compatible with ES5 (it has to be), so you can continue writing an equivalent syntax without ever having to deal with ES6 syntax, if you so decide.
更快,平滑流畅
现在,所有东西都需要变得更快,如60帧读取时间要小于400ms等等。在2.0版本中,同样也将专注于速度。UI更新到底能有多快?如何加快数据绑定?一种方法就是使用Object.observe替换AngularJS现在的脏检查机制(dirty-checking),这是一个为模型更改监听器添加原生支持以及数据绑定的方案。AngularJS 2.0将完全使用这个以更好的加快数据绑定和更新周期。
但是Object.observe现在只被Chrome canaries 支持,离Chrome canaries 成为所有浏览器的默认标准似乎还有很长一段时间。感谢AngularJS工作人员一直在努力改善检测功能,并在浏览器没有Object.observe支持的情况下,显著改善了对象和数组的脏检查机制(dirty-checking)。他们的目标是能在1ms内处理数千的绑定,设计文档(design doc)上有AngularJS 2.0将如何处理这个问题。
灵活路由
路由是AngularJS 1.0版本的核心功能,并在1.2版本(ngRoute)中成为可选模块。其中的一部分来源于开源社区的一些适用于多样需求的优秀作品,这就像孩子和兄弟那样。UI-Router进一步处理了这些优秀的特点,并提供与ngRoute相似的语法。
2.0版本的目标是将某些功能(嵌套状态、同级视图)加入AngularJS核心路由。在此同时,AngularJS路由还有很多不容易解决的问题:
- 基于状态的转换: UI-Router支持基于状态的转换,但 UI-Router并不是AngularJS的核心路由模型的一部分,所以不同的URL/应用的响应视图部分的上级状态和同级状态,将会具有声明性以及成为AngularJS 2.0路由的一部分。
- 身份验证和授权:这个已经在 AngularJS中解决了,但AngularJS 2.0将引入一个更通用的和容易理解的语句来支持授权和身份验证,并能够进行如下状态请求:
- 用户请求登录
- 只有管理员可以访问某个页面
- 只有某一管理组的成员可以操作管理部分
- 状态保留:在AngularJS当前版本中,如果用户迅速切换UI中的来回路径中的前进和后退,这些路径的控制器和视图每次都被销毁并重新创建。这或许不是最优的解决方案,因此,AngularJS 2.0将设法解决保存状态之间的转换(通过一个LRU缓存或类似的东西),从而实现用户视角上更快、更优的状态转换。
数据持久性
AngularJS 2.0最后一个难题就是持久性问题。AngularJS是纯XHR请求支持,(通过 $http
和 $resource
)套接字要通过第三方服务和集成包使用,并通过基础应用的本地储存实现线下支持。这些已经成为应用中再普通不过的事了,所以现在看来,增加AngularJS核心的通信和持久性功能是必须的。以下是扩展计划:
- 第一阶段,将在每个基础项目的可选模块中支持Http通信(使用 ngHttp), 本地储存,会话储存,索引数据库访问(通过 ngstore)和网络套接字API(通过ngWebSocket)。
- 第二阶段将在此基础上构建线下优先的应用,能够检查连接状态,离线缓存数据等等。
- 第三阶段的最终目标是建造ngData模型,让开发者能创建表现数据的模型类,并将其作为第一阶段和第二阶段模块之上的一个抽象层。因此,它需要能够处理离线访问、查询网络,抓取页面等等。
数据持久性的目的是提供给开发者能够声明式的创建api和范式的工具和语言,以获取他们的数据模型和访问方式并展示给用户。构建线下优先(offline-first)或实时多用户存在应用的功能现在可能只有AngularJS核心模块才能实现。
总结
本文粗略地介绍了AngularJS 2.0承诺或试图做的表面上的重要改革。虽然我们距离AngularJS 2.0首个不稳定版本的发布都还要几个月,但对所有开发者的而言,AngularJS 2.0的未来都是令人兴奋的。
编者按:想了解AngularJS详细情况并如何构建结构化的web应用程序,需要看下“AngularJS:启动并运行”这本书(“AngularJS: Up and Running” 作者:Shyam Seshadri 、 Brad Green)