Verjetno ste slišali veliko navdušenja okoli enega od najnovejših otrok na okvirnem bloku, Remix. Morda je presenetljivo, da se je začel leta 2019, vendar je bil prvotno na voljo samo kot premijski okvir, ki temelji na naročnini. Leta 2021 so ustanovitelji zbrali začetno financiranje in odprli okvir, da so uporabniki lahko začeli uporabljati Remix brezplačno. Zapornice so se odprle in zdi se, da vsi govorijo o tem, dobrem ali slabem. Poglobimo se in si oglejmo nekaj osnov Remixa.
Remix je strežniško "robno" prvo ogrodje JavaScript. Uporablja React, vsaj za zdaj, za sprednji del in daje prednost upodabljanju aplikacije na strani strežnika na robu. Platforme lahko vzamejo kodo na strani strežnika in jo izvajajo kot brezstrežniške ali robne funkcije zaradi česar je cenejši od tradicionalnega strežnika in ga približate vašim uporabnikom. Ustanovitelji Remixa ga radi imenujejo okvir "central stack", ker prilagaja zahteve in odzive med strežnikom in odjemalcem za platformo, na kateri se izvaja.
Uvajanje remiksa
Ker Remix potrebuje strežnik, se pogovorimo o tem, kako ga lahko namestite. Remix ne zagotavlja samega strežnika - strežnik prinesete vi - kar omogoča, da se izvaja v katerem koli Node.js or DENO okolje, vključno z Netlify Edge in Platforma za aplikacije DigitalOcean. Remix sam je a prevajalnik, program, ki prevaja zahteve za platformo, na kateri deluje. Ta postopek uporablja esbuild za ustvarjanje upravljavcev za zahteve do strežnika. Obdelovalci HTTP, ki jih uporablja, so zgrajeni na Web Fetch API in jih izvajajo na strežniku prilagajanje za platformo, na katero bodo nameščeni.
Zbori remiksov
Skladi remiksov so projekti, ki imajo nekatera običajna orodja, ki so vnaprej konfigurirana za vas. obstajajo trije uradni skladi ki jih vzdržuje ekipa Remix in so vsi poimenovani po glasbenih žanrih. Obstajajo tudi številni skladi remiksov skupnosti, vključno z K-Pop skladba ustvarila skupina za predloge pri Netlify. Ta sklad je močan in vključuje a Supabase baza podatkov in avtentikacija, Tailwind za styling, Cypress testiranje od konca do konca, Lepše oblikovanje kode, ESLint linting, in TypeScript statično tipkanje. Oglejte si objavo Tare Manicsic o uvajanju K-Pop Stacka.
Poti predpomnjenja
Čeprav Remix potrebuje strežnik, lahko še vedno izkoristi prednosti Jamstack koristi predpomnjenja poti. Statično spletno mesto ali ustvarjanje statičnega spletnega mesta (SSG) je, ko je vsa vaša vsebina upodobljena v času gradnje in ostane statična do druge obnove. Vsebina je vnaprej ustvarjena in jo je mogoče postaviti na CDN. To zagotavlja številne prednosti in hitro nalaganje spletnega mesta za končnega uporabnika. Vendar pa Remix ne izvaja tipičnega SSG kot druga priljubljena ogrodja React, vključno z Next.js in Gatsby. Če želite izkoristiti nekatere prednosti SSG, lahko uporabite native Glava HTTP Cache-Control v remiksu funkcija glave za predpomnilnik določene poti ali neposredno v root.tsx Datoteka.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Nato dodajte svoje funkcija glave kjer hočeš. To se shrani za eno uro:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Ponovno mešanje usmerjanja
Veliko ogrodij se je nagnilo k usmerjanju na podlagi datotečnih sistemov. To je tehnika, pri kateri se določena mapa uporablja za definiranje poti za vašo aplikacijo. Običajno imajo posebno sintakso za deklariranje dinamičnih poti in končnih točk. Trenutno največja razlika med Remixom in drugimi priljubljenimi okviri je zmožnost uporabe ugnezdeno usmerjanje.
Vsaka aplikacija Remix se začne z root.tsx mapa. Tukaj je upodobljena celotna osnova aplikacije. Tukaj boste našli nekaj pogostih postavitev HTML, kot je <html> oznaka, the <head> in nato še <body> oznako s komponentami, potrebnimi za upodabljanje aplikacije. Edina stvar, ki jo je treba tukaj poudariti, je <Scripts> komponenta je tisto, kar omogoča JavaScript na spletnem mestu; nekatere stvari bodo delovale brez tega, vendar ne vse. The root.tsx deluje kot nadrejena postavitev za vse znotraj datoteke routes je vse v routeh upodobljeno tam, kjer je <Outlet/> komponenta je v root.tsx. To je osnova ugnezdenega usmerjanja v Remixu.
Vgnezdeno usmerjanje
Ne samo, da je Remix ustanovil del ekipe iz React usmerjevalnik, tudi uporablja React Router. Pravzaprav so prinaša nekaj dobrih stvari Remixa nazaj v React Router. Zapleten problem, ki ga vzdrževalci Next.js in SvelteKit trenutno poskušajo rešiti, je ugnezdeno usmerjanje.
Ugnezdeno usmerjanje se razlikuje od tradicionalnega usmerjanja. Kadar bi nova pot pripeljala uporabnika na novo stran, je vsaka ugnezdena pot ločen del iste strani. Omogoča ločevanje zadev tako, da ohrani poslovno logiko, povezano samo z datotekami, ki jo potrebujejo. Remix lahko obravnava napake, lokalizirane samo na del strani, kjer je ugnezdena pot. Druge poti na strani so še vedno uporabne in pot, ki je bila prekinjena, lahko zagotovi ustrezen kontekst za napako, ne da bi se celotna stran zrušila.
Remix to naredi, ko je vstavljena korenska datoteka app/routes se imenuje enako kot imenik datotek, ki se bodo naložile znotraj osnovne datoteke. Korenska datoteka postane a postavitev za datoteke v imeniku z uporabo an <Outlet /> komponento, ki Remixu pove, kam naj naloži druge poti.
Izhodna komponenta
O <Outlet /> Komponenta je signal za Remix, kje naj upodablja vsebino za ugnezdene poti. Shranjen je v datoteki v korenu app/routes imenik z istim imenom kot ugnezdene poti. Naslednja koda gre v a app/routes/about.tsx in vključuje izhod za datoteke v notranjosti app/routes/about mapa:
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 />
</>
)
}Struktura map
Katera koli datoteka v app/routes/ imenik postane pot na URL-ju svojega imena. Imenik lahko dodate tudi z an index.tsx Datoteka.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxČe ima pot enako ime kot imenik, imenovana datoteka postane datoteka postavitve za datoteke znotraj imenika in datoteka postavitve potrebuje Izhodna komponenta da postavite ugnezdeno pot.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPostavitve lahko ustvarite tudi tako, da jim predpono dodate dvojni podčrtaj (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about bo še vedno upodobil app/routes/about.tsx datoteko, ampak bo tudi upodobil vse, kar je v njej app/routes/about/index.tsx kjer je Izhodna komponenta je v oznaki app/routes/about.tsx.
Dinamične poti
Dinamična pot je pot, ki se spreminja glede na informacije v URL-ju. To je lahko ime objave v spletnem dnevniku ali ID stranke, vendar ne glede na to, kaj je $ sintaksa, dodana na sprednji del poti, sporoča Remixu, da je dinamična. Ime ni pomembno, razen $ predpono.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPridobite te podatke!
Ker Remix upodablja vse svoje podatke na strežniku, ne vidite veliko stvari, ki so postale standard aplikacije React, npr. useState() in useEffect() kavlji, v Remixu. Manj je potrebe po stanju na strani odjemalca, saj je bilo že ovrednoteno na strežniku.
Prav tako ni pomembno, katero vrsto strežnika uporabljate za pridobivanje podatkov. Ker se Remix nahaja med zahtevo in odgovorom ter ga ustrezno prevede, lahko uporabite standard Web Fetch API. Remix naredi to v a loader funkcijo, ki samo deluje na strežniku in uporablja useLoaderData() kavelj za upodabljanje podatkov v komponenti. Tukaj je primer uporabe Cat kot storitev API za upodabljanje naključne slike mačke.
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 />
</>
)
}Parametri poti
V dinamičnih poteh, poti s predpono $ morajo imeti možnost dostopa do parametra URL za obdelavo podatkov, ki jih je treba upodobiti. The loader funkcija ima dostop do teh prek a params prepir.
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>
}Druge funkcije Remix
Remix ima nekaj drugih pomožnih funkcij, ki dodajo dodatno funkcionalnost običajnim elementom in atributom HTML v API modula poti. Vsaka pot lahko definira lastno od teh vrst funkcij.
Akcijska funkcija
An action funkcija vam omogoča dodajanje dodatne funkcionalnosti dejanju obrazca z uporabo standardnega spleta API FormData.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Funkcija glave
Kaj Standardne glave HTTP lahko gre v a headers funkcijo. Ker ima lahko vsaka pot glavo, da se izognete sporom z ugnezdenimi potmi, najglobljo potjo - ali URL-jem z največ poševnicami (/) — zmaga. Glave lahko prenesete tudi skozi, actionHeaders, loaderHeadersali parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funkcija
Ta funkcija bo nastavila meta oznake za dokument HTML. Ena je postavljena v root.tsx datoteko privzeto, vendar jih je mogoče posodobiti za vsako pot.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Funkcija povezav
HTML link elementi živijo v <head> oznako dokumenta HTML in med drugim uvozijo CSS. The links funkcijo, ki je ne smemo zamenjevati z <Link /> komponenta, omogoča samo uvoz stvari na poti, ki jih potrebujejo. Tako je na primer mogoče datoteke CSS določiti in jih uvoziti samo na poti, ki potrebujejo te posebne datoteke. The link elementi so vrnjeni iz a links() deluje kot niz predmetov in je lahko bodisi a HtmlLinkDescriptor Iz link API ali PageLinkDescriptor ki lahko vnaprej pridobi podatke za stran.
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" }
]
}Povezava med potmi
Remix ponuja komponento za premikanje med različnimi potmi v vaši aplikaciji <Link/>. Če želite pridobiti usmerjanje na strani odjemalca, uporabite <Link to="">Name</Link> komponento namesto <a href="">Name</a>. <Link /> komponenta ima tudi podporo prefetch s sprejema none privzeto, intent za vnaprejšnje pridobivanje podatkov, če Remix zazna, da uporabnik lebdi ali fokusira povezavo, ali render ki bo pridobil podatke o poti takoj, ko bo povezava upodobljena.
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>
);
}Naslednji koraki
Zdaj poznate osnove Remixa in ste pripravljeni začeti dejansko izdelovati aplikacije, kajne? Remix zagotavlja a Aplikacija za šale in Vadnica za blog da boste začeli izvajati to osnovno znanje. Prav tako lahko začnete iz nič in ustvarite popolnoma novo aplikacijo Remix. Če pa ste se pripravljeni potopiti, dajte K-Pop skladba poskusiti. Zelo sem užival v svojem času z Remixom in mi je všeč osredotočenost na spletne standarde in vračanje k osnovam. Zdaj si na vrsti ti, da začneš ustvarjati!
