Популярный выбор React Framework для разработки приложений React в 2023 году

Некоторое время назад Эндрю Кларк, один из членов основной команды React, опубликовал тему на Твиттер, начинающийся с такой фразы:

https://twitter.com/acdlite/status/1617611126514266112?embedable=true

Примерно в то же время Дэн Абрамов, другой член основной команды React, написал такой пост в комментарии к PR, предлагающему Vite в качестве замены CRA.

Было ощущение, что происходит что-то серьезное, поскольку многие разработчики годами использовали React следующим образом:

1. Создайте новое приложение с помощью CRA (возможно, в последнее время с помощью Vite).
2. Добавьте библиотеки по своему выбору, чтобы упростить себе жизнь.
3. ПРИБЫЛЬ.

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

Итак, что такое фреймворки React (также называемые метафреймворками React)?

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

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

Я хотел начать со списка, упомянутого в другом посте Эндрю Кларка:

https://twitter.com/acdlite/status/1617611129282527232?embedable=true

1. Next.js

Первым в списке является Next.js (хотя Эндрю может быть немного предвзятым, так как он недавно присоединился к Vercel, облачной платформа для развертывания и масштабирования веб-приложений на основе Next.js).

Фреймворк загружается 4 125 745 раз в неделю. Первоначальная версия была выпущена в октябре 2016 года, и по состоянию на 2023 год ей исполнилось около 7 лет.

Некоторые основные функции Next.js:

1. Отрисовка на стороне сервера (SSR) и создание статических сайтов (SSG): Next.js поддерживает отрисовку на стороне сервера и создание статических сайтов по умолчанию, что позволяет разработчикам лучше отображать страницы на стороне сервера. производительность и SEO или создавать статические сайты с динамической выборкой данных. Для этого вам просто нужно либо экспортировать функцию getServerSideProps, либо getStaticProps.
2. Автоматическое разделение кода: каждый файл внутри ваших страниц/директории будет автоматически кодироваться разделить на отдельный пакет JavaScript на этапе сборки, что означает, что для загрузки каждой страницы потребуется меньше кода.
3. Встроенная поддержка CSS: Next.js поддерживает модули CSS, Sass, Библиотеки PostCSS и CSS-in-JS.
4. Нулевая конфигурация: Next.js поставляется со встроенными конфигурациями, которые подходят для наиболее распространенных случаев веб-разработки, что позволяет разработчикам сосредоточиться на построении логики своего приложения, а не на настройке инструментов.
5. Поддержка TypeScript: Next.js изначально поддерживает TypeScript, который предлагает строгую типизацию, более простую отладку и лучший код. качество.
6. Оптимизация изображений. Next.js автоматически оптимизирует изображения, уменьшая их размер без потери качества. .
7. Маршруты API: Next.js предоставляет готовые маршруты API, что упрощает создайте серверную функциональность для своего приложения, если она вам нужна.
8. Маршрутизация на основе файлов: Next.js поддерживает маршрутизацию на основе файлов, что означает, что разработчики могут создавать новые страницы и маршруты. для них, просто добавив новый файл в каталог pages. Концепция страниц также поддерживает вложенные маршруты и динамические сегменты маршрутов.
9. Инкрементная статическая регенерация (ISR). Next.js поддерживает ISR, что позволяет поэтапно регенерировать страницы в фоновом режиме, предоставляя наиболее актуальный контент, сохраняя при этом быструю загрузку страниц.
10. Интеграция с Vercel: Next.js имеет встроенную интеграцию с Vercel, облачной платформой. для развертывания статических и бессерверных приложений, что обеспечивает плавное развертывание и масштабирование вашего приложения. Кроме того, это бесплатно для личных или некоммерческих проектов. Хотя вы можете развернуть свое приложение везде, где поддерживается Node.js, так как в основном приложение Next.js по-прежнему является приложением Node.js.
11. Режим предварительного просмотра. Next.js поддерживает режим предварительного просмотра, который позволяет редакторам контента просматривать изменения в в режиме реального времени перед публикацией.
12. Интернационализация. Next.js имеет встроенную поддержку интернационализации ( i18n), что позволяет разработчикам легко создавать многоязычные страницы.
13. Инструменты на основе Rust: от компилятора Next.js до Turbopack, инструменты на основе Rust широко используются в Next.js, чтобы предоставить разработчикам более быстрый DX.
14. Навигация на стороне клиента. Next.js обеспечивает навигацию на стороне клиента с помощью компонента Next.js Link, что обеспечивает плавный и удобный пользовательский интерфейс.

Субъективные минусы:

1. Кривая обучения: я имею в виду, что документы великолепны, но вам нужно изучить их, чтобы создавать что-то новое.
2. О некоторых вещах говорят самоуверенно, например. файловая маршрутизация и т. д. Это не совсем плохо, но есть шанс, что вы захотите сделать что-то по-другому, но не сможете этого сделать.
3. Чтобы получить максимальную отдачу от него, вам потребуется поддержка Node.js на вашем сервере. Хотя можно экспортировать ваше приложение как статический HTML/CSS/JS, чтобы вы могли разместить его. на любом веб-сервере, который может обслуживать статические ресурсы.

В целом, Next.js предоставляет все необходимое для создания веб-приложения. Очевидно, что основное внимание уделяется веб-сайтам/веб-приложениям, доступным для Google, но вы также можете создать клиентское приложение (также известное как SPA)< /а>.

2. Ремикс

Второй фреймворк в списке — Remix. Ремикс был представлен в декабре 2020 года командой Remix Software во главе с Майклом Джексоном и Райаном Флоренсом. Это относительно новый фреймворк, но он привлек большое внимание и популярность среди разработчиков благодаря своему уникальному подходу к рендерингу на стороне сервера и управлению данными по сравнению с другими фреймворками React.

Основные функции:

1. Визуализация на стороне сервера (SSR). Честно говоря, все в Remix — это SSR, поэтому нет выбора, как вы хотите отображать свое приложение. Это часть философии.
2. Постепенная гидратация. Remix использует добавочную гидратацию, которая обеспечивает более быстрое и плавное взаимодействие с пользователем за счет обновления только необходимых частей страницы при внесении изменений.
3. Автоматическое разделение кода. Remix автоматически разбивает код на более мелкие фрагменты для повышения производительности и ускорения загрузки.
4. Маршрутизация на основе файлов: аналогично Next.js Remix позволяет разработчикам создавать страницы, просто добавляя новый файл в каталог страниц, что упрощает организацию страниц и управление ими. Кроме того, поддерживаются вложенные маршруты.
5. Полное управление данными. Remix предлагает единый подход к управлению данными, позволяющий разработчикам управлять данными как на стороне клиента, так и на стороне сервера с помощью единого API.
6. Крюки предварительного рендеринга и повторного гидратирования. Remix предоставляет крючки для предварительного рендеринга и гидратации, что позволяет разработчикам контролировать рендеринг и гидратацию своих приложений.
7. Формы и проверка: Remix предоставляет простой и гибкий API для работы с формами, включая встроенную проверку и обработку ошибок.
8. инструменты на основе esbuild, что означает, что все работает быстро.
9. Стеки. По сути, стеки — это наборы всех конфигураций, которые вам нужны для начала разработки и чтобы иметь возможность развернуть свое приложение у вашего любимого облачного провайдера.
10. Встроенная поддержка CSS: Remix поддерживает многие фреймворки CSS из поле, хотя у него есть свои ограничения, поскольку команда предлагает вам использовать стили на основе маршрута или попутный ветер.
11. Поддержка TypeScript: Remix изначально поддерживает TypeScript.
12. Философия в целом заключается в том, чтобы поддерживать веб-стандарты, а не бороться с ними. Минусы:
13. Кривая обучения: то же самое, что и для Next.js. Вам нужно прочитать множество документов, чтобы освоиться с вашим проектом Remix.
14. Утверждение: честно говоря, философия Remix напомнила мне что-то из тех времен, когда нам приходилось использовать PHP/Ruby on Rails и т. д. Это не плохо, это просто другое.
15. Легко совершить ошибку, когда код на стороне сервера и на стороне клиента находится в одном месте: https://remix.run/docs/en/1.14.3/guides/constraints#rendering-with-browser-only-apis
16. Вам потребуется поддержка Node.js на вашем сервере.

Команда Remix активно продвигала свой продукт. Например. здесь сравнение Next.js и Remix (где Remix, конечно, немного лучше). На мой взгляд, это отличный инструмент, но его подходы немного отличаются от подходов, к которым привык мир Front End.

3. Гэтсби

Следующий фреймворк не упоминался в сообщении Эндрю Кларка, но лично я хотел включить его сюда. Он был представлен в 2015 году Кайлом Мэтьюзом. Изначально Gatsby представлял собой генератор статических веб-сайтов, теперь это нечто большее.

Вот некоторые особенности Гэтсби:

1. Параметры рендеринга: Gatsby исторически известен как генератор статических сайтов, улучшенный с помощью React Hydration. Но, начиная с Gatsby 4, вы можете выбирать альтернативные варианты рендеринга (отложенное статическое генерирование ( DSG) или SSR) в дополнение к статическому создание сайтов (SSG) — постранично.
2. Встроенный GraphQL: Gatsby включает встроенный уровень данных GraphQL, что упрощает для получения и управления данными из нескольких источников, включая API, CMS и базы данных.
3. Прогрессивные веб-приложения (PWA). Gatsby упрощает создание прогрессивных веб-приложений (PWA). ), которые работают в автономном режиме и могут быть установлены на мобильные устройства.
4. Оптимизация изображений: Gatsby предоставляет встроенные инструменты для оптимизации и обработки изображений, включая поддержку отложенной загрузки и адаптивных изображений.
5. Разделение кода: Gatsby автоматически разбивает код на более мелкие фрагменты для более быстрой загрузки и повышения качества. производительность.
6. Плагины и темы. Gatsby поддерживает плагины и темы, что упрощает расширять и настраивать платформу.
7. SEO-оптимизация. Gatsby включает встроенную поддержку SEO-оптимизации, включая автоматическое создание метатегов, карт сайта и обмен изображениями в социальных сетях.
8. Сетка контента. Gatsby предоставляет функцию сетки контента, которая позволяет разработчикам объединять данные из нескольких источников, включая автономные CMS, API и базы данных.
9. Инкрементные сборки: Gatsby позволяет разработчикам для поэтапной сборки, что означает, что при внесении изменений перестраиваются только необходимые части сайта, что ускоряет процесс сборки.
10. Интеграция с Gatsby Cloud, что позволяет использовать Бессерверные функции, предварительный просмотр в реальном времени, CMS Preview и разместите сборку приложения с помощью Gatsby.
11. Используя SSG, вы можете избежать использования Node.js на сервере, а значит, меньше вещей, которые могут выйти из строя в рабочей среде.
12. [Маршрутизация на основе файлов] Gatsby поддерживает маршрутизацию на основе файлов. позволяя настраивать маршруты так, как вам нужно.

Минусы:

1. Кривая обучения: опять же, это уже не просто React, и чтение документации — важнейшая часть вашего успеха с Gatsby.
2. Утверждение: даже после двух лет использования Гэтсби в производстве я все еще не уверен в некоторых аспектах философии Гэтсби, например. уровень данных GraphQL для меня немного сомнителен. Хотя при желании вы можете запросить данные без GraphQL. .
3. Вам потребуется поддержка Node.js на вашем сервере, если вы хотите использовать какие-либо параметры рендеринга, кроме SSG.

Если вам интересно узнать о моем личном опыте с Гэтсби, вот мой рассказ об этом (на русском). В целом, я думаю, что Gatsby очень хорошо подходит для создания современного веб-приложения. Недавно Gatsby присоединился к Netlify, платформе облачных вычислений, что означает, что в будущем мы сможем ожидайте более глубокой интеграции с ними.

4. Выставка

Последний фреймворк в списке — это Expo, который представляет собой фреймворк React Native, что означает, что он выполняет другую работу, но по-прежнему является мета-фреймворком в экосистеме React. Кроме того, с его помощью можно разрабатывать веб-приложения.

Основные функции:

1. Межплатформенная разработка: Expo позволяет разработчикам создавать и развертывать мобильные приложения для iOS, Android и Интернета. из единой кодовой базы с использованием React Native.
2. Встроенные компоненты и библиотеки. Expo включает множество готовых компонентов и библиотек, включая компоненты пользовательского интерфейса, навигацию и аутентификацию, которые упрощают создание мобильных приложений.
3. Перезагрузка в реальном времени. В настоящее время Expo обеспечивает перезагрузку в реальном времени, как и обычная среда разработки React, что встречается редко.
4. Push-уведомления. В Expo встроена поддержка push-уведомлений, что упрощает для отправки уведомлений пользователям вашего приложения.
5. Защищенное хранилище: Expo предоставляет защищенное хранилище для конфиденциальных данных, включая учетные данные пользователя и аутентификацию. токены.
6. Разумные значения по умолчанию. Expo устанавливает разумные значения по умолчанию для общих настроек и конфигураций, что позволяет разработчикам быстро приступить к работе.
7. Простое развертывание: Expo предлагает простой и удобный процесс развертывания, позволяющий разработчикам развертывать свои приложения в App Store и Google. Play Store с минимальными усилиями.
8. Обновления OTA: Expo поддерживает беспроводные обновления (OTA) (этот процесс называется Обновление EAS), позволяя разработчикам отправлять обновления в свои приложения, не требуя от пользователей загрузки новой версии из магазина приложений.
9. Expo Snack: Expo Snack — это онлайн-редактор кода, который позволяет разработчикам быстро создавать прототипы и делиться своим кодом с другими. .
10. Сторонние библиотеки: Expo поддерживает широкий спектр сторонних библиотеки и плагины, что упрощает добавление дополнительных функций в ваше приложение.
11. Простая отладка: Expo предоставляет инструменты для простой отладки вашего мобильного приложения, включая отладку на реальных устройства и тренажеры.
12. Поддержка TypeScript.
13. Различные варианты оформления, включая стилизованные компоненты.
14. Вы даже можете использовать Next.js в своем проекте Expo, чтобы иметь возможность обмениваться кодом между мобильными и Интернет.

Ограничения, которые следует учитывать при использовании Expo.js:

1. Ограниченный доступ к собственным API. Expo предоставляет набор предварительно созданных API, которые позволяют вам получить доступ к общим функциям, таким как камера или push-уведомления, но если вам нужен доступ к более специализированному или пользовательскому API, вам может потребоваться извлечь из Expo и использовать React Native напрямую.
2. Ограниченный контроль над процессом сборки. При использовании Expo большая часть процесса сборки обрабатывается серверами Expo, что может ограничить ваши возможности по настройке или оптимизации конфигурации сборки вашего приложения. Возможно, вам также придется подождать, пока Expo обновит свои собственные зависимости, прежде чем вы сможете обновить зависимости своего приложения.
3. Размер и производительность приложения. Несмотря на то, что Expo предлагает некоторые оптимизации для уменьшения размера вашего приложения, оно все же может быть больше, чем нативное приложение, что может повлиять на производительность и взаимодействие с пользователем.
4. Зависимость от серверов Expo. Ваше приложение может полагаться на серверы Expo для правильной работы, а это означает, что если эти серверы перестанут работать или будут отключены, ваше приложение может перестать работать.

Заключение

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

На мой взгляд, и Next.js, и Gatsby в настоящее время очень похожи и предоставляют разработчикам схожий набор инструментов, несмотря на то, что они начинают свой путь с разных отправных точек (Gatsby — как генератор статических веб-сайтов, а Next.js — как платформа приложений SSR).< /p>

Gatsby может понравиться вам уровнем данных GraphQL, функциями Gatsby Cloud и системой плагинов. Next.js может больше подойти вам, если вы хотите сами решать, как запрашивать данные, хотите использовать невероятно быстрые инструменты Rust и предпочитаете инфраструктуру Vercel.

Если вы хотите изучить подход к созданию приложений React, которые поддерживают веб-стандарты, но немного отличаются от других фреймворков, Remix может подойти лучше. Наконец, если вы создаете мобильное приложение, Expo — отличный выбор, который предоставляет множество полезных инструментов и интеграций.