Template binding

Функциональность

Data binding automatically keeps your page up-to-date based on your application's state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.

Как оно работает

Почему здесь перфоманс важен

Чем быстрее пользователь увидит новые данные, тем лучше

Примеры плохого кода

Вызов методов из темплейт

Создание конфиг объектов на темплейтах

Использование геттеров для темплейт, так как они прячут поведение и вызываются на каждом тике

Примеры хорошего кода

Использование пайп для форматирования данных

Использование OnChanges хука если данные изменяются на инпут параметрах

Можем ли мы писать проект без этого

Технически да, но это базовая фича избавление от которой ставит под сомнение использование ангуляра в целом

• Каким образом

  При помощи innerHtml аттрибутов и Renderer2 Нативное слежение за событиями при помощи addEventListener

• С какими трудностями столкнемся

  Так как мы отключим практически все преимущества самостоятельного обновления нод, подписок и отписок от событий, то нам придется прописывать все эти моменты самостоятельно.

• Какие преимущества это нам даст

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

Подводные камни

Темплейты компилятся в джаваскрипт и их не существует при билде в prod окружении

Это настоящий живой DOM, соответственно все изменения в темплейтах (как это можно назвать) отображаются в доме сразу после чейндж детекшна

Есть вероятность увидеть байндинги с неопределенными значениями

Ангуляр не может проверить глубоковложенные изменения объектов, переданные по ссылке

Ангуляр не может увидеть изменения произошедшие внутри компонент (все что не детектится зоной)

Что влияет на перформанс в этой фиче?

Байндинги проверяются на изменения при каждом cdr.run, поэтому на перформанс влияет все что может обновляться при этом.

Каждый тик для каждого из байндингов в аттрибутах, хост-проперти, интернализации, проперти, стилях вызывает проверку обновился ли байндинг

export function bindingUpdated(lView: LView, bindingIndex: number, value: any): boolean {
  const oldValue = lView[bindingIndex];

  if (Object.is(oldValue, value)) {
    return false;
  } else {
    lView[bindingIndex] = value;
    return true;
  }
}

Обновление байндингов синхронное и соостветственно при вызове функций из темплейт могут получится рендер лаги

Как можно избавиться от негативного влияния на перформанс

Использовать пайпы

Не вызывать методы напрямую из темплейт

Не создавать объекты

Чего не хватает в базовой функциональности

Определение изменилось ли что-то в объекте без нужды в вызове ngDoCheck каждый раз

Константных интерполяций, которые не будут проверяться на каждом тике

Темплейты не видят импортов, поэтому для всяких разных импортируемых массивов/энамов надо заводить переменную в компоненте

Что кажется избыточным в базовой функциональности

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