使用Angular 2 [关闭]

3 回答

• 39

  请注意，Angular 2.0确实可以很好地与Web Components和Polymer配合使用，但在当前阶段，即Angular 2.0 alpha，它不起作用（see this） . 所以你必须等一会儿我猜 .

  回复于 2024-04-29T08:19:11+08:00
• 0

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

  TypeScript是关于静态分析以获得更好的类型安全性 . 它还有一套非常好的编辑器工具（例如WebStorm） . 你不需要它来提高性能 . 它更像是一个帮助你创作的工具 . 就个人而言，我喜欢它 .

  我've begun migrating some of my existing open-source libraries to TypeScript because it'更容易合作 . 例如，请查看Task Runner before和after .

  ES6功能 . 由于角度2将使用很多es6功能，这意味着我们必须等待所有浏览器至少支持角度2所需的那些功能才能在我们的 生产环境 应用程序上启动它 .

  许多ES6功能都可以进行polyfilled . 看看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills .

  Web组件 . 由于angular 2提供了创建Web组件的工具，而且我发现了一些关于创建自己的（使用聚合物）的博客，我们的团队创建它们有多难？或者，如果我们坚持旧的指令创造的事情，它会更好吗？

  Web组件也是可填充的（参见here） . 在这种情况下，我建议您创建组件的做法 . 也许还要关注聚合物团队在这方面的成果 .

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

  这听起来像是过早的优化 . 首先构建（普通）Angular并仅在您发现应用程序的特定部分出现性能问题时进行优化 .

  回复于 2024-04-29T08:19:11+08:00
• 18

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

  使用Angular2需要TypeScript为 not .

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

  • classes （ES6）

  • decorators （ES7 / Typescript）

  • types - （打字稿）

  除此之外，浏览器还不支持这些功能，因此所有Angular2源都需要转换为ES5 .

  所以在ES5中：

  • classes 可以通过扩展原型来伪造

  • decorators 可以使用包装函数伪造

  • types aren 't really necessary to begin with, they'为了安全而增加了同步糖

  期望现有用户继承使用实验/前沿标准的风险是不现实的 . 因此，文档包括在ES5，ES6 / 7和Typescript中编写Angular2应用程序 .

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

  这是一个Angular2 Documentation .

  

  ES6功能 . 由于角度2将使用很多es6功能，这意味着我们必须等待所有浏览器至少支持角度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的这个视频，它提供了角度与角度反应与角度2的良好比较 . 但是我不确定角度2是否真的很快或者我们是否可以继续建造角度反应应用程序，以避免等待角度2稳定或浏览器支持角度使用的es6功能 .

  Angular2中引入了3项主要的性能改进 .

  1. 2-way data binding is no longer the default

  需要数据绑定的元素需要在模板中明确标记（即不要烦恼，新语法使这非常简单） . 结果，显着减少了对DOM进行脏检查所需的开销 .

  这意味着，HTML标记中不再有$ scope，$ scope.apply（）和奇怪的作用域规则 . 相反，自定义 <elements> 的层次结构在Angular2组件中定义 .

  2. Angular2 leverages the virtual DOM

  jQuery使得直接操作DOM非常简单 . 因此，它还使没有经验的开发人员极易通过频繁的增量更新来破坏DOM并触发布局重排 .

  VDOM基本上是DOM的简化内存表示 . 增量更新直接应用于VDOM，稍后将批量应用于实际DOM .

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

  较少的DOM操作=较少的UI呈现/回流=更具响应性的用户体验 .

  3. Angular2 runs on a background worker

  这不是一个新概念 . 桌面GUI已经以这种方式工作了多年，从技术上讲，HTML5后台工作者的引入技术不太可能 .

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

  注意：这不一定是真的，但为了清楚起见 .

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

  注意：在实践中，浏览器的实现差异很大，但让事情变得简单 .

  对于Web worker，可以将除DOM之外的所有内容都推送到后台工作者上下文中 . 理想情况下，Javascript应该对UI响应性几乎没有影响 .

  注意：渲染器仍然需要访问DOM的状态 .

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

  React

  据我所知，React是使用与Angular相同的所有性能改进 . 他们使用VDOM批量更新，并提到其他平台的本机可移植性，因此我假设他们经历了与Angular相同的架构更改 .

  老实说，使用后台处理来释放UI只是进一步实现桌面应用程序功能奇偶校验的又一步 .

  Angular2 vs React

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

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

  ---

  Update:

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

  回复于 2024-04-29T08:19:11+08:00