使用 Angular 2

Working with Angular 2

我们的团队对 Angular 2 的 alpha 版本感到非常兴奋,我们只是热切地等待它的稳定版本并开始使用它。 但是在 Misko Angular 2 的 ng-conf 2015 期间,我们遇到了以下让我感到困惑的事情

  1. 打字稿!是否真的需要使用 typescript 来获得更好的性能,而不是编写我们一直在做的简单的 JS 代码。我们发现一些评论说打字稿有助于提高性能。

  2. ES6 特性。由于 angular 2 将使用大量 es6 功能,这是否意味着我们必须等待所有浏览器至少支持 angular 2 所需的那些功能,然后才能开始使用它我们的生产应用程序。

  3. Web 组件。由于 angular 2 提供了创建 Web 组件的功能,并且我看到了一些关于创建您自己的(使用聚合物)的博客,我们的团队创建它们会有多难?或者如果我们只坚持旧的指令创建会更好吗?

  4. 性能。我看过 Angular + React 的视频,它很好地比较了 angular vs angular + react vs angular 2。但我不确定情况是否如此angular 2 一直都非常快,或者如果我们可以继续构建 angular + React 应用程序以避免等待 angular 2 稳定或浏览器支持 es6 功能angular 使用。

我不确定我是否很好地组织了我的问题,但以上是我开始学习之前的担忧 angular 2 因为他们展示了 angular 2 + 打字稿似乎会对我和我的团队来说涉及很多收入曲线。

如果有人能澄清我上面列出的问题,我将不胜感激。

谢谢。

TypeScript! Is it really needed to use typescript to gain better performance instead of writing plain simple JS code we've been doing all along. We've came across a few comments that says typescript helps in better performance.

TypeScript 是关于更好的类型安全的静态分析。它还有一套非常不错的编辑器工具(例如 WebStorm)。你不需要它来提高性能。它更像是一个帮助您创作的工具。不过就个人而言,我喜欢它。

我已经开始将一些现有的开源库迁移到 TypeScript,因为它更容易使用。例如,查看 Task Runner before and after.

ES6 features. Since angular 2 will be using a lot of es6 features, would that mean we'll have to wait for all the browsers support at least those features needed by angular 2 before we can kick start with it on our production applications.

许多 ES6 功能都可以填充。查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Web components. Since angular 2 provides the facility to create web components and I've came across a few blogs on creating your own (using polymer), how hard is it gonna be for our team to create them? Or is it better if we just stick to old directives creation thing ?

Web 组件也是可填充的(参见 here)。在这种情况下,我建议您遵循 Angular 团队推荐的创建组件的做法。或许还可以关注 Polymer 团队在这方面的进展。

Performance. I've seen this video of Angular + React which provides a good comparison of angular vs angular + react vs angular 2. But I'm not sure if that's the case that angular 2 is really fast all the way or if we can go ahead with building angular + react app to avoid waiting for angular 2 to stabilize or the browsers to have support for es6 features that angular uses.

这对我来说听起来像是过早的优化。首先为(普通)Angular 构建,只有当您发现应用程序的特定部分出现性能问题时才进行优化。

请注意,Angular 2.0 确实承诺可以与 Web 组件和 Polymer 很好地配合使用,但在当前阶段,即 Angular 2.0 alpha,它不起作用 (see this ).所以我猜你得等一段时间。

  1. TypeScript! Is it really needed to use typescript to gain better performance instead of writing plain simple JS code we've been doing all along. We've came across a few comments that says typescript helps in better performance.

TypeScript 不需要 使用 Angular2.

您看到的大多数示例将使用 JavaScript:

  • classes (ES6)
  • decorators (ES7/Typescript)
  • types - (打字稿)

除此之外,浏览器尚不支持这些功能,因此所有 Angular2 源代码都需要转换为 ES5。

所以在 ES5 中:

  • classes 可以通过扩展原型来伪造
  • decorators 可以使用包装函数伪造
  • types 并不是真正需要的,它们是为了安全而添加的同步糖

期望现有用户继承使用 experimental/bleeding-edge 标准的风险是不现实的。因此,文档涵盖了使用 ES5、ES6/7 和 Typescript 编写 Angular2 应用程序。

旁白:我个人不喜欢使用 TypeScript。 Traceur 可以配置为支持@decorators 和system.js provides a polyfill for the proposed es6-moduler-loader 规范的实验性扩展。

下面是Angular2 Documentation.

  1. ES6 features. Since angular 2 will be using a lot of es6 features, would that mean we'll have to wait for all the browsers support at least those features needed by angular 2 before we can kick start with it on our production applications.

如我所说,ES6 尚未在所有浏览器中得到官方支持。即使是这样,大多数网站仍然需要 polyfill 来提供对旧浏览器的向后兼容性。

es6-module-loader 的一个很酷的功能是动态加载依赖项的能力。到 Angular2 结束测试版时,应该很容易将其作为功能检测策略合并到您的应用程序中。

  1. Web components. Since angular 2 provides the facility to create web components and I've came across a few blogs on creating your own (using polymer), how hard is it gonna be for our team to create them? Or is it better if we just stick to old directives creation thing?

虽然您可能需要使用 Angular2 特定的 Web 组件,但并不难。原因是,Angular2 不仅仅是一个前端 Web 框架。它还可以用于同构(即在后端预渲染)、本机和移动应用程序。这意味着,非常不鼓励直接触摸 DOM。

至于组件本身的创建...这与在 Angular2 中创建任何其他组件没有什么不同。与按类型(即模型、视图、控制器)对代码进行分组的旧 MVC 模型不同,组件模型鼓励按上下文对代码进行分组。

导入可重用组件时,它应该附带使用它所需的任何指令、服务等。

例如,请参阅我创建的 。除了直接从 GH 克隆 repo 外,还可以通过 JSPM 直接安装和导入代码。

只需 import 它,将组件 class 添加到您的视图 directives 并且模板中的任何 <ng2-markdowm> 元素都可以正常工作。没有比这更容易的了。

  1. Performance. I've seen this video of Angular + React which provides a good comparison of angular vs angular + react vs angular 2. But I'm not sure if that's the case that angular 2 is really fast all the way or if we can go ahead with building angular + react app to avoid waiting for angular 2 to stabilize or the browsers to have support for es6 features that angular uses.

Angular2 中引入了 3 项主要性能改进。

1. 2 向数据绑定不再是默认设置

需要数据绑定的元素需要在模板中明确标记(即不要担心,新语法使这变得非常简单)。因此,对 DOM 进行脏检查所需的开销大大减少。

这意味着,在 HTML 标记中不再有 $scope、$scope.apply() 和奇怪的范围规则。相反,自定义 <elements> 的层次结构是在 Angular2 个组件中定义的。

2。 Angular2 利用虚拟 DOM

jQuery 使得直接操作 DOM 变得极其简单。因此,对于没有经验的开发人员来说,它也非常容易通过频繁的增量更新来破坏 DOM 和触发布局回流。

VDOM 基本上是 DOM 的简化内存表示。增量更新直接应用到 VDOM,然后分批应用到实际的 DOM。

除了网络请求,DOM 操作是 JavaScript 最大的性能弱点。另一方面,VDOM 快一个数量级。 Angular 透明地处理批处理,而不是期望开发人员通过手动批处理更新 DOM 来遵循 'best practices'。

更少 DOM 操作 = 更少 UI rendering/reflows = 更灵敏的用户体验。

3. Angular2 运行 后台工作人员

这并不是一个新概念。桌面 GUIs 多年来一直以这种方式工作,只是在技术上不可能引入 HTML5 个后台工作人员。

在大多数桌面应用程序中,主上下文 运行s 是同步的+,而 UI 运行s 在它自己的单独线程中是异步的。无论应用程序在主要上下文中做什么,这都会使用户体验响应。

+注意:这不一定是真的,但为了清楚起见。

在浏览器中,所有执行都发生在主上下文+中。这意味着,每次 Javascript 必须阻止 CPU 繁重的操作时,用户界面都会对用户无响应。这并不理想,会影响 lousy/inconsistent 用户体验。

+注意:在实践中,浏览器的实现差异很大,但让事情简单一些。

使用网络工作者,可以将 DOM+ 以外的所有内容推送到后台工作者上下文中。理想情况下,Javascript 对 UI 响应能力的影响很小或没有影响。

+注意:DOM的状态仍然需要渲染器可以访问。

此转换的一个副作用是,Angular2 架构现在与 UI/DOM 完全分离。意思是,现在可以为其他平台(例如 IOS、Android、SmartTV 等)编写 UI 适配器,运行 在同一个 Angular2本机代码。

反应

据我所知,React 正在使用与 Angular 相同的所有性能改进。他们使用 VDOM 进行批量更新,并提到了对其他平台的本机可移植性,因此我假设他们经历了与 Angular.

相同的架构更改

老实说,使用后台处理来释放 UI 只是实现与桌面应用程序功能对等的进化过程中的又一步。

Angular2 对比 React

我鼓励你再次 watch the video 一直到最后。演示者在编写代码时搞砸了,因此现场演示不是一个诚实的比较。

话虽如此,哪个更快并不重要。两者都不会比另一个快得多,但与其他 UI 框架相比,它们的响应速度和可扩展性都会显着提高。


更新:

重写了有关 Web 组件的部分以更好地回答问题。