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

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

С момента официального выпуска в октябре 2021 года Remix набрал обороты и стал широко используемой средой React.

Ремикс имеет ряд преимуществ:

  • Он компилируется с помощью esbuild, чрезвычайно быстрого сборщика JavaScript/CSS и минификатора.
  • Он использует прогрессивное улучшение на стороне сервера. В браузер отправляется только необходимый контент JavaScript, JSON и CSS.
  • Он выполняет динамический рендеринг на стороне сервера.
  • Он знает, когда нужно обновить измененные данные, поскольку Remix контролирует весь рабочий процесс.
  • Он включает в себя комплексное решение с React Router, рендерингом на стороне сервера, производственным сервером и оптимизацией бэкенда.

Настроить ремикс

Выполните следующую команду, чтобы установить Remix:

% npx create-remix
? Where would you like to create your app? remix-app
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

Во время установки есть несколько вариантов.

  • Фреймворк Remix устанавливается в папку remix-app.
  • Тип приложения – Just the basics.
  • Есть несколько серверов на выбор. Возможные варианты: Remix App Server, Express Server, Architect (AWS Lambda), Fly.io, Netlify, Vercel и Cloudflare Pages. Мы используем значение по умолчанию, Remix App Server, которое представляет собой полнофункциональный сервер Node.js на базе Express.
  • Также есть выбор между TypeScript и JavaScript. В этой статье выбран JavaScript.

После установки папка remix-app выглядит так:

remix-app
├── README.md
├── app
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   ├── root.jsx
│   └── routes
│       └── index.jsx
├── node_modules
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── .eslintrc.js
├── .gitignore
├── remix.config.js
└── jsconfig.json
  • app/entry.server.jsx: Это первый бит JavaScript, который запускается, когда запрос попадает на сервер. Remix загружает только необходимые данные, но разработчикам нужно обработать ответ. Этот файл используется для рендеринга приложения React в строку/поток, который отправляется в качестве ответа клиенту.
  • app/root.jsx: Это корневой компонент приложения. Это эквивалентно App.js приложения Create React. <LiveReload /> (строка 27) явно закодирован, что рекомендуется для разработки.
  • app/routes: Это каталог, в котором размещены все маршруты.
  • app/routes/index.jsx: по умолчанию вызывается индексированный маршрут.
  • public: это каталог, в котором размещены статические ресурсы и производственная сборка.
  • public/favicon.ico: это значок Remix, отображаемый для вкладки и закладки браузера.
  • remix.config.js: Это файл конфигурации Remix.
  • jsconfig.js: Это файл конфигурации JavaScript.

Приложение можно запустить в режиме разработки:

npm run dev

Его также можно выполнить в производственном режиме:

npm run build
npm start

Из коробки у нас есть React Router, рендеринг на стороне сервера и рабочий сервер.

Ремиксные маршруты

Приведенный выше официальный пример имеет статические ссылки на внешние веб-сайты. Перепишите app/routes/index.jsx для ссылки на внутренние страницы.

Строка 9 — это ссылка на маршрут "/one".

Строка 12 — это ссылка на маршрут "/two".

Страница выглядит нормально.

Но при нажатии на любую из ссылок появляется ошибка 404.

Remix Router использует файловую систему для определения маршрутов страниц. Есть два способа справиться с этим. Рекомендуемый способ — реализовать отсутствующую страницу внутри каталога маршрута в виде индексного файла, т. е. app/routes/one/index.jsx:

Теперь страница работает:

Второй способ — назвать файл маршрутом, т. е. app/routes/two.jsx:

Вот страница:

Remix Router поддерживает React Router, включая вложенные маршруты и динамические параметры.

Загрузчик ремиксов

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

Функция loader — это специальный API. Он экспортируется для вызова на сервере перед рендерингом. Обычно он извлекает данные из бэкэнда.

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

Мы написали статью Настройка и использование MySQL в среде создания приложений React. Давайте посмотрим, как легко настроить и использовать MySQL в среде Remix.

Настройте mysql (аналогично работает mysql2), клиент JavaScript для протокола MySQL:

npm i mysql

mysql становится частью dependencies в package.json.

Измените app/routes/index.jsx следующим образом:

Строки 4–9 определяют конфигурацию пользователя.

Строки 11–13 создают соединение с MySQL, используя пользовательскую конфигурацию. Строка 12 включает несколько операторов, которые по умолчанию отключены, чтобы избежать возможных атак путем внедрения кода SQL.

Строки 15–25 определяют функцию loader, которая подключается к базе данных для запроса таблицы student (строка 16). В случае ошибки обещание преобразуется в null (строка 19). В противном случае возвращается первая строка таблицы MySQL (строка 22) при условии, что имеется хотя бы одна строка.

Строка 28 вызывает useLoaderData для извлечения загруженных данных, которые отображаются в строке 33.

Нет необходимости перезапускать сервер. npm run dev похож на nodemon, который автоматически отслеживает изменения кода и перестраивает изменения.

Однако в консоли браузера возникает ошибка:

Какое загадочное сообщение об ошибке!

Эта ошибка возникает, когда зависимости на стороне сервера объединяются в клиентские сценарии.

Чтобы Remix мог запускать приложение как в среде сервера, так и в среде браузера, модули приложения и сторонние зависимости должны быть осторожны с побочными эффектами модулей. Компилятор Remix автоматически удаляет серверный код из пакетов браузера. В приведенном выше коде строки 11–13 создают соединение с MySQL, которое является серверным кодом. loader ушел, но зависимость mysql осталась. Браузер не может правильно обработать модуль mysql.

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

Теперь это работает.

Но будем ли мы создавать соединение с MySQL каждый раз, когда вызывается функция loader?

Лучший способ — создать соединение с MySQL внутри app/entry.server.jsx (строки 30–32):

Затем app/routes/index.jsx просто импортирует connection (строка 2):

Ремикс Экшн

Компонент <Form> — это декларативный способ выполнения мутаций данных: создания, обновления и удаления данных. Form от Remix — это расширенный компонент HTML-формы. Вместо использования обработчиков событий React, таких как onClick, маршрут экспортирует функцию action, которая вызывается при отправке формы. useState не требуется для поддержки значений полей.

Аналогично функции loader существует функция action, которая вызывается при отправке формы. Подобно ловушке userLoaderData, для функции action существует ловушка useActionData, которая перехватывает данные, возвращаемые функцией action.

Мы используем action и useActionData для создания нашего примера с возможностью изменения оценки учащегося.

Вот адаптированный app/routes/index.jsx:

Строки 17–33 определяют функцию action, которая считывает данные отправки формы (строки 18–19) и подключается к базе данных для обновления таблицы учеников (строка 22). В случае ошибки обещание преобразуется в сообщение об ошибке (строка 26). В противном случае возвращается успешное сообщение (строка 28).

Строка 37 вызывает useActionData для получения результата действия, который отображается в строке 50.

Компонент Form добавляется в строках 44–49.

Сохраните изменения и введите 4 в поле ввода. После нажатия Enter значение отправляется на action для обновления базы данных. Remix обнаруживает мутацию данных и вызывает loader для получения последнего отображаемого значения.

Если ввод недействителен, отображается сообщение об ошибке.

Поток между Remix App Server и серверной частью непрерывен. Шаблонный код не требуется.

Заключение

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

Об этих особенностях мы писали в ряде статей. С Remix все они доступны без шаблонов.

Есть ли недостатки у Remix?

Да, Ремикс еще новый. Отчеты об ошибках нуждаются в улучшении. Например, если нам нужен сервер на занятом порту, он не сообщает об ошибке и не предлагает другой порт. Когда он сообщает об ошибках, некоторые сообщения об ошибках слишком загадочны.

Несмотря на это, Remix набрал обороты и стал широко используемой средой React.

Спасибо за прочтение. Я надеюсь, что это было полезно. Если вам интересно, ознакомьтесь с другими моими статьями на Medium.