【问题标题】:Working with Angular 2 [closed]使用 Angular 2 [关闭]
【发布时间】:2015-05-17 00:40:43
【问题描述】:

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

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

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

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

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

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

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

谢谢。

【问题讨论】:

  • 你的问题是什么?
  • 也许你最好把它发布在其他地方(即使是在官方 GitHub 存储库中,可能只接受错误问题)。
  • @DanielA.White 我的问题是我在上面列出的问题。

标签: javascript angular


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

使用 Angular2不需要TypeScript。

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

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

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

所以在 ES5 中:

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

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

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

看看Angular2 Documentation

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

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

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

  1. Web 组件。由于 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 路数据绑定不再是默认设置

需要在模板中明确标记需要数据绑定的元素(即不要担心,新语法使这变得非常简单)。因此,对 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 与 React

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

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


更新:

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

【讨论】:

    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

      打字稿!是否真的需要使用 typescript 来获得更好的性能,而不是编写我们一直在做的简单的 JS 代码。我们遇到了一些 cmet,他们说 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

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

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

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

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

      【讨论】:

      • 那么你认为我的团队(在 angular 1.x 和纯 es5 上工作)需要付出多少努力来吸收你上面所说的一切,以及完全转向 typescript + angular 对我们有多大好处2 ?
      • 这两个我都不可能说。我不知道你的团队或你的项目。我只能告诉你,我(个人)喜欢使用 TypeScript。我已将 2 个现有项目迁移到它(formFor 和 Task Runner),我将用它开始我的新项目。真好。至于 Angular 2……你是否应该使用它取决于几个因素:你当前的项目有多大?发布日期是什么时候?你的目标是什么浏览器?如果你的答案包括“相当大”、“很快”或“大多数浏览器”,那么你现在应该坚持使用 Angular 1.x
      猜你喜欢
      • 1970-01-01
      • 2016-09-03
      • 2018-09-13
      • 2017-12-15
      • 2020-01-08
      • 2017-02-14
      • 1970-01-01
      • 2017-04-20
      • 2017-11-28
      相关资源
      最近更新 更多