Всем привет, это «Новости 512» от CSSSR. С небольшой задержкой новости прибыли. В этом выпуске мы коротенько пробежимся по тому, что было на React Conf, посмотрим на отдельные материалы о новых фичах React 19 и не только. Мы обсудим слияние Remix и React Router, сравним менеджеры версий Node.js, посмотрим на интерактивный гайд по Container Queries и другие материалы. Также сегодня релизы браузеров, выход Angular 18 и результаты State of HTML 2023.
Интересные публикации
Первый в этом выпуске — кейс Figma. Оказывается, что под капотом у Figma свой собственный язык Skew, который сейчас компилится в JavaScript и позволяет применять сложные оптимизации. В основном он применяется для мобильного движка рендеринга редактора. В итоге было принято решение отказаться от Skew и мигрировать на TypeScript. Было несколько причин: рост команды и необходимость в унификации, прогресс WebAssembly и TypeScript и другие. В статье описывается кейс, схематично изображено, как проводили переход, не нарушая работу команд и не останавливая работы по развитию продукта.
Фреймворк Remix и React Router объединяются. Они уже довольно давно начали сближаться, поэтому было принято решение их объединить. Выйдет ещё третья версия Remix, а потом седьмая версия React Router, которая и станет результатом объединения. В результате получится лучшая производительность и удобство использования. В седьмой версии роутера будет добавлен Vite, и получится мега-микс из фич Remix и React Router на стероидах. Обещают, что не будет никаких болезненных переходов, а просто скриптом поменяются импорты, и всё будет работать. Больше подробностей — в блоге Remix.
Следующий материал для тех, кто интересуется React, но не попал на React Conf в онлайне. Это, собственно, обзор докладов и новостей с конференции. Здесь, конечно, будет про React 19 и его новые фичи, новости React Router, о которых я только что говорил, будет также про React Compiler и другие новые возможности.
Вместе с этим обзором я принёс вам и отдельные материалы на разные темы, которые касаются новой версии React. Например, Дариус Цепулис (Darius Cepulis) в своём блоге написал заметку о серверных компонентах и новых экшенах. Там вы найдёте короткое объяснение и примеры.
Лазар Николов (Lazar Nikolov) в SmashingMagazine погрузился в детали работы серверных компонентов. Это уже более подробный материал, в котором он рассказывает о том, как в принципе появилась идея создания серверных компонентов и как они помогают разгружать клиентскую часть приложения. Там же и обзор возможностей серверных компонентов и тонкостей их работы.
Тем временем Джэк Херрингтон (Jack Herrington) в своём видео погрузился в детали работы React Compiler. Можно сказать, что это продвинутый лоадер с мемоизацией из коробки. Пока не совсем понятно, как хорошо он будет настраивать мемоизацию на практике, но посмотрим. А Джек в своём видео начинает с простых примеров, плавно вникает в устройство компилятора и двигается к более продвинутым примерам. Что нужно подчеркнуть: компилятор не включён в React 19 и выйдет позже, а также он не будет работать с MobX: они несовместимы. Видео идёт всего 15 минут, так что можно его быстренько посмотреть.
Дальше интересность для всех, кто работает с Node.js и часто переключает версии. Павел Романов написал статью-сравнение пяти менеджеров версий ноды. Он сравнивает NVM, N, FNM, Volta и pnpm, рассматривает их плюсы и минусы, а в итоге своё личное предпочтение отдаёт Volta. Лично мне ближе pnpm, но на вкус и цвет фломастеры разные. При этом как минимум стоит взглянуть на альтернативы — возможно, вы найдёте для себя что-то новое.
Теперь немного практики. Ахмад Шадид (Ahmad Shadeed) порадовал нас своим новым интерактивным гайдом. На этот раз речь идёт о Container Query. Если помните, он уже делал классный интерактивный гайд по :has(), этот — подобный. В нём есть анимированные примеры, плавное усложнения материала и наиболее распространённые случаи применения фичи. Всё компактно упаковано, хорошо объясняется — в общем, рекомендую.
Следующая статья посвящена веб-скрейпингу. Я бы даже не сказал «статья», потому что она довольно объёмная — это скорее крепкий гайд. Напомню, скрейпинг — это извлечение информации из веб-страниц. Здесь примеры того, как вообще извлекать и собирать данные, некоторые полезные подсказки и трюки. Попробуйте, это прикольно и может пригодиться для какого-то личного проекта. Но хочу предупредить, что это дело немного затягивает.
Дальше ещё парочка материалов, в которых стоит поразбираться и поделать что-то руками. В первом автор предлагает написать свой аналог React за 400 строк кода. Такие статьи иногда неплохо помогают на примере упрощённой реализации разобраться в фреймворке. Второй материал — гайд по созданию Drag’n’Drop между приложениями.
А вот вам гайд по прокачке своего GitHub-профиля. Автор при помощи Bun и TypeScript динамически подтягивает в README своего профиля посты из своего блога. Это можно использовать как прекрасный пример для того, чтобы отображать что-то своё — были бы желание и фантазия.
В блоге Deno появилась заметка о том, как правильно документировать свою библиотеку. В основном она посвящена JSDoc, о котором вы слышали или, возможно, уже пользуетесь. Здесь как примеры и разбор фич JSDoc, так и полезные советы по тому, как держать документацию в актуальном состоянии и как к этому подойти. Хорошая статья, очень советую.
В конце рубрики ресурс webstatus.dev, на котором можно посмотреть список браузерных фич и узнать о поддержке в разных браузерах.
Новости релизов
Доступен Chrome 125. В новой версии появилось якорное позиционирование, был добавлен новый API Compute Pressure, который помогает экономить энергию устройств. Также Storage Access API теперь можно использовать не только для кукис. К Devtools прикрутили ИИ, который сможет объяснять ошибки и помогать их устранять. Больше подробностей о релизе — в официальных обзорах Chrome и DevTools от Google.
Вышел Firefox 126. В этом релизе был добавлен метод URL.parse(), была добавлена поддержка CSS-свойства zoom и псевдоселектора :state(). В API IndexedDB добавлен метод IDBFactory.databases() для перебора имеющихся баз данных, который возвращает массив с именами доступных баз. Помимо этого, в CSS была добавлена экспериментальная функция shape(), которая позволяет формировать фигуры с использованием CSS-свойств clip-path и offset-path.
Фреймворк Angular отметился новой мажорной версией за номером 18. В этом релизе новый синтаксис потока управления уже не экспериментальный. Добавили @defer для ленивой загрузки шаблонов, добавили кучу фич, связанных с сигналами, и наконец ушли от использования zone.js. Если подытожить, то в этом релизе была завершена работа над несколькими вещами, над которыми трудились несколько лет.
Next.js обзавёлся релиз-кандидатом 15-й мажорной версии. Прямо сейчас я не буду на ней останавливаться, мы обсудим её на релизе, но имейте в виду, что RC уже есть.
Вышел апдейт текущей LTS-версии Node.js 18.20.3. В нём обновили зависимости и исправили баг, из-за которого метод http.server.close() некорректно закрывал неактивные соединения. Также вышло обновление Node.js 22.2.0.
Продолжая тему рантаймов: Bun получил обновления 1.1.7 и 1.1.8. Оба релиза посвящены в основном фиксам багов и небольшим доработкам, так что, если вы ждали обновы с устранением актуальной проблемы, стоит заглянуть в release notes.
Astro 4.8 получил парочку экспериментальных фич. Это свои собственные экшены и возможность отображать контент другой страницы по текущему URL, что может пригодиться для кастомизации контента или каких-то A/B-фич. Помимо этого, пофиксили ряд багов.
В этом выпуске также отмечу релизы Playwright 1.44.0, pnpm 9.1.0 и Storybook 8.1.0.
Другие новости
Доступны результаты опроса State of HTML 2023. Я думаю, что скоро подъедут и результаты опросов по React и JavaScript — о них мы тоже поговорим. Итак, в этом году опрошенным очень понравился новый Popover API, тег , нативная ленивая загрузка и семантические элементы разметки. Радует, что семантическая вёрстка уже стандарт, а не новинка. При этом сложности вызывает освоение доступности и поддержка фич браузерами, несмотря на то, что инициатива Interoperability работает. Больше подробностей — по ссылке в описании.
Vercel поднял новый раунд инвестиций на 250 миллионов долларов. Напомню, что это ребята, которые сделали Next.js и строят свою облачную инфраструктуру для развёртывания проектов. Что это значит? Что ребята продолжат развивать Next.js, и в скором времени мы сможем увидеть новый виток развития продуктов компании. Посмотрим, что из этого получится.