Du har sikkert hørt en masse hype omkring et af de nyeste børn på rammeblokken, Remix. Det kan være overraskende, at det startede tilbage i 2019, men det var oprindeligt kun tilgængeligt som en abonnementsbaseret premium-ramme. I 2021 rejste grundlæggerne startfinansiering og open source-rammerne for at lade brugere begynde at bruge Remix gratis. Sluserne åbnede sig, og alle ser ud til at tale om det, godt som dårligt. Lad os dykke ned og se på nogle af de grundlæggende elementer i Remix.
Remix er en server "edge"-første JavaScript-ramme. Den bruger React, i det mindste for nu, til frontend og prioriterer gengivelse af applikationen på serversiden på kanten. Platforme kan tage koden på serversiden og køre den som serverløse eller kantfunktioner gør den billigere end en traditionel server og sætter den tættere på dine brugere. Remix-grundlæggerne kan lide at kalde det en "center stack"-ramme, fordi den tilpasser anmodningerne og svarene mellem serveren og klienten til den platform, den køres på.
Implementerer Remix
Fordi Remix kræver en server, lad os tale om, hvordan du kan implementere den. Remix leverer ikke selve serveren - du medbringer serveren - så den kan køres i enhver node.js or deno miljø, herunder Netify Edge , DigitalOceans App-platform. Remix i sig selv er en compiler, et program, der oversætter anmodningerne til den platform, det kører på. Denne proces bruger esbuild at oprette handlere for anmodningerne til serveren. De HTTP-handlere, den bruger, er bygget på Web Fetch API og køres på serveren af tilpasse dem til den platform, de vil blive udsendt til.
Remix stakke
Remix stakke er projekter, der har nogle almindelige værktøjer, der er forudkonfigureret til dig. Der er tre officielle stakke som vedligeholdes af Remix-teamet, og de er alle opkaldt efter musikgenrer. Der er også en række fællesskabsremix-stacke inklusive K-Pop stak oprettet af skabelonteamet hos Netlify. Denne stak er et kraftcenter og inkluderer en superbase database og autentificering, medvind til styling, Cypress ende-til-ende test, Prettier kode formatering, ESLint fnug, og maskinskrift statisk skrivning. Tjek Tara Manicsics indlæg om implementering af K-Pop-stakken.
Caching ruter
Selvom Remix kræver en server, kan den stadig drage fordel af Jamstack fordele ved at cache ruter. Et statisk websted eller statisk webstedsgenerering (SSG) er, når alt dit indhold gengives på byggetidspunktet og forbliver statisk indtil endnu en ombygning. Indholdet er prægenereret og kan lægges på et CDN. Dette giver mange fordele og hurtig sideindlæsning for slutbrugeren. Remix gør dog ikke typisk SSG som andre populære React-frameworks, inklusive Next.js og Gatsby. For at få nogle af fordelene ved SSG kan du bruge den oprindelige Cache-Control HTTP-header i et remix header funktion for at cache en bestemt rute eller direkte i root.tsx fil.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Tilføj derefter din header funktion hvor du vil have det. Dette gemmer i en time:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remix af routing
En masse rammer har lænet sig op i routing baseret på filsystemer. Dette er en teknik, hvor en udpeget mappe bruges til at definere ruter for din applikation. De har typisk speciel syntaks til at deklarere dynamiske ruter og endepunkter. Den største forskel i øjeblikket mellem Remix og andre populære frameworks er evnen til at bruge indlejret routing.
Hver Remix-app starter med root.tsx fil. Det er her hele bunden af appen gengives. Du finder nogle af de almindelige HTML-layout her som <html> tag, den <head> tag, og derefter <body> tag med de komponenter, der er nødvendige for at gengive appen. Den ene ting at påpege her er <Scripts> komponent er det, der aktiverer JavaScript på webstedet; nogle ting vil fungere uden det, men ikke alt. Det root.tsx fil fungerer som et overordnet layout for alt inde i routes bibliotek, alt i ruter gengives, hvor <Outlet/> komponent er i root.tsx. Dette er grundlaget for indlejret routing i Remix.
Indlejret routing
Ikke kun blev Remix grundlagt af nogle af holdet fra Reager router, det også bruger React Router. Det er de faktisk bringer nogle af de gode ting ved Remix tilbage til React Router. Et komplekst problem, som vedligeholdere af Next.js og SvelteKit forsøger at løse lige nu, er indlejret routing.
Indlejret routing er i modsætning til traditionel routing. Hvor en ny rute ville føre en bruger til en ny side, er hver indlejret rute en separat sektion af den samme side. Det giver mulighed for adskillelse af bekymringer ved at holde forretningslogik forbundet med kun de filer, der har brug for det. Remix er i stand til at håndtere fejl lokaliseret til kun den del af siden, hvor den indlejrede rute er. De andre ruter på siden er stadig brugbare, og den rute, der gik i stykker, kan give relevant kontekst til fejlen, uden at hele siden går ned.
Remix gør dette, når en rodfil ind app/routes hedder det samme som en mappe med filer, der indlæses inde i basisfilen. Rodfilen bliver til en layout for filerne i mappen ved at bruge en <Outlet /> komponent for at fortælle Remix, hvor de andre ruter skal indlæses.
Udløbskomponent
<Outlet /> Komponent er et signal til Remix for, hvor den skal gengive indhold for indlejrede ruter. Det er sat i filen i roden af app/routes mappe med samme navn som de indlejrede ruter. Følgende kode går i en app/routes/about.tsx fil og inkluderer stikkontakten til filerne indeni app/routes/about folder:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}Mappestruktur
Enhver fil i app/routes/ bibliotek bliver en rute på URL'en til sit navn. En mappe kan også tilføjes med en index.tsx fil.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxHvis en rute har samme navn som en mappe, bliver den navngivne fil en layoutfil for filerne inde i mappen, og layoutfilen skal have en Udløbskomponent at placere den indlejrede rute i.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLayouts kan også oprettes ved at sætte en dobbelt understregning foran dem (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about vil stadig gengive app/routes/about.tsx fil, men vil også gengive hvad der er i app/routes/about/index.tsx hvor Udløbskomponent er i opmærkningen af app/routes/about.tsx.
Dynamiske ruter
En dynamisk rute er en rute, der ændres baseret på information i url'en. Det kan være et navn på et blogindlæg eller et kunde-id, men uanset hvad det er $ syntaks tilføjet til forsiden af ruten signalerer til Remix, at den er dynamisk. Navnet er lige meget andet end $ præfiks.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxHent de data!
Da Remix gengiver alle sine data på serveren, ser du ikke mange af de ting, der er blevet standarden for en React-app, som f.eks. useState() , useEffect() kroge, i Remix. Der er mindre behov for klientsidetilstand, da den allerede er blevet evalueret på serveren.
Det er heller ikke ligegyldigt, hvilken type server du bruger til at hente data. Da Remix sidder mellem anmodningen og svaret og oversætter det korrekt, kan du bruge standarden Web Fetch API. Remix gør dette i en loader funktion det kun kører på serveren og bruger useLoaderData() krog for at gengive dataene i komponenten. Her er et eksempel ved hjælp af Cat as a Service API for at gengive et tilfældigt kattebillede.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Ruteparametre
I dynamiske ruter, ruter præfikset med $ skal have adgang til URL-parameteren for at håndtere de data, der skal gengives. Det loader funktion har adgang til disse gennem en params argument.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Andre Remix-funktioner
Remix har et par andre hjælpefunktioner, der tilføjer ekstra funktionalitet til normale HTML-elementer og attributter i rutemodul API. Hver rute kan definere sin egen af disse typer funktioner.
Handlingsfunktion
An action funktion giver dig mulighed for at tilføje ekstra funktionalitet til en formularhandling ved hjælp af standardweb FormData API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Header funktion
Enhver HTTP standard headers kan gå i en headers fungere. Fordi hver rute kan have en overskrift, for at undgå konflikter med indlejrede ruter, den dybeste rute - eller URL'en med de mest fremadrettede skråstreger (/) — vinder. Du kan også få overskrifterne sendt igennem, actionHeaders, loaderHeaders eller parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funktion
Denne funktion indstiller metatags for HTML-dokumentet. Den ene er sat i root.tsx fil som standard, men de kan opdateres for hver rute.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Links funktion
HTML link elementer bor i <head> tag af et HTML-dokument og de importerer blandt andet CSS. Det links funktion, ikke at forveksle med <Link /> komponent, giver dig mulighed for kun at importere ting på de ruter, der har brug for dem. Så for eksempel kan CSS-filer være scoped og kun importeres på de ruter, der har brug for disse specifikke filer. Det link elementer returneres fra en links() fungere som en række objekter og kan enten være en HtmlLinkDescriptor fra link API eller PageLinkDescriptor der kan forhåndshente dataene for en side.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Sammenkobling mellem ruter
Remix giver en komponent til at gå mellem de forskellige ruter i din app kaldet <Link/>. For at få routing på klientsiden skal du bruge <Link to="">Name</Link> komponent i stedet for <a href="">Name</a>. Det <Link /> komponent tager også en rekvisit af prefetch med accepterer none som standard, intent at forhåndshente dataene, hvis Remix registrerer, at brugeren svæver eller fokuserer på linket, eller render som vil hente rutens data, så snart linket er gengivet.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}Næste skridt
Nu kender du det grundlæggende i Remix, og du er klar til at komme i gang med at bygge applikationer, ikke? Remix giver en Jokes app og en Blog tutorial for at få dig i gang med at implementere denne grundlæggende viden. Du kan også starte fra bunden og oprette en helt ny Remix-app. Eller hvis du er klar til at dykke i, så giv den K-Pop stak et forsøg. Jeg har virkelig nydt min tid med Remix og elsker fokus på webstandarder og at bringe det tilbage til det grundlæggende. Nu er det din tur til at begynde at skabe!
