JavaScript утримує лідерство серед найпопулярніших мов програмування. Це, своєю чергою, зумовлює наявність великої кількості різноманітних бібліотек і фреймворків. React є однією з найбільш затребуваних JavaScript-бібліотек.
React також пропонує широкий спектр фреймворків та бібліотек, розроблених для виконання різних завдань. Веб-фреймворк надає структурований підхід до створення веб-застосунку. Замість того, щоб розробляти все з нуля, фреймворки пропонують вже готовий до використання код, який розробники можуть інтегрувати у свої проєкти.
Remix – це один з новітніх веб-фреймворків на базі React, який нещодавно здобув значну популярність. У цій статті ми розглянемо, що таке Remix Framework, його можливості, процес налаштування, сфери застосування, а також існуючі обмеження.
Що таке Remix Framework?
Remix – це повноцінний фреймворк для веб-розробки, побудований на основі React. З його допомогою можна створювати як серверні, так і клієнтські частини веб-застосунків. Remix дозволяє розробникам концентруватися на користувацькому інтерфейсі, забезпечуючи при цьому стабільну та швидку роботу.
Цей фреймворк можна охарактеризувати як поєднання чотирьох елементів: компілятора, браузерного фреймворка, серверного фреймворка та обробника HTTP.
Спочатку Remix був платним сервісом, але у кінці 2021 року його зробили відкритим. Також у 2022 році він був придбаний компанією Shopify.
Функціональні можливості Remix Framework
- Стеки Remix: ця функція CLI Remix дозволяє швидко створювати застосунки. Частина цих стеків вже вбудовані, але є можливість створити проєкт з нуля самостійно. Офіційні вбудовані стеки пропонують такі можливості, як автоматизовані процеси розгортання, бази даних, інструменти тестування, автентифікація та лінтери. Серед відомих стеків можна виділити популярний блюзовий стек, інді-стек та гранж-стек.
- Рендеринг на стороні сервера (SSR): цей фреймворк дозволяє відтворювати компоненти React на сервері. Перший рендеринг у Remix відбувається на сервері, а вже готовий HTML-документ відправляється клієнту. Рендеринг на стороні сервера забезпечує ряд переваг, серед яких покращена доступність, можливість індексації контенту пошуковими системами та збільшення швидкодії.
- Маршрутизація з вкладеними маршрутами: Remix використовує React Router 6. У цьому фреймворку достатньо розмістити файли у папці маршрутів, і Remix автоматично перетворить їх у навігаційні шляхи. Вкладений маршрут – це маршрут, розміщений в іншому маршруті.
- Підтримка TypeScript і JavaScript: Remix можна використовувати незалежно від того, чи ви пишете код на JavaScript, чи на TypeScript. Перевага TypeScript полягає в тому, що він дозволяє визначати типи змінних і виявляти помилки на ранніх етапах розробки.
- Вбудоване завантаження та кешування даних: Цей фреймворк дає можливість розробникам визначати завантажувачі (loaders), які отримують дані з різних джерел. Remix обробляє запити даних як на клієнтській, так і на серверній стороні. Механізм кешування дозволяє мінімізувати непотрібні запити даних та оптимізувати подальші звернення.
- Розділення коду та попереднє завантаження: У Remix можна розділити код застосунку на невеликі фрагменти, які завантажуються за потребою. Такий підхід зменшує початковий розмір пакета, а функція попереднього завантаження дозволяє завантажувати дані та код у фоновому режимі.
Переваги Remix Framework
- Повний стек: Традиційно розробники використовують різні мови програмування або фреймворки для створення клієнтської та серверної частин застосунків. Наприклад, React може використовуватись для фронтенду, а Node.js framework, наприклад ExpressJS, для бекенду. В інших випадках, для сервера може використовуватись Python-фреймворк, наприклад Django. Remix є фреймворком повного стека, що означає, що і фронтенд, і бекенд розробляються в рамках одного проєкту.
- Ефективна обробка даних: Remix використовує вбудовані браузерні можливості та принципи. Чіткий потік даних спрощує обмін інформацією між клієнтською частиною та сервером.
- Зручне керування станом: Керування станом у React-застосунках може бути складним, тому більшість розробників використовують сторонні бібліотеки, як Redux. Remix використовує завантажувачі (loaders) для управління станом на сервері. Атрибут useLoaderData можна викликати з будь-якого компонента поточного маршруту.
- Межі помилок: Якщо помилка виникає у вкладеному маршруті або компоненті Remix-застосунку, вона буде обмежена лише цим компонентом. Це не призведе до збою в роботі всього застосунку, як це може статися в інших фреймворках. Хоча можливість обмеження помилок можна реалізувати і в деяких React-фреймворках, наприклад Next.js, у Remix ця функція вже є вбудованою.
Вимоги для налаштування Remix-застосунку
Щоб налаштувати Remix-застосунок, вам знадобиться:
- Node.js версії 14.17.0 або вище
- Менеджер пакетів, наприклад npm (версії 7 або вище)
- Редактор коду
- Розуміння основ роботи React-застосунків
Як налаштувати “Hello, World!” у Remix
Створимо простий проєкт під назвою “Remix-app”. Кроки наступні:
- Перейдіть у директорію, де ви хочете створити проєкт, відкрийте термінал і виконайте команду:
npx [email protected] remix-app
Термінал запропонує вам відповісти на декілька питань для налаштування проєкту. Залишимо налаштування за замовчуванням та виберемо TypeScript як мову програмування.
- Перейдіть у створену папку (Remix-app) і відкрийте її у своєму редакторі коду. Структура папок буде виглядати наступним чином:
- Зберіть свій застосунок за допомогою команди:
npm run build
- Запустіть сервер розробки за допомогою команди:
npm start
Тепер ви можете відкрити сторінку у браузері за посиланням http://localhost:3000, і побачите наступне:
- Змініть вміст файлу app/root.tsx на наступний:
import { LiveReload } from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
/>
<title>Remix Demo</title>
</head>
<body>
Hello world
<LiveReload />
</body>
</html>
);
}
Відтворена сторінка буде такою:
Де використовується Remix Framework
Подібно до Next.js та React, Remix можна використовувати для створення різноманітних застосунків. Ось деякі з типових випадків використання:
- Односторінкові застосунки: У Remix весь код застосунку завантажується один раз. Серверний підхід забезпечує швидке початкове завантаження, а клієнтська частина обробляє подальші запити без затримок.
- SEO-оптимізовані веб-сайти: Remix використовує попередній рендеринг для створення статичних HTML-сторінок. Це дозволяє індексувати веб-сайти, навіть якщо вони містять динамічний контент.
- Динамічні веб-сайти: Remix використовує рендеринг на стороні сервера (SSR). SSR завантажує сторінки на сервері, перш ніж відправити HTML клієнту. Таким чином, Remix ідеально підходить для веб-сайтів, контент яких генерується динамічно.
Як працює Remix на сервері та клієнті
Рендеринг на стороні сервера
Remix відтворює ваш код у звичайний HTML на сервері. Цей підхід зменшує обсяг JavaScript, що підвищує швидкість завантаження. Remix використовує вбудовані функції “action” та “loader”. Сервер виконує дії на серверній стороні, відображає React код у вигляді HTML, а потім надсилає його до браузера клієнта.
Рендеринг на стороні клієнта
Remix, подібно до Next.js, пропонує функцію “попередньої вибірки”, яка забезпечує плавну навігацію для користувачів.
У Next.js компонент дозволяє веб-сайту завантажувати сторінку, на яку посилається , заздалегідь, щоб користувачеві не доводилося чекати завантаження. Однак такий підхід ефективний лише для статичних веб-сайтів.
Remix використовує функцію , що дозволяє легко отримати
Обмеження Remix
- Невелика спільнота: Remix спочатку був платним фреймворком. Він став відкритим лише у 2021 році, що робить його досить молодим. Це означає, що існує обмежена кількість ресурсів та інструментів для спрощення розробки.
- Складна крива навчання: Remix представляє концепцію вкладених маршрутів, що може викликати труднощі, якщо ви звикли до React або таких фреймворків, як Next.js. Однак після освоєння базових принципів, використовувати фреймворк стає досить просто.
Яке майбутнє Remix?
- Зростання популярності: Remix ще молодий, тому багато розробників ще не встигли оцінити його потенціал. Можливо, у майбутньому ми побачимо, що все більше компаній та розробників почнуть його використовувати.
- Розвиток екосистеми: Наразі Remix має обмежену кількість інструментів та бібліотек для підтримки своєї екосистеми. Можна очікувати, що кількість інструментів та бібліотек буде зростати зі збільшенням популярності фреймворка.
- Розширення спільноти: Спільнота відіграє ключову роль у розвитку будь-якого фреймворка або мови програмування. Зростання спільноти є неминучим, оскільки розробники будуть відкривати для себе переваги Remix.
Чи є Remix кращим за Next.js?
Відповідь на це запитання залежить від типу застосунку, який ви створюєте. Якщо вам потрібно розробити повноцінний застосунок, використовуючи єдиний фреймворк, то Remix буде кращим варіантом, ніж Next.js. Однак, якщо вам потрібен зрілий фреймворк з великою кількістю ресурсів та підтримки, то Next.js стане оптимальним вибором.
Чи є Remix хорошим фреймворком?
Так. Це хороший фреймворк для створення всього вашого застосунку з повним стеком, використовуючи єдиний фреймворк. Він також чудово підходить, якщо вам потрібна технологія з вбудованою функцією обмеження помилок. Однак, якщо вам потрібен фреймворк з великою спільнотою та багатьма ресурсами, Remix не буде оптимальним вибором.
Чи готовий Remix JS до використання в продакшені?
Так. Якщо ви знайомі з розгортанням Node.js застосунків, робота з Remix та його розгортання не викличуть у вас труднощів.
Що краще вивчити, Remix чи React?
Remix — це фреймворк на базі React. Тому вам потрібно зрозуміти основи React, перш ніж починати вивчати Remix. Якщо у вас обмежений час і ви хочете вивчити тільки один фреймворк, то вибір залежатиме від ваших цілей.
Remix дозволяє створювати повноцінні застосунки. Ви також можете вивчати Remix, навіть якщо ви не знаєте React, але у такому випадку крива навчання буде складнішою.
З іншого боку, якщо ви використовуєте React, вам знадобиться бекенд-фреймворк, наприклад Django або Ruby on Rails, якщо ви хочете створити повноцінний застосунок. Якщо ви вирішите вивчати React, ви зможете скористатися його великою кількістю ресурсів і спільнотою.
Висновок
Поки що рано судити, чи стане Remix майбутнім веб-розробки. Його вражаючі можливості, такі як гнучка маршрутизація, рендеринг на стороні сервера, поділ коду та акцент на зручності для розробників, роблять його дуже перспективним веб-фреймворком.
Однак, Remix ще молодий, і його ресурси наразі обмежені. Спільнота розробників невелика. Інструментів та бібліотек для Remix JS поки що небагато, оскільки більшість фреймворків з відкритим вихідним кодом залежать від підтримки спільноти та сторонніх розробників.
Не зайвим буде також вивчити деякі інші фреймворки та бібліотеки, щоб стати професійним full-stack розробником.