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

Способ разработки нужно выбирать, исходя из конечной цели. Вы создаете полноценный веб-продукт или маркетинговый сайт? Будет ли сильная нагрузка на сервер? Сколько разработчиков будут участвовать в создании? Нужно ли использовать компоненты из других приложений? Как приложение будет создано и развернуто?

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

1. Только React

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

2. Bit

Главное преимущество Bit заключается в компонуемости и масштабируемости.

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

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

В таком приложении каждый компонент разрабатывается, версионируется, управляется, публикуется, развивается, тестируется и собирается отдельно, а всеми зависимостями можно управлять. Это полноценный монорепозиторий, а каждый модуль является независимым.

Каждый компонент (т. е. единица кода, от элементов пользовательского интерфейса до целой страницы или функции и даже код NodeJS или просто js-код) может быть использован в различных приложениях (посредством bit.cloud, который является бесплатным для всех, за исключением компаний).

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

Bit имеет встроенную поддержку и предопределенные шаблоны для приложений React, многократно используемых компонентов, экспресс-приложений, модулей node и многого другого. Он предоставляет все самое главное в готовом виде, в том числе вложенную маршрутизацию с помощью React Router, SSR, композиционную стилизацию с темами и т. д.

Вы можете познакомиться с Bit здесь с помощью шаблона.

$ bit create react-app apps/my-react-app

1 component(s) were created
my-org.my-scope/apps/my-react-app
    location: my-scope/apps/my-react-app
    env: teambit.harmony/aspect (set by template)

$ bit use my-org.my-scope/apps/my-react-app

$ bit run apps/my-react-app

// Вывод отображает порт, используемый для обслуживания данного приложения:

apps/my-react-app app is running on http://localhost:3000

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

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

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

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

Это позволяет считать Bit лучшим вариантом для приложений, подлежащих масштабированию, при наличии:

  • множества приложений с общими компонентами/функциями и дизайном;
  • множества совместно работающих приложений/компонентов/специалистов по разработке.

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

3. NextJS

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

Next оснащен всем необходимым для современного React-приложения: “горячей” перезагрузкой, маршрутизацией, гибридным статическим и серверным рендерингом, поддержкой TypeScript, интеллектуальным пакетированием, предварительной выборкой маршрутов и многим другим.

Стандартная структура проекта выглядит следующим образом:

/public
    favicon.ico
/src
    /components
        /elements
            /auth
                AuthForm.tsx
                AuthForm.test.ts
            /[Name]
                [Name].tsx
                [Name].test.ts
    /hooks
    /types
    /utils
    /test
        /api
            authAPI.test.js
            [name]API.test.js
        /pages
            index.test.js
    /pages
        /api
          /authAPI
              authAPI.js
          /[name]API
              [name]API.js
        _app.tsx
        _document.tsx
        index.tsx

Next сфокусирован на взаимодействии с сервером (он также может генерировать статический сайт). Это делает его более масштабируемым, чем аналогичные некомпонуемые решения, когда нужен сайт, поддерживающий как SSR-, так и SSG- оптимизацию. Этот вариант отлично подходит для большей производительности и лучших показателей SEO.

Хотя Next js является высоко оптимизированным инструментом для создания сайтов и обеспечивает беспроблемное взаимодействие с сервером, это “монолитный” фреймворк, который не предоставляет высокого уровня компонуемости и в исходном состоянии не предусматривает модульной разработки. Например, весь проект может представлять собой единое целое с одной кодовой базой, версией, развертыванием и т. д., без встроенной интеграции с объединением модулей и без компонуемости по умолчанию.

Вы можете начать работу здесь и изучить демонстрационный пример.

4. Remix.run

Remix  —  фреймворк-новичок. Он предлагает такие функции, как вложенная маршрутизация (благодаря React Router) и встроенная поддержка границ ошибок.

При использовании Remix все рендерится на стороне сервера. Кроме того, он позволяет осуществлять изменения перед рендерингом страницы. Он разработан на Web Fetch API (вместо Node) и может работать где угодно, например на Cloudflare Workers, а также обеспечивает поддержку бессерверных и традиционных сред Node.js.

Remix может похвастаться вложенной маршрутизацией, которая представляет собой объединение сегментов URL с иерархией компонентов в пользовательском интерфейсе. Это довольно интересно, поскольку сегменты URL определяют такие аспекты, как макеты для рендеринга на странице, разделенные пакеты JavaScript для загрузки и зависимости данных от макетов.

Некоторые веб-приложения выполняют выборку внутри компонентов, что приводит к каскаду запросов, медленной загрузке и “мусору”. В то же время Remix параллельно загружает данные на сервер и отправляет полностью сформированный HTML-документ.

Вы можете начать работу здесь и воспользоваться приведенным примером.

5. Gatsby

Gatsby  —  это фреймворк на основе React. Он позволяет быстро разрабатывать хорошо оптимизированные сайты с отличными показателями SEO и производительности. Он ориентирован на производительность и SEO, а также хорошо работает с Markdown.

Gatsby заранее генерирует статический HTML, который впоследствии может быть сохранен в CDN (Content Delivery Network, сеть распределения контента) для более быстрого доступа. Он сочетает в себе такие инструменты, как GraphQL, React и React Router.

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

Gatsby также может похвастаться эффективной конфигурацией Webpack.

6. Create-React-App

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

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

На вашем компьютере должна быть установлена версия Node >= 14.0.0 и npm >= 5.6. Чтобы создать проект, выполните:

npx create-react-app my-app
cd my-app
npm start

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

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js
}

В его внутреннем устройстве используются Babel и webpack. Когда все будет готово к развертыванию для этапа продакшн, запуск npm run build создаст оптимизированную сборку приложения в папке build.

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

7. NX

NX  —  это система сборки монорепозитория, способная работать на основе приложения React. Ее можно использовать в дополнение к некоторым другим фреймворкам, таким как Nextjs.

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

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

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

NX также оснащен плагином VSCode и нативной интеграцией, а также предлагает функцию NX Cloud для запуска команд на нескольких компьютерах так, как если бы они выполнялись локально.

Бонус

Также стоит упомянуть следующие инструменты.

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

  • React Boilerplate.
  • Razzle.
  • KYT.
  • Cory House/React-Slingshot.
  • React Starter Kit.
  • Pure React App.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Jonathan Saring: 7 Ways to Create a New React Application

Предыдущая статьяМетрики для улучшения архитектуры ПО
Следующая статьяКак создать компонент Toast в SwiftUI