В данной статье мы рассмотрим текущее состояние экосистемы 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 - библиотеки, которые по мимо работы с запросами предоставляют возможность кеширования запросов с ревалидацией, показа состояния загрузки и обработку ошибок.
Предлагаю поделиться своим видением текущей экосистемы реакта. Буду рад прочесть другие мнения в комментариях. Всем удачи и не болейте! 👋
