使用Angular 2

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

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

  2. ES6function。 由于angular2将使用大量的es6function,这意味着我们必须等待所有的浏览器支持angular2所需的至less那些function,然后才能在我们的生产应用程序中启动它。

  3. Web组件。 既然angular2提供了创buildWeb组件的function,而且我已经遇到了一些创build自己的(使用聚合物)的博客,那么我们团队创build它们有多难? 或者,如果我们坚持旧的指令创造的东西呢?

  4. 性能。 我已经看过Angular + React的这个video,它可以很好地比较angular度和angular度对angular度2的反应。但是我不确定angular度2是否真的很快,或者我们可以继续前进与build设angular度+反应的应用程序,以避免等angular2稳定或浏览器支持es6functionangular使用。

我不确定自己的问题是否得到了很好的解决,但是在开始学习angular 2之前,以上是我的担忧,因为他们的angular度2 +打字稿的演示似乎会为我和我的团队带来很多收入曲线。

如果有人能够澄清我列出的上述问题,我将非常感激。

谢谢。

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

TypeScript是关于更好的types安全的静态分析。 它也有一个相当不错的编辑工具套件(如WebStorm)。 你不需要它的performance。 这更像是一个帮助你作者的工具。 就我个人而言,我喜欢它。

我已经开始将一些现有的开源库迁移到TypeScript,因为它更容易处理。 例如, 前后查看Task Runner。

ES6function。 由于angular2将使用大量的es6function,这意味着我们必须等待所有的浏览器支持angular2所需的至less那些function,然后才能在我们的生产应用程序中启动它。

许多ES6function可以被填充。 看看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Web组件。 既然angular2提供了创buildWeb组件的function,而且我已经遇到了一些创build自己的(使用聚合物)的博客,那么我们团队创build它们有多难? 或者,如果我们坚持旧的指令创造的东西呢?

Web组件也是polyfillable的(请参阅这里 )。 在这种情况下,我build议您按照Angular团队的build议做法来创build组件。 也可以关注一下聚合物团队在这方面的成果。

性能。 我已经看过Angular + React的这个video,它可以很好地比较angular度和angular度对angular度2的反应。但是我不确定angular度2是否真的很快,或者我们可以继续前进与build设angular度+反应的应用程序,以避免等angular2稳定或浏览器支持es6functionangular使用。

这听起来像过早的优化。 先构build(纯)Angular,然后只在您的应用程序的特定部分注意到性能问题时才进行优化。

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

TypeScript不需要使用Angular2。

你看到的大多数例子都会使用JavaScript:

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

除此之外,浏览器还不支持这些function,所以所有的Angular2源代码都需要转换成ES5。

所以在ES5中:

  • classes可以通过扩展原型来伪造
  • decorators者可以伪装使用包装function
  • types是不是真的有必要开始,他们是为了安全添加合成糖

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

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

这里看一下Angular2文档 。

Angular2.io文档

  1. ES6function。 由于angular2将使用大量的es6function,这意味着我们必须等待所有的浏览器支持angular2所需的至less那些function,然后才能在我们的生产应用程序中启动它。

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

es6-module-loader一个很酷的function是dynamic加载依赖关系的能力。 在Angular2超出testing版的时候,应该很容易把它作为一个function检测策略join到你的应用中。

  1. Web组件。 既然angular2提供了创buildWeb组件的function,而且我已经遇到了一些创build自己的(使用聚合物)的博客,那么我们团队创build它们有多难? 或者,如果我们坚持旧的指令创造的东西呢?

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

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

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

有关示例,请参阅 我创build。 除了直接从GH克隆回购,代码可以通过JSPM直接安装和导入。

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

  1. 性能。 我已经看过Angular + React的这个video,它可以很好的比较angular度与angular度+反应与angular度2.但是我不确定angular度2是否真的很快,或者我们可以继续前进与build设angular度+反应的应用程序,以避免等angular2稳定或浏览器支持es6functionangular使用。

Angular2中有3个主要的性能改进。

1.双向数据绑定不再是默认的

需要数据绑定的元素需要在模板中显式标记(即不要担心,新的语法使得这非常简单)。 结果,在DOM上执行脏检查所需的开销大大降低。

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

2. Angular2利用虚拟DOM

jQuery使得直接操作DOM非常简单。 因此,对于没有经验的开发人员来说,这也非常容易使DOM抖动,并通过频繁的增量更新触发布局回stream。

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

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

更less的DOM操作=更less的UI渲染/回stream=更加敏感的用户体验。

3. Angular2运行在后台工作

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

在大多数桌面应用程序中,主要上下文同步运行,并且UI在其自己单独的线程中asynchronous运行。 无论应用程序在主要环境中执行什么操作,都可以使用户体验有所反应。

+注意:这不一定是正确的,但为了清晰起见。

在浏览器中,所有的执行都在主要的上下文中进行。 这意味着,每次JavaScript必须阻止CPU繁忙的操作时,用户界面对用户不起反应。 这并不理想,并导致糟糕/不一致的用户体验。

+注意:实际上,浏览器的实现差别很大,但是让事情变得简单。

通过networking工作人员,可以将除DOM +之外的所有内容都推送到后台工作人员上下文中。 理想情况下,Javascript应该对UI响应性没有影响。

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

这种转换的一个副作用是,Angular2架构现在完全与UI / DOM解耦。 这意味着,现在可以为其他平台(例如IOS,Android,SmartTV等)编写用户界面适配器,这些平台原生运行在相同的Angular2代码上。

应对

据我所知,React正在使用与Angular相同的性能改进。 他们使用VDOM批量更新​​,并提到了其他平台的本地可移植性,所以我认为他们经历了与Angular相同的体系结构更改。

老实说,使用后台处理来释放用户界面只是向桌面应用程序进行function平衡的另一个步骤。

Angular2与React

我鼓励你一直观看video到最后。 演讲者在写代码的时候搞砸了,所以现场演示并不是一个真实的比较。

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


更新:

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

请注意,Angular 2.0确实承诺能够很好地处理Web Components和Polymer,但是在当前阶段,即Angular 2.0 alpha,它不起作用( 请参阅此 )。 所以你不得不等待一段时间我猜。