Экосистема React в 2022 году

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

Мы рассмотрим язык, библиотеки для различных use-кейсов и инструменты которые удобны, полезны, а иногда и необходимы для разработки фронтенда в 2022 году.

Считаю, что статья будет полезна как новичкам, которые хотят понимать, что им важно знать, чтобы уверенно разрабатывать будущие проекты, так и профессионалам, которые могли погрязнуть в 3-4 годовалых проектах с легаси кодом и им хотелось бы посмотреть на стороннее мнение о экосистеме.

Начнем с языка и пунктов, которые лежат у основ реакта и относятся больше к экосистеме всего фронтенда.

JavaScript → TypeScript

Последние пару лет TS плотно лег в список необходимых инструментов для создания веб приложений. Он окончательно снял с наших плеч метание между babel плагинами, которые позволяют включить тот или иной синтаксис в JS, а также дал нам больше строгости в код. Теперь мы просто везде пишем на TS и я рад, что рынок веб разработки не свернул с тропы типизации. Сейчас очень редко мы слышим, что TypeScript ударажает и замедляет разработку.

IE11 всё

Вторая отличная новость, что мы наконец таки перешагнули бездонную пропасть между Internet Explorer 11 и текущими браузерами. Microsoft официально прекратит поддержку браузера летом 2022 года. Хотя естественно он никуда не изчезнет и будет еще доступен в специальных сборках Windows, а также браузер Edge будет иметь режим IE11, для отображения старых сайтов, но в любом случае крупные проекты уже начали отказ от поддержки IE и это очень радует.

Этот шаг нам дает возможность полноценно пользоваться новыми спецификациями и функциями, а также новыми версиями библиотек, которые основаны на API, не поддерживаемом IE (Mobx, Bootstrap и пр).

Сборщики

Webpack

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

Он обновился до пятой версии, привнеся нам большую производительность и крутые фичи такие как Module Federation

Babel

Babel также является основным инструментом, который может транспайлить наш код в старые синтаксисы, добавлять полифилы, кешировать результат и прочее.

Но текущие лидеры сильно отстают в скорости таким инструментам как ESBuild, Vite и SWC. Vite в свою очередь претендует на конкуренцию Webpack, называя себя инструментом для фронтенда нового поколения. Поэтому смею предположить, что в скором времени лидерские позиции в сфере сборщиков могут поменяться.

Create React App

Приближаясь все ближе к Реакту нельзя забывать основной инструмент для создания проектов — Create React App. Он все также полностью снимает с нас вопрос о настройке проекта и конфигурировании сборки и вам действительно достаточно выполнить одну команду в терминале и можно сразу начать работу. Последний релиз версии 5.0, добавил нам возможность использовать Tailwind без изменения конфигурации, которая кстати говоря была возможна только с использованием сторонних библиотек (пр. Craco)

React

Ну а теперь давайте пройдемся по текущей ситуации с экосистемой Реакта.

Думаю тут стоит начать с компонентов, а именно с функциональных. Как бы я не любил классовые компоненты, считаю что функциональные окончательно победили и теперь необходимо уметь готовить сложные компоненты заворачивая логику в хуки, понимая когда важно их использовать, а когда можно обойтись без них (я про useCallback и useMemo). Также большинство библиотек с обновлениями предоставили собственные хуки, для получения данных или каких-нибудь действий, что тоже в свою очередь заставляет нас переписывать классы на функции.

Грядущая 18ая версия реакта привнесет полезное обновление для работы хуков — автоматический батчинг всех вызовов сеттера useState, что позволит избежать лишних рендеров:

const [count, setCount] = useState(0); const [flag, setFlag] = useState(false);  function handleClick() {   fetchSomething().then(() => {     setCount(c => c + 1);     setFlag(f => !f);     // React перерисует компонент только один раз   }); } 

React фреймворки

Учитывая, что Реакт всегда являлся библиотекой для отрисовки интерфейсов, то для создания сложного проекта с статическими страницами, серверным рендерингом, кешированием и прочим, нам приходится готовить кучу сторонних библиотек, кода и инструментов.

Решают эту проблему фреймворки, которые основаны на React и из коробки привносят более широкий функционал для разработки масштабных проектов.

NextJS / Gatsby

Лидерами в этой нише являются NextJS и Gatsby. Они привносят возможность серверного рендеринга и статическую генерацию страниц с очень простой настройкой. Также они обладают рядом готовых к использованию оптимизаций, которые позволяют добиться высокой скорости работы приложения.

NextJS в конце 2021 года получил обновление до 12 версии. В ней команда разработчиков как и прежде сконцентрирована на оптимизации скорости работы приложения. Были представлены Middleware для страниц, позволяющие выполнять действия с запросом в момент его исполнения, что дает возможность авторизовывать пользователя и делать редиректы, еще до выполнения логики страницы. Также NextJS получил Rust compiler (SWC), который в разы увеличивает скорость сборки бандлов приложения.

Gatsby обновился до 4 версии и привнес улучшенное решение статической генерации сайтов, которая не требует пререндера в момент сборки проекта.

Remix

Но самым важным событием конца 2021, в нише фреймворков, стал open source релиз проекта под названием Remix. Это SSR фреймворк, который обладает функционалом в виде вложенных роутов, что дает возможность загружать контент страницы параллельно, а также и обрабатывать ошибки на каждый роут. Еще одним интересным подходом является работа с формами, которая реализована как в старые времена через браузерный API форм, это позволяет реализовывать простые страницы с формами, которые могут работать вообще JS на стороне браузера.

Как вывод этого раздела, то лично для меня развитие и существование фреймворков на Реакте имеет огромный плюс для как нас, так и для индустрии. Фреймворки всегда создавались с целью упрощения и ускорения разработки проектов, предоставляя готовые к работе инструменты, уменьшая нашу работу. Знание этих фреймворков в 2022 я считаю обязательным, так как они продолжают заходить в enterprise и многие крупные компании создают проекты именно на реакт фреймворках.

React библиотеки

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

Роутинг

В нише SPA приложений лидером был и остается react-router. Он удобен, прост в освоении и предоставляет хуки на все необходимые случаи.

С последним мажорным обновлением react-router предложил нам кардинально новый подход к организации роутов, который также был интегрирован в Remix. Более подробно можно ознакомиться на главной странице проекта reactrouter.com
(Спасибо за комментарий @Amper)

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

Менеджмент состояния

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

Главным игроком на рынке состояний все также остается Redux. Хоть и хайп вокруг него утих, но за время своей славы он успел попать в enterprise и сложный продакшн. Поэтому мы долго теперь будем иметь с ним дело. Да и вакансий требующих его знание подавляющее большинство.

Стоит заметить, что Redux развивается в сторону решения основных спорных моментов и с релизом Redux Toolkit появилась возможность сократить количество boilerplate кода и мутировать состояние, если кому-то было это важно делать.

Вторым по популярности менеджером состояний является Mobx, за счет простоты использования и реализации реактивности через наблюдаемые объекты (observable).

Формы

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

В случае когда в проекте большое количество сложных форм, нам на помощь приходят библиотеки, которые уменьшают объем повторяемого кода и упрощают нам работу:

• react-hook-form — По моему мнению лучший инструмент для создания форм. Используя хуки, можно легко создавать формы, обрабатывать и валидировать данные. Библиотека отличается еще тем, что хранит стейт форм с помощью самого браузера, что позволяет достичь практически нулевого количества пере-рендеров форм в процессе работы с ней.

• formik — Еще одна популярная библиотека для работы с формами. Реализована она через компоненты, но также возможно использовать хуки.

Стилизация

Инструменты, которые мы используем для стилизации наших проектов не меняется кардинально из года в год. А самое важное, что тут не наблюдается какого-то единственного лидера. Я же только приведу небольшой список подходов и библиотек, которые чаще всего встречаю в проектах:

• Чистый CSS или препроцессоры (SCSS, LESS)

• Tailwind

• styled-components

• UI библиотеки

  • Material UI

  • Ant Design

  • React-Bootstrap

Запрос данных с сервера

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

• fetch / axios — для работы с REST API

• Apollo GraphQL

• swr, react-query — библиотеки, которые по мимо работы с запросами предоставляют возможность кеширования запросов с ревалидацией, показа состояния загрузки и обработку ошибок.

Предлагаю поделиться своим видением текущей экосистемы реакта. Буду рад прочесть другие мнения в комментариях. Всем удачи и не болейте! ?