Представляем новую веб-инфраструктуру, которая поможет вам создавать быстрее и чище
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
: это каталог, содержащий код приложения Remix.app/entry.client.jsx
: Это код входа, загружаемый в браузер. Это эквивалентноindex.js
Создать приложение React. Кроме того, он гидратирует код React (строка 4), который выполняет то, что мы сделали в index.js, описанном в статье Практическое руководство для приложения React для рендеринга на стороне сервера.
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.