Angular小博客

分享让你更聪明

[译2023]认识 Angular 的新控制流

浏览:11次 日期:2024年10月21日 22:19:01 作者:admin

今年 11 月,我们将发布 Angular 版本 17,其中包含许多新的模板功能,包括用于控制流和可延迟视图的新内置语法。新的声明性控制流将NgIf 、 NgForNgSwitch的功能引入框架本身,并且可延迟视图允许模板延迟加载依赖项,以响应一个或多个可配置的触发条件。这是我们对 Angular 模板所做的最重大的改变,我们正在努力对这些功能进行最后的修饰。

以下是新功能的预览:

@if (user.isHuman) {
  <human-profile [data]="user" />
} @else if (user.isRobot) {
  <!-- robot users are rare, so load their profiles lazily -->
  @defer {
    <robot-profile [data]="user" />
  }
} @else {
  <p>The profile is unknown!
}

@是哪里来的?

如果您完全遵循 Angular 的RFC流程,您可能已经阅读了我们关于控制流可延迟视图的建议。我们在 6 月份共享了这两个 RFC,以收集社区对我们设计的各个部分(包括模板语法)的反馈。您可能还会注意到,上面的示例与这些 RFC 不匹配,这些 RFC 使用了我们所说的“#-syntax”——类似 HTML 的标签,例如{#if} 、 {:else}{/if} 。发生了什么?

在 RFC 期间,我们收到了有关功能本身的重要积极反馈,以及有关语法本身的各种意见。这并不意外,因为语法可以激发开发人员的热情。但随着 RFC 的进展,出现了一种真正受欢迎的替代想法。我们称之为“@-syntax”,它大致类似于上面的例子。据我们估计,@-syntax 大致与 #-syntax 一样流行,甚至可能更流行一些。

为了响应 RFC 反馈,我们对设计进行了细微调整,但评估对语法的这种根本性改变需要时间。在两个 RFC 的结束摘要中,我们总结了主要差异,并致力于收集更多数据,以便正确考虑社区提出的替代方案。

基于证据的决策

我们的目标是量化两种语法替代方案的可读性、可写性和整体开发人员体验。在过去的几个月里,我们从我们的团队、GDE 专家社区以及 Google 的 Angular 开发人员那里收集了反馈。我们在年度开发者调查中纳入了有关语法选择的问题。我们还与用户研究国际合作设计并开展了一项用户体验研究。

我们收集了这些努力的所有结果,并且数据是决定性的:在我们所有的民意调查和研究中,Angular 和非 Angular 开发人员都更喜欢 @-syntax 的社区提案,而不是最初的 # -句法。

该图表说明了对我们的年度调查做出回应的数千名开发人员的偏好:

2023 年 Angular 开发人员调查中的语法偏好

我们的用户研究数据相似,超过 70% 的参与者更喜欢@而不是# (n = 14)。参与者提供了各种反馈来支持他们的选择,并指出 @-syntax 的简单结构及其与 TypeScript 和其他编程语言的相似性是重要的积极因素。他们指出的主要缺点是缺乏关闭}上下文,使得很难判断哪个块正在被关闭。我们认为良好的 IDE 工具将在这个领域发挥作用。

除了定量分析之外,团队还进行了技术分析,以了解解析、与现有模板的兼容性以及@-语法的其他方面的限制。我们确定了两个可解决的问题:

  1. 如果省略条件表达式周围的括号等,我们的模板解析器很难区分对象文字和启动块的{ 。我们现在通过要求括号来解决这个问题,并将在将来投资于解析器的改进。
  2. 模板中现有的@}作为文字字符的用法需要通过迁移进行转义。根据我们对 Google 代码库的初步调查,我们预计这些字符的实例很少见。

这两个挑战都是可以解决的。

总之,我们相信我们的社区和我们收集的数据:Angular v17 将使用 @-syntax 来控制流和可延迟视图。

十一月见!

原文链接:https://blog.angular.dev/meet-angulars-new-control-flow-a02c6eee7843