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的人享用到相同的好处。咱们的目标是根据你选择的语言都会有一个单一的框架。

其余有趣的文档

• 高层次设计考虑要点
  
• 解析器抽象说明
• 模板实现的理念
  
• 模板案例