Интересные публикации
Чан Ву (Chang Wu) в блоге Plasmic рассказал про внутреннее устройство React Server Components (RSC). Вы уже могли слышать про фичу в ранних заметках о React 18 или на ReactConf. Это экспериментальный тип компонентов, которые позволяют выносить некоторую часть логики приложения на сервер и не включать в бандл. В статье рассматривается устройство серверных компонентов, разделение логики и жизненный цикл таких компонентов. Затем объясняется, как это всё в итоге обрабатывается браузером. В общем, относительно небольшой и подробный гайд-разбор по серверным компонентам, получилось неплохо.
Какие проблемы решают веб-фреймворки, и как можно без них обойтись? На этот вопрос в своей статье на SmashingMagazine пытается ответить Ноам Розенталь (Noam Rosenthal). Он выбрал для сравнения React, Svelte, Lit и Solid.js и показывает, как эти фреймворки привносят реактивность, решают проблемы работы с данными и логикой приложений. За пределами статьи он оставил компонентный подход, но в целом, как вы понимаете, работа с компонентами — это ещё одна фича фреймворков, из-за которой они и нужны. Планируется вторая часть, в которой автор собирается показать, как это всё можно провернуть без фреймворков, должно быть довольно интересно.
Минко Гечев (Minko Gechev) на YouTube рассмотрел распространенные проблемы производительности фреймворка Angular: zone pollution, change detection вне компонента, лишние перерасчеты в шаблонах и слишком массивные деревья компонентов. В видео он объясняет, как именно эти проблемы возникают и как их можно решить. Видео чуть меньше 20 минут, если вы работаете с Angular и не слышали о какой-то из этих проблем — обязательно посмотрите.
Следующий материал тоже по Angular, но несколько попроще. Мария Заид (Maria Zayed) написала заметку о жизненном цикле Angular-компонентов. Она рассматривает 7 методов жизненного цикла компонентов, их особенности и то, в каком порядке они вызываются. Всё это на примере маленького демоприложения.
Ангус Кролл (Angus Croll) из Netflix написал статью об обнаружении регрессий производительности. В его команде тесты производительности прогоняются и при коммите, и при слиянии в целевую ветку. В итоге для обнаружения аномалий используется специальный алгоритм, который анализирует данные большого количества прогонов. Потом при помощи статистических методов определяются конкретные сборки, в которых возникали проблемы. После внедрения техники количество ложно положительных падений тестов уменьшилось в 10 раз. Крутая статья для тех, кто интересуется мониторингом и не вполне типичными методами анализа проблем.
В последнее время довольно часто слышно о pnpm и его скорости. А можно ли ещё быстрее? На dev.to появилась статья разработчика из Alibaba про проприетарное решение tnpm, которое, по сути, является внутренним реестром пакетов для проектов Alibaba. Команда не искала легких путей и перелопатила архитектуру типичного менеджера пакетов. Было применено большое количество оптимизаций, от снижения числа запросов до работы с файловой системой и обращениями к диску. В итоге в одном из бенчмарков tnpm оказался в 10 раз быстрее pnpm. Понятное дело, это не значит, что tnpm всегда и везде в 10 раз быстрее pnpm, но посмотреть на оптимизации интересно. tnpm пока строго проприетарный, но в будущем его код планируют открыть.
Код-сплиттинг — это подход, при котором бандл может быть разделен на несколько бандлов, которые пользователь может получить по мере работы приложения. Таким образом, стоимость использования JavaScript в той или иной мере снижается. Именно об этом новая статья Адриана Беце (Adrian Bece). Он рассказывает о проблеме большого бандла, почему это плохо (я думаю, уже все знают и понимают, почему) и о том, как, собственно, организовать код-сплиттинг в бандле. Адриан приводит несколько стратегий разделения бандла. Если вы ещё не разбирались в концепции, то это неплохая возможность.
Ингвар Степанян (Ingvar Stepanyan) на web.dev написал статью о том, как собирать разные версии WebAssembly-бандлов для поддержки разных браузеров. Проблема в том, что не все браузеры поддерживают все фичи WebAssembly, что порождает необходимость иметь разные версии для разных браузеров. Ингвар рассказывает, как выбрать и логически сгруппировать нужные фичи, скомпилировать нужные наборы фич и, наконец, организовать загрузку правильного бандла.
Далее любопытная статья о фронтенд-трендах 2022 из блога HTMLAcademy. Самым важным трендом был назван отказ от старых браузеров и прекращение их поддержки, с чем я, конечно, согласен. Также 2022 год сулит быть годом TypeScript, React и новых CSS-фич. Отдельно обсуждается рынок труда. Верить описываемым трендам в статьях или стримах других людей — дело ваше, в этом случае есть ссылки на ресурсы, на основе которых писалась статья, так что можете почитать и сами.
Закроет рубрику ресурс monorepo.tools. Как вы могли догадаться, это ресурс о монорепозиториях. Там вы можете найти базовое определение монорепозитория, объяснение, для чего нужны и могут быть полезны монорепы, а также ссылки на дополнительные ресурсы. Как написано в самом начале страницы, там есть всё, что вам нужно знать про монорепозитории и инструменты вокруг них.
Новости релизов
Первый релиз — Chrome 98. В этой версии появилась поддержка нового формата шрифтов с поддержкой цветов, градиентов и смешивания COLRv1. При обращении к приватным сетям отправляются CORS Preflight-запросы. В инструментах разработчика теперь используется редактор на базе Codemirror 6, что позволяет обрабатывать большие файлы и исправить проблему со смещением скролла во время отладки. Lighthouse обновили до 9 версии, добавили панель дерева доступности и инструмент отладки кеша перехода вперед и назад. Больше подробностей традиционно в обзорах Пита Лепейджа и Джеселин Ин.
Вышли обновления 14 и 12 LTS-версий Node.js. В версии 14.19.0 была добавлена поддержка Corepack. Corepack уже есть в 17 версии, и я её упоминал, это технология, которая позволяет работать с разными пакетными менеджерами без их установки. Звучит интересно, но я так и не успел посмотреть, как это работает. На странице релиза можно найти ссылку на документацию Corepack. В обновлении 12.22.10 версию npm апнули до 6.14.16.
Вышел TypeScript 4.6 Beta, подробнее о новой версии TS я расскажу, когда выйдет релиз-кандидат.
Также на этой неделе отмечу релиз веб-сервера nginx 1.21.6.
Другие новости
Недавние волнения на тему безопасности и разные истории о пакетах в npm, которые кладут на лопатки весь интернет, заставили GitHub призадуматься. Компания выделила 100 пакетов, которые наиболее часто встречаются в зависимостях других пакетов и проектов. Для мейнтейнеров этих пакетов была введена обязательная двухфакторная аутентификация. Цель простая: сделать так, чтобы злоумышленники не могли получать доступ к важным пакетам и компрометировать их. Также были анонсированы и другие инициативы по безопасности, например, ускорение внедрения поддержки WebAuthn.
И в конце коротенькая новость. С 7 февраля Vue 3 станет новой версией фреймворка по умолчанию или, если хотите, основной версией.