Действительная полноценная альтернатива Next.JS.
Remix — это новый полнофункциональный JavaScript-фреймворк, который избавляется от создания статических сайтов и выполняет некоторые функции иначе, чем текущие фреймворки. Он использует React для визуализации пользовательского интерфейса и имеет много общего с NextJS. Тем не менее, существуют четкие различия, такие как вложенные маршруты, выборка данных, управление сохранением и обработка ошибок. Давайте взглянем на эти идеи и посмотрим, как они сочетаются с другими стратегиями, которые уже используются в популярных фреймворках.
Одна из суперспособностей Remix — вложенная маршрутизация.
Вложенная маршрутизация
Очень удобный механизм в Remix — это возможность отображать части страницы в зависимости от маршрута, на котором мы находимся. Эта функциональность React Router позволяет Remix предсказывать, что вы собираетесь визуализировать, прежде чем вы это сделаете. Это позволяет Remix извлекать данные, таблицы стилей и модули для следующей страницы или только для измененной части текущей страницы.
В других фреймворках это означало бы либо новый маршрут с собственным индексным файлом, либо маршрут, который специально соответствует одному или нескольким компонентам. Мы привыкли привязывать различные разделы нашего URL-адреса к отдельным маршрутам или компонентам — подход Remix лучше всего описывается как вложенные макеты, где каждая часть URL-адреса связана с файлом маршрута по определению.
Под капотом это позволяет Remix предварительно загружать различные разделы страницы, что делает его чрезвычайно быстрым и позволяет нам свести к минимуму как можно больше состояний загрузки.
Обработка ошибок
Обработка ошибок встроена в Remix. Его обработка ошибок необычна тем, что позволяет нам определять ErrorBoundaries, которые будут отображаться, если что-то с нашими компонентами маршрута не работает, как планировалось, и возникает ошибка. Таким образом, если мы используем вложенные маршруты Remix, мы можем заметить только одну ошибку броска, а не всю страницу. Граница ошибки умна тем, что она всплывает (маршруты) к ближайшей границе ошибки. В результате самым простым случаем будет наличие одной границы ошибки на корневом уровне, похожей на полную ошибку 404.
Когда на ваших сайтах возникают проблемы, их не нужно обновлять. Remix обрабатывает ошибки во время рендеринга сервера. Ошибки при отрисовке клиента. Даже ошибки в обработке данных на стороне сервера.
Если мы используем вложенные маршруты Remix, мы можем увидеть один бросок и ошибку, но не обязательно всю страницу. Реализация границы ошибки так же проста, как добавление функции ErrorBoundary к нашим компонентам маршрута, как показано ниже.
На следующем изображении показано, как наличие нескольких небольших границ ошибок может оставить остальную часть приложения нетронутой.
Повтор сеанса с открытым исходным кодом
Отладка веб-приложения в рабочей среде может быть сложной и трудоемкой. OpenReplay — это альтернатива FullStory, LogRocket и Hotjar с открытым исходным кодом. Это позволяет вам отслеживать и воспроизводить все, что делают ваши пользователи, и показывает, как ваше приложение ведет себя при каждой проблеме. Это похоже на то, как если бы инспектор вашего браузера был открыт, когда вы смотрите через плечо вашего пользователя. OpenReplay — единственная доступная в настоящее время альтернатива с открытым исходным кодом.
Удачной отладки, для современных фронтенд-команд — Начните бесплатно отслеживать свое веб-приложение.
Теперь давайте установим Remix
Сначала запустите терминал и выполните следующую команду
npx create-remix@latest
После завершения установки вы можете увидеть следующее сообщение
Введите имя нужной папки, а также ее положение и нажмите ENTER.
Выберите параметр Remix App Server (можно изменить позже).
Выберите язык, который вы хотите выбрать, сейчас я выберу Javascript.
Выберите «да» и запустите npm install
После завершения установки вы можете увидеть это сообщение. Теперь используйте cd ‹имя вашей папки›
а затем выполните следующую команду, чтобы перейти в режим разработки
npm run dev
Нажмите на ссылку localhost, чтобы открыть сервер в браузере по умолчанию.
Вот и все!
Вы успешно установили Remix.
Структура кода файла выше:
Полезный ресурс
Заключение
Remix — относительно новый фреймворк в мире программирования. В будущем у него будет много других функций, а также дополнительная поддержка сообщества. Нам еще предстоит стать свидетелями массового использования Remix.
В этой статье мы узнали об основных возможностях Remix:
- Вложенная маршрутизация. Очень удобный механизм, который позволяет нам отображать части страницы в зависимости от маршрута, по которому мы находимся.
- Обработка ошибок с использованием границ ошибок. Изящная часть этой функции заключается в том, что мы можем определить наши границы с помощью простого определения функции.
Мы также рассмотрели основы, чтобы начать работу с Remix для вашего проекта, так что теперь у вас нет оправданий, вы должны попробовать!
Спасибо за прочтение и до встречи в следующем!
