Новый синтаксис шаблонов, встроенный поток управления, прощание со структурными директивами? За последние годы мало что изменилось. У одних разработчиков Angular был стабильным, а у других стоял на месте. Теперь он движется вперед со скоростью света. Но куда именно он направляется?

Angular предлагает переход от текущих структурных директив (NgIf, NgForOf, NgSwitch) к новому встроенному синтаксису. Если вы еще не подписаны на RFC (запрос комментариев), сделайте это. А пока я собираюсь помочь вам понять, что грядет.

Модернизация потока управления

Команда Angular стремится заменить существующие структурные директивы (NgIf, NgForOf и NgSwitch) более современным синтаксисом, подобным макросам. Хотя структурные директивы не исчезнут полностью, потому что концепция останется — этот новый способ написания вашего шаблона будет предпочтительным. Он обратно совместим, и в течение некоторого времени вы сможете использовать как старый, так и новый стиль шаблона в разных файлах.

Изменение направлено на то, чтобы обеспечить лучшую читабельность и предоставить более плавный способ адаптации для более широкой аудитории в мире Frontend. Это похоже на более функциональный подход и основано на синтаксисе шаблонов Svelte.

До

trackByFunction в Angular — это пользовательская функция, используемая для оптимизации производительности при переборе больших коллекций с использованием *ngFor. В текущем синтаксисе он принимает только функцию, по-новому он будет работать только со свойствами.

Angular будет отслеживать изменения в коллекции на основе id каждого элемента, а не его личности. Это полезно, когда элементы в коллекции имеют уникальные идентификаторы, повышая эффективность при обновлении коллекции.

trackByFunction(index, item) {
  return item.id;
}
<div *ngFor="let item of items; index as idx; trackBy: trackByFunction">
  Item #{{ idx }}: {{ item.name }}
</div>

После

{#for item of items; track item.id; let idx = $index, e = $even}
  Item #{{ idx }}: {{ item.name }}
{/for}

Этот новый синтаксис поддерживает несколько неявных переменных, таких как $index, $first, $last, $even и $odd, в представлениях строк. Они доступны для использования напрямую, но также могут быть изменены с помощью сегмента «let». В новом синтаксисе также делается упор на использование циклов «отслеживание» for для повышения производительности и оптимизации различий в списках за счет принудительного отслеживания.

{#for item of items; track item.id}
  {{ item }}
{:empty}
  There were no items in the list.
{/for}

Одной из важнейших представленных функций является пустой блок, который позволяет разработчикам отображать шаблон, когда в списке нет элементов. Кроме того, Angular меняет способ обработки различий в списках. Вместо использования настраиваемых IterableDiffers Angular предоставит новый оптимизированный алгоритм для повышения производительности.

Блоки «если-иначе»

Если вы нашли оригинальный способ работы с ng-container и ng-template вместе со структурной директивой *ngIf недостаточно интуитивным — New Control Flow может решить ваши проблемы.

До (теоретически)

<ng-container *ngIf="cond.expr; else elseBlock">
  Main case was true!
</ng-container>

<ng-template #elseBlock>
  <ng-container *ngIf="other.expr; else finalElseBlock">
    Extra case was true!
  </ng-container>

</ng-template>
<ng-template #finalElseBlock>
  False case!
</ng-template>

После

{#if cond.expr}
  Main case was true!
{:else if other.expr}
  Extra case was true!
{:else}
  False case!
{/if}

Блок переключения

Блок switch заменяет блок *ngSwitch, который. Говорят, что новый способ написания приносит существенные преимущества, такие как расширенная проверка типов шаблонов и отсутствие необходимости в элементах-контейнерах для хранения выражений условий. Вот быстрый взгляд на то, как это будет выглядеть:

{#switch condition}
  {:case caseA}
    Case A.
  {:case caseB}
    Case B.
  {:default}
    Default case.
{/switch}

Что насчет миграции?

Обещано, что переход на новый синтаксис будет относительно плавным. Команда Angular работает над схемой автоматической миграции для преобразования старого синтаксиса в новый. Однако разработчикам, возможно, придется с осторожностью относиться к любому пользовательскому алгоритму сравнения, используемому в их приложениях, поскольку это может повлиять на поведение новой директивы for.

Будущие возможности

Команда Angular предполагает расширение этого нового синтаксиса для включения большего количества разновидностей циклов JS, включая асинхронную итерацию и циклы for-in. Потенциальные будущие улучшения также включают поддержку виртуальной прокрутки и деструктуризации.

Также есть еще один документ RFC, показывающий новую функцию в действии — эта функция основана на новом встроенном потоке управления. Оформить RFC для Отложенной загрузки

Резюме часто задаваемых вопросов

Давайте быстро рассмотрим некоторые распространенные проблемы, которые могут возникнуть у разработчиков по поводу этого нового синтаксиса потока управления:

  • Существующие структурные директивы. Текущие структурные директивы (NgIf и т. д.) будут продолжать работать. Однако Angular будет настоятельно рекомендовать разработчикам перейти на новый синтаксис.
  • Концепция структурных директив: она не будет удалена и останется важной функцией Angular.
  • Подсветка синтаксиса. Да, языковая служба Angular будет выделять ключевые слова и выражения в новых блоках потока управления.
  • Влияние на результаты запроса. Новый поток управления не повлияет на результаты запроса.
  • Необходимо импортировать новый поток управления: нет, он будет встроен в язык шаблона и автоматически доступен для всех компонентов.
  • Производительность: новый поток управления может предложить незначительные улучшения, особенно для for и diffing.
  • Пользовательские группы блоков и директивы. В настоящее время новый синтаксис не поддерживает библиотеки для определения пользовательских групп блоков, и вы не можете добавлять директивы в новые блоки потока управления.

Что вы думаете?

Это предложенное изменение синтаксиса повлияет на то, как вы пишете свои шаблоны. Как вы думаете, это нужно? Улучшит ли это изменение ваш DX и привлечет ли новых разработчиков, которые раньше предпочитали использовать другие фреймворки?

Меня больше всего беспокоит переходный период. У нас есть значительное изменение реактивного примитива с сигналами и теперь вводится новый синтаксис шаблона. Это определенно собирается вместе, чтобы нарисовать большую картину, которая еще не была раскрыта нам. В течение некоторого времени разработчики Angular получат множество вариантов обработки реактивности: RxJS, сигналы, обещания, обнаружение изменений (zone.js) + 2 способа написания шаблонов.

Полный переход к новому видению определенно займет много времени, и вы не можете ускорить этот процесс. Теперь возникает вопрос, стоит ли стоимость этих достижений того, что мы получаем в итоге?

Обязательно дайте мне знать и обсудите!

Надеюсь, вам понравилась моя статья!

Если да, то вам также может понравиться то, что я делаю в Твиттере. Я провожу прямые трансляции в Твиттере об Angular с участием GDE и отраслевых экспертов! Вы можете участвовать в прямом эфире, задавать вопросы или смотреть повторы в виде коротких роликов :)

Если вам интересно, напишите мне в Twitter @DanielGlejzner — это много значит :). Спасибо!