Remix run, следующий многообещающий веб-фреймворк?

Обновление: Прошло почти 4 месяца с тех пор, как я написал эту статью, и Remix сильно изменился и теперь стал открытым исходным кодом. Таким образом, я обновил часть контента на случай, если некоторые из них сейчас неверны. (26 ноября 2021 г.)

Kent C. Dodds — один из моих любимых разработчиков на ютубе, иногда я могу смотреть его кодирование в прямом эфире, и именно там я узнал об этом фреймворке, remix.run.

Remix — это веб-фреймворк с полным стеком, который предоставляет веб-сайт для рендеринга на стороне сервера и построен на экосистеме реагирования. Он возвращает фундаментальные концепции Интернета, такие как кэширование HTTP, метатеги, код состояния, заголовки и т. д.

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

Краткий обзор структуры проекта будет таким:

├── app
│   ├── components
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   ├── routes
│   ├── styles
│   ├── tsconfig.json
│   └── utils
├── build
│   ├── _assets
│   ├── assets.json
│   └── index.js
├── package.json
├── postcss.config.js
├── public
│   ├── build
│   ├── favicon.png
│   └── images
├── remix.config.js
├── renovate.json
└── yarn.lock

1 Вложенные маршруты

Одной из важных функцийRemix являются вложенные маршруты. Вы можете использовать такие маршруты:

routes/articles/$id.ts
routes/articles/index.ts 
routes/articles/$id/subpages.ts
routes/lists.list.paper.ts
routes/contactus.ts
routes/articles.ts

Существует множество способов определения маршрута.

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

Это похоже на маршрутизатор в root и другой маршрутизатор в articles.ts, и вы определяете Outlet, аналогичный в root, затем, когда вы находитесь внутри articles/$id.ts, он заменит Outlet в articles.ts.

2 Настраиваемый объект ответа от загрузчика и действия

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

export let loader: LoaderFunction = () => {
  return redirect("https://example.com/api");
};
// Or
export let loader: LoaderFunction = () => {
  return json({message: "hello world"});
};
// Or
export let loader: LoaderFunction = () => {
  const result = await fetch("https://example.com/api");
  return new Response(JSON.stringfy(result),{
    status: 200,
    headers: {
      "Content-Type": "application/json",
      "Cache-Control": "no-cache no-store"
    }
  })
};

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

3 Заголовок и стиль

1. Кроме загрузки есть еще:
2. Мета-функция, которая работает с разными метатегами разных страниц;
3. LinksFunction, которая позволяет вам извлекать только нужные файлы css или другие файлы, даже предварительно извлекать другую страницу;
4. Асинхронное действие, которое обрабатывает почтовые запросы;
5. Более нативная форма работает без javascript;
6. Больше хуков и функций, которые нужно открыть.

export let meta: MetaFunction = () => {
  return { title: “Ain’t nothing here” };
};
export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

4 Некоторые из моих идей

Здесь в v1 много нового по сравнению с бета-версией. Загляните сюда.

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

У него есть минусы, потому что это еще ребенок…

Мне лично не нравится, как он вылетает каждый раз, когда я медленно печатаю;

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

Форма идет с действием и идет с перенаправлением, обратная ссылка напомнит действие.

И я не супер гений, меня беспокоит кривая обучения, существует много крючков, но нет руководства, и документы еще не совсем полностью (я жду…), поэтому мне нужно заглянуть в источник или что-то другое. онлайн-видеоруководства (но они в основном на более низком уровне).

5

Наконец, Remix требовал лицензии, 250 долларов для человека, 1000 долларов для компании. Но теперь это совершенно бесплатно и с открытым исходным кодом.

Я не фанат открытого исходного кода, пока оно того стоит. Но видимо это заставит Remix не стать каким-то гигантом вроде Next.js.

Да, теперь открытый исходный код определенно увеличит количество пользователей Remix и сделает его более популярным. Рад видеть это.

Конец.