Un premier retour d'expérience sur Remix

Un peu de contexte

Ryan Florence & Michael Jackson

React Router Logo

Philosophie

Browsers + HTTP + HTML

Use the platform, Luke

Anatomie d'une route

Composant

export default function Index() {
  const data = useRouteData();
 
  return (
          <div className="home-page">
            <Banner />
 
            <FeedLayout>
              <Outlet />
            </FeedLayout>
            <TagList tags={data.tags} />
          </div>
  );
};

Anatomie d'une route

Loader

export const loader = async function ({ params }) {
  const article = await getArticle(params.articleSlug);
  if (article === null) {
    return new Response(null, { status: 404 });
  }
 
  return json({ article });
};

Anatomie d'une route

Links, headers, meta

export const links = () => [
  { rel: "stylesheet", href: stylesUrl },
  { rel: "preload", as: "fetch", "href": "urlFetchProbable" }
];
 
export const headers = () => ({
  "X-Secret-Location": "Mobile Meth Lab",
  "Cache-Control": "max-age=300, s-maxage=3600"
});
 
export const meta = () => ({
  title: "Something cool",
  description: "This becomes the nice preview on search results."
});

Au delà du SSR : gestion des « mutations »

export const action = async function action({ request }) {
  const requestBody = new URLSearchParams(await request.text());
  const login = requestBody.get("login");
  const password = requestBody.get("password");
 
  // perform login...
 
  return new Response("", {
    status: 302,
    headers: {
      Location: "/feed",
      "Set-Cookie": await commitSession(...), 
    }
  })
};

Les formulaires version Remix

function MyRemixForm() {
  return (
          <Form action="/login" method="post">
            <input type="text" />
            <input type="password" />
            <button type="submit">Login</button>
          </Form>
  )
}

Remix émule le comportement du formulaire et permet d'améliorer l'UX

function MyRemixForm() {
  const pendingForm = useTransition().submission
 
  return (
          <Form action="/login" method="post">
            <input type="text" />
            <input type="password" />
            <button type="submit" disabled={pendingForm !== undefined}>Login</button>
          </Form>
  )
}

Limiter les abstraction

Controle du serveur

const { createRequestHandler } = require("@remix-run/architect");
 
exports.handler = createRequestHandler({
  build: require("./build"),
});

Limiter les abstractions

Controle de l'entrypoint

export default function handleRequest(request, responseStatusCode,
                                      responseHeaders, remixContext) {
  const markup = ReactDOMServer.renderToString(
          <RemixServer context={remixContext} url={request.url} />
  );
 
  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: {
      ...Object.fromEntries(responseHeaders),
      "Content-Type": "text/html"
    }
  });
}

Limiter les abstractions

Controle de l'entrypoint

ReactDOM.hydrate(
        <RemixBrowser />,
        document
);

One Line Static Site Generator

export function headers() {
  return {
    "Cache-Control": "public, max-age=604800, must-revalidate"
  };
}

Un premier retour d'expérience sur Remix

Un peu de contexte

Un peu de contexte

Le projet

Philosophie

Philosophie

Routage basé sur les fichiers

Moderne ou ancien ?

Anatomie d'une route

Composant

Anatomie d'une route

Loader

Anatomie d'une route

Links, headers, meta

Routes imbriquées

Au delà du SSR : gestion des « mutations »

Les formulaires version Remix

Remix émule le comportement du formulaire et permet d'améliorer l'UX

Limiter les abstraction

Controle du serveur

Limiter les abstraction

Controle du serveur

Limiter les abstractions

Controle de l'entrypoint

Limiter les abstractions

Controle de l'entrypoint

Limiter les abstractions

Contrôle du DOM complet

Un mot sur la génération statique

One Line Static Site Generator

Demo time !

et s'il reste du temps...

Merci !