Angular получил новый синтаксис шаблонов

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

Angular предлагает перейти от текущих структурных директив NgIf, NgForOf, NgSwitch к новому встроенному синтаксису.

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

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

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

Привычный синтаксис.

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

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

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 в цикле for. Они доступны для использования напрямую, но также могут быть переименованы с помощью сегмента 'let'. Новый синтаксис также акцентирует использование 'track' для циклов, чтобы улучшить производительность и оптимизировать различия в списках путем обеспечения отслеживания.

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

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

Блоки условий If-Else.

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

Привычный синтаксис.

<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.

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

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

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

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

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

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

Часто задаваемые вопросы.

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

• Существующие структурные директивы: Текущие структурные директивы (NgIf и т.д.) будут продолжать работать. Однако Angular настоятельно рекомендует разработчикам перейти на новый синтаксис.

• Концепция структурной директивы: Она не будет удалена и остается важной функцией в Angular.

• Подсветка синтаксиса: Да, Angular Language Service будет выделять ключевые слова и выражения внутри блоков нового потока управления.

• Влияние на результаты запросов: Новый поток управления не повлияет на результаты запросов.

• Необходимость импорта нового потока управления: Нет, он будет интегрирован в язык шаблонов и автоматически доступен всем компонентам.

• Производительность: Новый поток управления может предложить незначительное улучшение, особенно для цикла 'for' и операции сравнения.

• Пользовательские группы блоков и директивы: В настоящее время новый синтаксис не поддерживает библиотеки для определения пользовательских групп блоков, и вы не можете добавлять директивы в блоки нового потока управления.

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

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

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

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