- 打字稿!是否真的需要使用 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 文档。
- ES6 特性。由于 Angular 2 将使用大量 es6 功能,这是否意味着我们必须等待所有浏览器至少支持 Angular 2 所需的那些功能,然后才能在我们的生产应用程序中开始使用它。
正如我已经说过的,ES6 尚未在所有浏览器中得到正式支持。即使是这样,大多数网站仍然需要一个 polyfill 来提供对旧浏览器的向后兼容性。
一个很酷的功能es6-module-loader
是动态加载依赖项的能力。到 Angular2 结束测试版时,应该很容易将其作为特征检测策略整合到您的应用程序中。
- 网络组件。由于 Angular 2 提供了创建 Web 组件的工具,并且我遇到了一些关于创建自己的(使用聚合物)的博客,所以我们的团队创建它们有多难?或者如果我们只坚持旧的指令创建事情会更好吗?
虽然您可能需要使用特定于 Angular2 的 Web 组件,但并不难。原因在于,Angular2 不仅仅是一个前端 Web 框架。它也可用于同构(即在后端预渲染)、本机和移动应用程序。这意味着,非常不鼓励直接接触 DOM。
至于组件本身的创建......这与在Angular2中创建任何其他组件没有什么不同。与按类型(即模型、视图、控制器)对代码进行分组的旧 MVC 模型不同,组件模型鼓励按上下文对代码进行分组。
当你导入一个可重用的组件时,它应该带有使用它所需的任何指令、服务等。
例如,请参阅我建立。除了直接从 GH 克隆 repo 之外,还可以直接通过 JSPM 安装和导入代码。
简单地import
说,将组件类添加到您的视图中,模板中的directives
任何元素都可以正常工作。<ng2-markdowm>
没有比这更容易的了。
- 表现。我看过这个 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 组件的部分以更好地回答问题。