Советы по проектированию и разработке с применением EmberJS, касающиеся производительности приложений

Золотые правила разработки приложений на EmberJS

1. При проектировании компонентов или форм нужно использовать “отложенный рендеринг” блоков, которые пользователь не видит. Если у вас есть панель настроек, фильтров, и т.п. изначально скрытые для пользователя блоки - реализуйте hbs-шаблон таким образом, чтобы рендеринг их производился по событию показа этого блока пользователю.
2. При длительной (больше 0.3 сек.) загрузке некоторого блока - используйте “Semantic UI компонент Loader”, означающий загрузку. Пользователь увидит, что система не “зависла”, что процесс идёт, значит система работает. Кроме того, ощущение переключения визуальной составляющей на Loader и обратно даёт эффект “сжатия времени” для пользователя - на коротких интервалах пользователь не чувствует что система заставляет его ожидать.
3. При проектировании и реализации hbs-шаблонов по возможности следует избегать вложенных друг в друга компонент и хелперов. Как правило, можно разработать hbs-шаблон, который будет содержать только html-компоненты и базовые хелперы, такие как условия, циклы, биндинги. Глубокая вложенность компонентов гарантированно снижает производительность приложения.
4. Для свойств, которые участвуют в hbs-шаблоне важно правильно спроектировать логику их изменения: каждое изменение такого поля может приводить к перерендерингу вложенной части шаблона. Правильный жизненный цикл, который работает оптимально, такой: сначала выполнили инициализацию свойств, которые могут несколько раз измениться, затем запустили рендеринг (см. п. 1 и 2). В самом плохом варианте изменение свойств будет выполняться в хуках, связанных с рендерингом компонентов и страниц, что гарантированно приведёт к перерендерингу шаблона (EmberJS для такой ситуации также генерирует в консоль браузера Warning-сообщение о проблемах с производительностью).
5. Используйте инструменты профилирования производительности Ember-приложений.

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

• Perforator - расширение к Google Chrome, показывающее время рендеринга ember-компонент.
• Сервис perf - аналогичная Perforator функциональность, но встроенная в ember-flexberry (может использоваться в браузерах, отличных от Google Chrome).
• Консоль браузеров - большинство современных браузеров позволяют выполнять профилирование JS-кода.

Сервис perf

Для ember-приложений, в которые установлен аддон ember-flexberry включение сервиса perf производится в файле config/environment.js.

module.exports = function(environment) {
  // ...
  var ENV = {
    // ...
    APP: {
      // ...
      perf: {
        enabled: true,
      },
      // ...
    }
  };
  // ...
  return ENV;
};

После его включения нужно перезапустить ember serve, чтобы изменения в конфигурации были применены. Если всё сделано верно, то в консоли браузера при рендеринге hbs-шаблонов начнут появляться записи о времени рендеринга.