Новый синтаксис шаблонов, встроенный поток управления, прощание со структурными директивами? За последние годы мало что изменилось. У одних разработчиков 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 — это много значит :). Спасибо!