Фронтенд дайджест #208 Лучшее за неделю Подкаст [EN] Витал | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #208
Лучшее за неделю
Подкаст

[EN] Виталий Фридман из Smashing Magazine подготовил ежегодный чеклист по веб-производительности.
Монструозная статья содержит 77 рекомендаций с подробным разбором всех аспектов. Например, с чего начать заботу о производительности, какие бывают метрики, как подходить к выбору фреймворка, архитектуры и инфраструктуры проекта, как оптимизировать JS/CSS-файлы, изображения, видео и шрифты, а также какими инструментами для этого пользоваться.

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

Для самых нетерпеливых в конце есть список из 17 наиболее простых шагов, которые дают ощутимую часть результата.

[EN] Если, а точнее Когда ваше реакт-приложение начнёт тормозить — первая идея, которая у вас возникнет — это обернуть все проблемные компоненты в React.memo. Дэн Абрамов рекомендует не спешить с этим и предлагает рассмотреть две простые техники, которые помогут проще справиться с проблемой перфоманса. 

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

Вторая техника — если стейт не так просто отделить, то тяжёлый контент можно передавать, как children prop. Эта часть дерева не будет перерендериваться. А когда Server Components зарелизится, такой подход еще можно будет использовать, чтобы вообще вынести тяжелые части на сервер.

[EN] Для темизации Реакт-приложений, на базе CSS-in-JS, обычно используют обёртку ThemeProvider, который через Context API передаёт компонентам выбранную тему, а они уже вычисляют те или иные стили.
При изменении темы происходит перерендер всех таких компонентов, что может привести к проблемам с производительностью.

Автор предложил использовать для подобных целей CSS-переменные. Через data-атрибут на body устанавливается выбранная тема, а в стилях присваивают CSS-переменные для тёмной и светлой темы.
Таким образом, достаточно просто изменить data-атрибут, чтобы браузер сам заменил все цвета на странице, а реакту не пришлось ничего перерендеривать.
Кстати, таким же подходом пользуется и Facebook.

[EN] Автор сравнил разные степени сжатия для современных форматов изображений: WebP, AVIF и JPEG, чтобы подобрать наиболее оптимальные сочетания уменьшения размера и потери качества.
Например, при настройках сжатия JPEG в 60%, оптимальной альтернативой будут AVIF со сжатием 50% и 65% для WebP. На выходе вы получите меньший размер файла, относительно JPEG. Насколько меньший? На 36% для AVIF и на 15% для WebP. И это всё без видимой потери качества.

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

[EN] Состоялся релиз TypeScript 4.2. Вот что нового:
- Отображение алиаса юнион-типов, что упрощает дебаггинг в IDE;
- spread-оператор наконец-то может находиться в любой части массива, а не только в конце. Но, к сожалению, всё ещё только один и после него не должно быть опциональных элементов;
- Запрет использования оператора in с примитивами, поскольку это приводит к ошибке в рантайме;
- Добавлен модификатор abstract для сигнатур конструктора, позволяющий типизировать, например, фабрику миксинов;
- cli-флаг --explainFiles, позволяющий вывести все файлы, попавшие в компиляцию;
- Функции без вызова, в выражениях с && и ||, которые так любят использовать в JSX, будут вызывать ошибку со включенной опцией --strictNullChecks.
- Неиспользуемые переменные, при деструктуризации массивов, могут быть явно объявлены с помощью символа подчеркивания для предотвращения ошибки компиляции при включенной опции noUnusedLocals. 
- Опциональные свойства не вызывают ошибки при взаимодействии с сигнатурами строковых индексов — вот такими штуками [propName: string]: any;
- И конечно же, целый ряд breaking changes.

Если вы мало чего поняли — это нормально. Ребята из Microsoft делают очень подробные чендж-логи с примерами кода до и после.