Angular: переменная в шаблоне, хорошо или плохо?

Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.

Преимущества использования

Сторонники утверждают, что @let упрощает логику шаблонов, позволяя объявлять переменные внутри шаблона, избегая проблем с ложными значениями и улучшая читаемость. Это позволяет создавать более линейный и чистый код, особенно при работе с сложными условиями и асинхронными данными.

Рассмотрим проблему с ложными значениями: ранее, для объявления переменной в шаблоне Angular, разработчики часто использовали директиву ngIf с ключевым словом as. Этот подход имеет ограничение: ложные значения, такие как 0, пустые строки («»), null, undefined и false, препятствовали отображению контента.

Например:

<div *ngIf="userName$ | async as userName">   <h1>Welcome, {{ userName }}</h1> </div>

В случае, если userName была пустой строкой, ничего не отобразится. Блок @let решает эту проблему:

<div>   @let userName = (userName$ | async) ?? 'Guest';   <h1>Welcome, {{ userName }}</h1> </div>

Рассмотрим еще хороший пример использования этой фичи в шаблоне, где мы работаем с таблицами с динамическими колонками, где определение колонок и значение выводятся из сложных конфигураций. Любой, кто работал над приложением с большими таблицами, знает проблемы, с которыми приходится сталкиваться. Блок @let может значительно упростить работу с таблицами.

Используя блок @let:

<table mat-table [dataSource]="dataSource">   @for (columnDef of columnDefs) {     @let property = columnDef.propertyName;     <ng-container [matColumnDef]="columnDef.name">       <th mat-header-cell *matHeaderCellDef>{{ columnDef.header }}</th>       <td mat-cell *matCellDef="let element">         @let cellValue = element[property];         <ng-container *ngIf="columnDef.cellType === 'link'; else plainCell">           <a [routerLink]="cellValue?.routerLink">{{ cellValue?.value }}</a>         </ng-container>         <ng-template #plainCell>{{ cellValue }}</ng-template>       </td>     </ng-container>   } </table>

Привычный способ:

<table mat-table [dataSource]="dataSource">   <ng-container *ngFor="let columnDef of columnDefs">     <ng-container [matColumnDef]="columnDef.name">       <th mat-header-cell *matHeaderCellDef>{{ columnDef.header }}</th>       <td mat-cell *matCellDef="let element">         <ng-container *ngIf="columnDef.cellType === 'link'; else plainCell">           <a [routerLink]="element[columnDef.propertyName]?.routerLink">{{ element[columnDef.propertyName]?.value }}</a>         </ng-container>         <ng-template #plainCell>{{ element[columnDef.propertyName] }}</ng-template>       </td>     </ng-container>   </ng-container> </table>

Аргументы против :

Критики утверждают, что блок @let вводит ненужную сложность и может привести к путанице. Вот несколько мнений и пример:

• Увеличение когнитивной нагрузки: Введение @let добавляет еще одну концепцию для изучения и понимания разработчиками. Это может увеличить когнитивную нагрузку, особенно для новых разработчиков, которые уже пытаются освоить обширные возможности Angular.

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

• Существующие решения достаточны: Критики считают, что существующие функции Angular, особенно возможность преобразовывать наблюдаемые объекты в сигналы, достаточны для обработки большинства случаев использования. Они утверждают, что введение @let не дает значительных преимуществ по сравнению с этими существующими решениями.

Пример:

<div>   @let firstName = user?.firstName;   @let lastName = user?.lastName;   @let fullName = `${firstName} ${lastName}`;   <p>{{ fullName }}</p>   @if (user?.address) {     @let street = user.address.street;     @let city = user.address.city;     <p>{{ street }}, {{ city }}</p>   } </div>

Этот пример демонстрирует потенциальное удобство @let, но также показывает, как множественные объявления @let могут привести к путанице в шаблоне.

А как Вы оцениваете удобство использования @let по сравнению с другими подходами работы в шаблонах Angular?