41

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

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

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

  3. 网络组件。由于 Angular 2 提供了创建 Web 组件的工具,并且我遇到了一些关于创建自己的(使用聚合物)的博客,所以我们的团队创建它们有多难?或者如果我们只坚持旧的指令创建事情会更好吗?

  4. 表现。我看过这个Angular + React的视频,它提供了 Angular 与 Angular + React 与 Angular 2 的良好比较。但我不确定 Angular 2 是否真的很快,或者我们是否可以继续通过构建 angular + react 应用程序来避免等待 angular 2 稳定或浏览器支持 angular 使用的 es6 功能。

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

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

谢谢。

4

3 回答 3

41

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

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

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

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

很多 ES6 特性都可以被 polyfill。查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

网络组件。由于 Angular 2 提供了创建 Web 组件的工具,并且我遇到了一些关于创建自己的(使用聚合物)的博客,所以我们的团队创建它们有多难?或者如果我们只坚持旧的指令创建事情会更好吗?

Web 组件也是可填充的(参见此处)。在这种情况下,我建议您按照 Angular 团队推荐的做法来创建您的组件。在这方面,也许还要关注 Polymer 团队的成果。

表现。我看过这个 Angular + React 的视频,它提供了 angular vs angular + react vs angular 2 的一个很好的比较。但我不确定 angular 2 是否真的很快,或者我们是否可以继续通过构建 angular + react 应用程序来避免等待 angular 2 稳定或浏览器支持 angular 使用的 es6 功能。

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

于 2015-03-14T15:49:32.173 回答
20
  1. 打字稿!是否真的需要使用 typescript 来获得更好的性能,而不是编写我们一直在做的简单的 JS 代码。我们遇到了一些评论,说 typescript 有助于提高性能。

使用 Angular2 不需要TypeScript

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

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

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

所以在 ES5 中:

  • classes可以通过扩展原型来伪造
  • decorators可以使用包装函数伪造
  • types一开始并不是必须的,它们是为了安全而添加的合体糖

期望现有用户继承使用实验性/前沿标准的风险是不现实的。因此,文档涵盖了在 ES5、ES6/7 和 Typescript 中编写 Angular2 应用程序。

另外:我个人不喜欢使用 TypeScript。Traceur 可以配置为支持 @decorators 的实验性扩展,并且system.js为提议的 es6-moduler-loader规范提供了一个 polyfill。

下面是Angular2 文档

Angular2.io 文档

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

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

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

  1. 网络组件。由于 Angular 2 提供了创建 Web 组件的工具,并且我遇到了一些关于创建自己的(使用聚合物)的博客,所以我们的团队创建它们有多难?或者如果我们只坚持旧的指令创建事情会更好吗?

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

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

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

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

简单地import说,将组件类添加到您的视图中,模板中的directives任何元素都可以正常工作。<ng2-markdowm>没有比这更容易的了。

  1. 表现。我看过这个 Angular + React 的视频,它提供了 Angular 与 Angular + React 与 Angular 2 的良好比较。但我不确定 Angular 2 是否真的很快,或者我们是否可以继续通过构建 angular + react 应用程序来避免等待 angular 2 稳定或浏览器支持 angular 使用的 es6 功能。

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

1. 2-way数据绑定不再是默认

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

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

2. Angular2 利用虚拟 DOM

jQuery 让直接操作 DOM 变得非常简单。结果,它也使没有经验的开发人员非常容易通过频繁的增量更新来破坏 DOM 并触发布局重排。

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

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

更少的 DOM 操作 = 更少的 UI 渲染/重排 = 响应更快的用户体验。

3. Angular2 在后台工作人员上运行

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

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

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

在浏览器中,所有执行都发生在主上下文中+。这意味着,每次 Javascript 必须阻止 CPU 密集型操作时,用户界面都会对用户无响应。这并不理想,并且会导致糟糕/不一致的用户体验。

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

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

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

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

反应

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

老实说,使用后台处理来释放 UI 只是实现与桌面应用程序功能平等的另一个步骤。

Angular2 与反应

我鼓励您从头到尾再次观看视频。演示者在编写代码时搞砸了,所以现场演示不是一个诚实的比较。

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


更新:

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

于 2015-11-02T11:04:57.450 回答
0

请注意,Angular 2.0 确实可以很好地与 Web 组件和 Polymer 一起工作,但在当前阶段,即 Angular 2.0 alpha 中,它不起作用(请参阅this)。所以我猜你得等一会儿。

于 2015-03-23T19:55:21.243 回答