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?