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

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

Статья о том, почему Реакт может стать не лучшим выбором для большого долгосрочного проекта.
Автору пришлось столкнуться с проблемой широкого выбора инструментов в мире Реакта: чем больше вариантов, тем больше мнений о том, как правильнее было построить приложение. Особенно, если твои новые коллеги — бывшие .NET'чики.

Очень сложно объяснить разработчикам с других платформ, почему в React нет Dependency Injection; зачем нужны функциональные компоненты, когда есть прекрасные классы; ну и можно бесконечно долго спорить о том, как называть файлы и работать с сетью. Всё это требует обсуждений, поиска плюсов и минусов и, конечно же, принятия ответственности за выбранное решение.

Когда приложение разрослось, когда количество зависимостей перевалило за тысячу, а горячая сборка стала занимать 15 минут — тогда технический директор предъявил автору за неправильные и необдуманные решения. И автору пришлось потрудиться, чтобы доказать, что выбранный стек вокруг Реакта был наилучшим из возможных.

[EN] Джейк Арчибальд предупреждает: не передавайте функции в качестве колбеков, если они не предназначены специально для этого. Например, ['-10', '0', '10', '20', '30'].map(parseInt) неожиданно вернет не массив преобразованных чисел из строк, а [-10, NaN, 2, 6, 12]. Так происходит, потому что переданная в map функция вызывается со всеми аргументами, а parseInt вторым аргументом принимает систему счисления.

Особенно это опасно с библиотеками и встроенными в язык функциями. Выражение может работать сегодня, но со временем сигнатура переданной функции поменяется, что приведёт к неожиданным последствиям в рантайме. К счастью, часть таких кейсов можно закрыть ESLint-плагином.

[EN] Что изменилось в мире Реакта с 2016 года? По большому счёту, ничего кардинального. Разве что вместо классовых компонентов сейчас всё чаще предпочитают хуки. React Router всё ещё самый популярный роутер, а Redux  чаще других используют для управления состоянием.

Но вот что изменилось за 5 лет, так это работа с данными от сервера. Сейчас всё реже можно встретить работу с данными прямо внутри Redux и всё чаще — с использованием библиотек react-query и swr. Они берут на себя обработку ошибок, обновление данных в фоне, пэйджинацию, кэширование и инвалидацию кэша.

Самыми ожидаемыми фичами в 2021 году можно считать Suspense, анонсированный 3 года назад и совсем свежие Server Components.

[EN] Видели новую главную страницу GitHub? Не ту, которая с вашими репозиториями и серой плиткой, а лендинг github.com, на который можно попасть, если вы не авторизованы?

Обратите внимание, что страница загружается быстро и работает плавно, хотя там и анимации и 3D и видео. После таких лендингов обычно приходится класть ноутбук в морозилку, а тут — ничего.
Команда GitHub рассказала о том, как им это удалось.

Как и следовало ожидать, какого-то одного секрета нет, а такая производительность обусловлена целым рядом мелких улучшений:
- Анимируются только элементы, видимые на экране прямо сейчас. Для этого используется IntersectionObserver API;
- Через transition анимируются только нужные свойства;
- Большую полупрозрачную иллюстрацию в футере сохранили в формате WebP, а для старых браузеров использовали SVG с двумя JPG файлами: один — сама иллюстрация, второй — маска, по которой SVG обрезает картинку.

[EN] Когда нужно задеприкейтить функцию, можно просто пометить её @deprecated в комментарии JSDoc и указать новое название функции. Редактор кода увидит, что функция устарела, перечеркнёт все её вызовы и покажет комментарий с новым названием.
Но что если вам нужна не новая функция, а новые аргументы: раньше они передавались списком, а теперь одним объектом?

Для этого можно воспользоваться перегрузкой функций в TypeScript.
Указываем в интерфейсе сигнатуру старой и новой функции, помечаем старую как @deprecated, и (тут могло быть совсем красиво, но нет) разруливаем поведение функции, в зависимости от typeof переданных аргументов.

Решение спорное — почти всегда будет лучше создавать новые функции и депрекейтить старые.