Angular 2.0 的设计方法和原则

转载自：Angular 2.0 的设计方法和原则

在开始实现Angular 2.0版本之际，我们认为应该着手写一些东西，告诉大家我们在设计上的考虑，以及为什么做这样的改变。现在把这些和大家一起分享，从而有助我们做出正确选择。

Angular 2 是一个针对移动应用的框架。它同时也支持桌面环境，但是移动端是难点，我们把它放在第一位。你了解并且喜爱的Angular还在那里，数据绑定，可扩展的HTML，以及专注可测试开发。

Angular 2 所有的设计文档都公开在Google Drive上。而这篇文档概括了我们的方法和设计原则，文中的一些链接指向特定的设计文档。

警告：我们仍然在Angular 2 的设计和原型开发阶段。所以这篇文中的有些东西可能会跟我们的最终产品不一样，甚至完全不存在。

为未来而设计

我们基于未来人们的使用方式而设计Angular 2。尤其，这意味着我们的针对是现代浏览器以及使用ECMAScript 6.

现代浏览器

现代浏览器是指那些“永远绿色”或者总是能自动更新到最新版本的浏览器。针对这些浏览器的开发让我们扔掉了很多深入篡改和变通方案，而这些正是让Angular的使用和开发更加困难的罪魁祸首。

目前这些浏览器包括Chrome、FireFox、Opera、Safari和IE 11。在移动端，我们的支持列表包括Android、IOS6+、Windows Phone 8+上的Chrome，FireFox移动版等。我们在研究对Android老版本的支持，但是还没有决定下来。

是的，现在仍然有很多老的浏览器在被使用，但是当Angular 2准备好的时候，我们现在针对的这些浏览器将会是主流，而且如你一样优秀的开发人员肯定已经在上面开发过一段时间的应用了。

ECMAScript 6+（设计）

所有的Angular 2的代码都已经是基于ES6写的。由于现在ES6还没有在浏览器上运行，我们使用 Traceur编译器来生成能够在任何地方良好运行的ES5代码。我们正在和 Traceur 团队一起工作，实现对一些扩展的支持，比如标注（annotation）和断言（assertion）。

不用担心，尽管Angular会基于ES6，但是如果你不想移植的话，你仍然可以使用ES5来写。编译器会生成可读性很强的JS代码，针对扩展也有可以理解的模拟实现。阅读设计文档来查看更多信息。

更快

更快的更新监测（设计）

Angular应用是在DOM和JS对象的数据绑定的基础上构建的。Angular应用的速度很大程度上取决于我们底层使用的更新监测机制。当Object.observe()在Chrome M35上能用的时候，我们已经反复地说过我们多么希望能够使用它来加速我们的更新监测机制。当然我们会这么做！

然而，经过了非常细致的分析（细节见文档），我们还发现即使在浏览器还未支持原生更新监测的情况下，我们已经能够很大程度上提高Angular速度和内存使用效率。所以，极度平滑顺畅的应用指日可待。

仪表化（设计）

性能杠杆的另一半就是你写的代码。为了这，我们会提供高精细度的计时细节来还显示你的应用中的时间花销。你可以把这个看成更新监测设计的一个目标，但是我们会通过一个名叫diary.js的新的Angular日志服务的来为计时提供直接的支持。

模块化

当我们发布 Angular 1.0 的时候，所有的功能是在一个“要么接受要么放弃的”单独包里。不管你用不用它，你都得承担每个部分的下载开销。尽管整个Angular对于桌面应用来说是非常小的，但是在移动设备上却是完全不同的情景。

我们注意到一件很有意思的事情是，当我们吧$resource分离成一个单独的库的时候，冒出了好几个非常有创意的替代品。

为了性能和提倡创新，我们的目标是将Angular几乎所有的部分都做成可选的，可替代的，甚至是可以在其他的非Angular框架中使用。你可以挑选和使用你喜欢的部分，另外的部分你可以自己实现或者使用其他你更喜欢的方案。

其他性能话题

尽管目前还没有设计，我们还会涉及很多Angular其他方面的性能优化。从使用预编译的模板来改进第一次加载时间到保证60帧每秒的顺滑动画，我们会在用户体验上做非常深度的调研。请帮助我们，告知我们应该关注的点，并在解决方案中给予我们技术上的支持。

更简单化

依赖注入（设计）

依赖注入依然是 Angular 区别于客户端框架的关键所在，它帮你消除了很多应用中的连接性代码，并且使默认的可测试性变成了现实。尽管在我们开发应用的时候已经很享受依赖注入带来的好处，但我们对目前的实现仍然不满意。我们可以让他变的更简单且功能更强大。

我们会看到一个更加简化的依赖注入，移除了配置阶段，使用声明式的ES6+标注取代命令式的代码来简化语法。通过依赖注入和ES6模块化的模块加载的集成而获得更加强大的功能。我们还会看到使用子注入器（child injector）的方式来实现模块延时加载的特性。

上面文档链接中是我们的初步设想，但是它是Angular 2中你现在就可以尝试的部分。你可以在这个代码仓库中看到目前实现的细节。

模板和指令（设计）

能够直接使用HTML来定义模板，以及扩展HTML的语法，这些都是Angular赖以生存的东西。我们对Angular 2 的模板编译器新增了很多高级的改进：

简化指令的API
支持与其他标准Web框架的集成
提高性能
允许IDE等工具对模板进行分析和验证

对上面的这些内容，我们非常激动，以至于迫不及待地炫耀它们。有太多优秀的东西而不能都在这篇概要中摘录，所以请直接跳到设计文档来查看更多内容。

更强大的功能

触摸动画（设计）

用户们已经习惯于一些特定的触摸行为模式。比如，使用手指来滚动一个列表，循环查看轮播中的照片，通过滑动来删除一个列表项。然而：

目前的对于轮播、无限滚动等的实现，都没有共享通用的核心代码，因此有一堆各种各样的冗余和差异。
目前的大多数的实现对原生的滚动事件都不提供可选的支持，因为老的浏览器甚至一些现代的浏览器对它们支持不好。然而，这些实现，也就不能在新设备上达到本来可以有的最佳性能。

我们想给这些场景以最一流的支持，来让你的应用尽可能达到最佳的用户体验。

路由（设计）

初始的Angular路由只为一些简单的用例而设计的。随着Angular的成长，我们已经渐渐的加入了一些新的功能。然而，底层的设计始终不适合做更多深层次的扩展。

我们非常关注一些已知的用例以及其他很多应用框架的路由的实现，这样我们才能交付一个简单而又可扩展的路由，能够广泛地适用于各种应用。

我们特别热衷于支持的一些用例包括：

基于状态（State-based）的路由
集成授权和认证
选择性地保留一些视图的状态，移动端尤其需要。

持久化（设计）

在Angular简陋的 $http 之上，很多开发者渴望一个更高层次的抽象来处理来自服务器端的数据以及浏览器的本地持久化存储。

移动应用需要在一个“一直离线”的模式下工作，通过同步与服务器端保持一致。RESTful服务需要的远比我们$resource提供的更多。有些数据需要能够批量更新，而有些需要持续的流连接。

在这个新的持久化层，我们会为这些情景提供干净的架构，如果需要的话会从当前的样板文件中剔除更多。

问答

什么时候能做完？

如果你和我们一起经历了 1.2 版本的发布，你应该知道我们也不知道答案。：）尽管我们现在才发表设计文档，但我们已经为很多模块做过了原型。依赖注入和Zone.js甚至已经可以使用了。所有的工作都会在GitHub上完成，我们也会继续发布每周会议记录，你可以一直关注。

Angular 1.x 到 Angular 2 的移植过程将是怎样的？

Angular 2 目前仍然在开发中，老实说我们也不知道。在我们的想象中，移植将会非常直接和简单，但是也不是不劳而获的。如何使用ES6的优势将是最大的工作重心。模板的更新几乎就是机械的查找和替换的练习。如果你的控制器中包含的是你的业务逻辑，而没有使用太多现有的Angular API的话，升级将会非常简单。最需要考虑的部分会是你对模块和指令的使用。

Angualr 2 会是 PhoneGap 或 Ionic框架等移动技术的替代品吗？

不是，Angular依然只是核心模块。你仍然需要使用其他的库，比如 Ionic框架来提供移动优化的 CSS/JS组件，PhoneGap之类的工具来打包和访问原生API。

Angular 2 和 AngularDart的关系是怎样的？

在将AngularJS向Dart语言移植的时候，我们运用所有我们学到的东西创建了一个新的Angular版本。这篇文档中讨论的很多改进已经在那里了，比如改良的指令的概念和语法，以及类和基于标注的依赖注入。

尽管这不是我们在 2 中要实现的目标，但它是对未来的一个很好的预览。

我们在打造AngularJS 2的同时，我们也会不断升级 AngularDart，这样喜欢Dart语言的人可以和喜欢JS的人享用到相同的好处。我们的目标是根据你选择的语言都会有一个单一的框架。

其他有趣的文档