[Перевод] Angular: переменная в шаблоне, хорошо или плохо?09.08.2024 13:45

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

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

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

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

Например:

  
Welcome, {{ userName }}

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

  @let userName = (userName$ | async) ?? 'Guest';
  
Welcome, {{ userName }}

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

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

  @for (columnDef of columnDefs) {
    @let property = columnDef.propertyName;
    
      
  }
{{ columnDef.header }}
      

        @let cellValue = element[property];
        
          {{ cellValue?.value }}
        
        {{ cellValue }}
      
    

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

    
      

  
{{ columnDef.header }}
      

        
          {{ element[columnDef.propertyName]?.value }}
        
        {{ element[columnDef.propertyName] }}
      
    
  

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

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

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

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

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

Пример:

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

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

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

© Habrahabr.ru