Итоги недели в мире фронтенда и обзоры новых сервисов: почему React пора сдать в музей

Вышла новая версия супербыстрого сборщика и сервера разработки Vite 6. Основные изменения:

Кроме того, разработчики сделали страницу Breaking Changes с подробным описанием всех изменений, которые могут повлиять на проекты.

В новом релизе Astro 5.0 – фреймворка для разработки быстрых и SEO-оптимизированных сайтов, ориентированных на большой объем контента, – много всего полезного:

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В еженедельных письмах ты найдешь:

Сотрудники Nielsen Norman Group (консалтинговой фирмы по UI/UX) недавно опубликовали результаты исследования о роли атрибута alt во вспомогательных технологиях, в особенности – в экранных читалках. Основные выводы:

Автор CSS Tricks подробно проиллюстрировал эти выводы:

Что хотят услышать пользователи экранных читалок:

Алекс Рассел, известный специалист в области веб-технологий и веб-стандартов, подробно объяснил, почему React безнадежно устарел и не годится для использования в новых проектах. Это очень объемная статья, так что приведем только самые важные тезисы.

React создавался для эпохи, когда Internet Explorer 6 еще надо было поддерживать. Его архитектура (например, система синтетических событий и жестко заданный список элементов) была сделана с учетом ограничений IE. Сейчас эти ограничения не актуальны, а React продолжает загружать тонну пакетов для поддержки IE.

React заявлял о высокой производительности благодаря виртуальному DOM, но эти заявления были опровергнуты еще в 2015 году. Виртуальный DOM добавляет лишнюю работу, которую другие современные фреймворки просто не делают, используя более легкие и эффективные подходы. Это приводит к дополнительным нагрузкам на процессор, что особенно заметно на маломощных устройствах.

Многие проблемы React, например, «прыжки» макета или неоптимальные перерисовки интерфейса, вынуждают разработчиков использовать сложные и специфичные инструменты для их решения. Эти решения не нужны в других фреймворках, где таких проблем изначально нет.

Современные реактивные библиотеки, такие как Svelte, Solid.js или Astro, предлагают аналогичные возможности без больших нагрузок на систему и сложной отладки. Они меньше по размеру, быстрее работают и лучше вписываются в современные архитектуры.

Многие команды выбирают React из-за его популярности, не учитывая, что многие проекты, от простых сайтов и блогов до интернет-магазинов, могут быть разработаны быстрее и проще без SPA-архитектуры, которая создает излишнюю сложность и увеличивает время загрузки. К тому же React избыточен для приложений, которым не нужны длинные пользовательские сессии и сложная интерактивность.

Если вы используете React, переход на другую платформу может стать серьезной проблемой из-за закрытости его экосистемы. Например, поддержка Web Components в React ограничена.

К примеру, производительность Next.js оставляет желать лучшего – и в основном из-за React:

React требует больше ресурсов – как серверных, так и клиентских. Кроме того, зарплаты специалистов по React выше, что увеличивает затраты на проект. Компании, избегающие React, часто выигрывают за счет более низких затрат на инфраструктуру и зарплаты.

Другие фреймворки и подходы, такие как SSR (серверный рендеринг) или CSR (рендеринг на стороне клиента), позволяют достигать реактивности без избыточного веса и излишней работы, присущих React. Например, Astro позволяет комбинировать статические сайты с реактивными компонентами только там, где это нужно.

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

А в худшем – осознанное искажение реальности, которое умалчивает о многообразии стека инструментов, связанных с React. Ведь React – это не просто библиотека, а целый образ жизни с кучей выборов на каждом этапе. Какой тип компонентов использовать: функциональные или классовые? Какой язык и компилятор предпочесть – TypeScript или все же JavaScript? Какой менеджер пакетов – npm, Yarn, pnpm, Turbo? Какой сборщик – Webpack, esbuild, SWC, Rollup? А что с инструментами вроде Vite, Turbopack или Nx? Или, скажем, какой инструмент для управления состоянием выбрать – Redux, MobX, Apollo или что-то другое? И это еще до обсуждения плагинов для обработки CSS или дополнительных подходов, которые многие команды пробовали интегрировать, например, CSS-in-JS.

Многие крупные компании, которые раньше активно использовали React Native, теперь от него отказались, потому что на нем можно создать только две вещи:

Источник

Иногда содержимого страницы недостаточно для того, чтобы футер оказался прижатым к низу. Эту проблему легко решить с помощью flex:

С помощью медиазапросов pointer можно улучшить пользовательский интерфейс, адаптируя его под разные устройства ввода (мышь или сенсорный экран):

Свойство inset – это сокращение для определения отступов от краев контейнера. Оно объединяет в себе свойства top, right, bottom и left, что делает код компактнее и удобнее для чтения:

Псевдокласс :empty позволяет стилизовать элемент, если он не содержит дочерних элементов или текста. Это может быть полезно для добавления временного контента, например, текста-заполнителя, когда изображение не загрузилось:

Псевдокласс :where() – мощный инструмент для применения стилей к группе элементов без повышения специфичности. Он идеально подходит для универсальных стилей, таких как сбросы (reset) или общие стили, которые не должны конфликтовать с более специфичными правилами:

Свойство font-variant-numeric позволяет выровнять цифры для улучшения их читаемости в определенных ситуациях (таблицы или финансовые отчеты). В частности, значение tabular-nums заставляет цифры занимать одинаковое пространство по ширине, чтобы они выстраивались в виде аккуратных колонок:

Свойство -webkit-line-clamp позволяет ограничить текст определенным количеством строк и добавляет многоточие (...) при превышении этого лимита. Это полезно для управления переполнением текста в карточках, списках или других компонентах с фиксированной высотой:

Новые свойства трансформации scale, rotate, translate и другие позволяют применять трансформации по отдельности вместо того, чтобы комбинировать их все в одно свойство transform. Это улучшает читаемость и упрощает поддержку кода, так как каждая трансформация теперь задается отдельно:

Псевдокласс :has() позволяет стилизовать родительский элемент в зависимости от того, содержит ли он определенного потомка. Это позволяет создавать более динамичные и интерактивные стили, чего раньше было сложно достичь с помощью стандартных CSS-селекторов:

Системные цвета – это специальные цвета, которые соответствуют цветовой схеме операционной системы или браузера пользователя. Использование системных цветов позволяет вашему сайту автоматически адаптироваться под предпочтения пользователя (темная или светлая тема):

Container Queries позволяют стилизовать элементы в зависимости от размера их контейнера, а не только от размера вьюпорта (окна браузера). Это позволяет создавать более гибкие и контекстно зависимые адаптивные дизайны, ориентированные на компоненты:

Свойство accent-color позволяет легко менять основной цвет встроенных элементов формы – чекбоксов, радиокнопок и диапазонов (<input type="checkbox">, <input type="radio">, <input type="range">). Это упрощает стилизацию и помогает создать визуально согласованные и эстетически привлекательные формы:

Функция clamp() – мощный инструмент для определения адаптивных размеров шрифта. Она позволяет задать минимальное, предпочтительное и максимальное значение размера шрифта одновременно, что сделает текст удобочитаемым на любых устройствах:

Автор рассылки: Наталья Кайда