- 打字稿!是否真的需要使用 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。
- ES6 功能。由于 Angular 2 将使用大量 es6 功能,这是否意味着我们必须等待所有浏览器至少支持 Angular 2 所需的那些功能,然后才能在我们的生产应用程序中开始使用它。
正如我已经说过的,ES6 尚未在所有浏览器中得到正式支持。即使是这样,大多数网站仍然需要 polyfill 来向后兼容旧版浏览器。
es6-module-loader 的一个很酷的功能是动态加载依赖项的能力。到 Angular2 结束测试版时,应该很容易将其作为特征检测策略整合到您的应用中。
- Web 组件。由于 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 路数据绑定不再是默认设置
需要在模板中明确标记需要数据绑定的元素(即不要担心,新语法使这变得非常简单)。因此,对 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 组件的部分以更好地回答问题。