JavaScript fortsetter å være et av de mest brukte programmeringsspråkene i verden. Denne populariteten har resultert i et enormt utvalg av biblioteker og rammeverk. Blant disse skiller React seg ut som et av de mest populære JavaScript-bibliotekene.
React har et rikt økosystem av rammeverk og biblioteker, alle designet for spesifikke funksjoner. Et webrammeverk gir en strukturert tilnærming til utvikling av webapplikasjoner. I stedet for å bygge alt fra grunnen av, tilbyr rammeverk gjenbrukbar kode som utviklere kan integrere i sine applikasjoner.
Remix er et relativt nytt webrammeverk for React som har opplevd betydelig vekst i popularitet. Denne artikkelen vil utforske hva Remix-rammeverket er, dets egenskaper, hvordan man setter det opp, bruksområder og begrensninger.
Hva er Remix Framework?
Remix er et fullstack webutviklingsrammeverk som er bygget oppå React. Med Remix kan du utvikle både backend og frontend av en applikasjon. Remix fokuserer på brukergrensesnittet og hjelper deg å levere en robust og rask brukeropplevelse.
Dette rammeverket kan beskrives som en kombinasjon av fire elementer: en kompilator, et nettleserrammeverk, et serverrammeverk og en HTTP-håndterer.
Remix var opprinnelig en betalt tjeneste, men ble gjort til åpen kildekode sent i 2021. Det ble også kjøpt opp av Shopify i 2022.
Remix Framework-funksjoner
- Remix Stabler: Med Remix CLI kan du raskt generere Remix-applikasjoner. Det finnes ferdige stabler, men du kan også bygge applikasjoner fra bunnen av. De offisielle, innebygde stablene inneholder funksjoner som automatisk distribusjon, databaser, testing, autentisering og linting. Eksempler på stabler er den populære Blues Stack, Indie Stack og Grunge Stack.
- Server-Side Rendering (SSR): Dette rammeverket muliggjør server-side rendering av React-komponenter. Den første gjengivelsen skjer på serveren, som sender et fullstendig gjengitt HTML-dokument til klienten. Server-side rendering forbedrer tilgjengeligheten, gir bedre søkemotoroptimalisering og øker hastigheten.
- Ruting med nestede ruter: Remix bruker React Router 6. Du trenger bare å plassere filene dine i rutemappen, og Remix sin rutemodul vil automatisk konvertere dem til navigerbare stier. En nestet rute er en rute som er plassert inne i en annen rute.
- Støtte for TypeScript og JavaScript: Remix kan brukes uavhengig av om du foretrekker JavaScript eller TypeScript. TypeScript gir deg mulighet til å definere variabler og identifisere feil tidlig.
- Innebygd datainnlasting og hurtigbufring: Rammeverket lar utviklere definere datalastere som henter data fra ulike kilder. Remix håndterer datahenting på både klient- og serversiden. Hurtigbufringsmekanismen reduserer unødvendig datahenting og optimaliserer påfølgende forespørsler.
- Kodedeling og forhåndshenting: Koden i en Remix-app kan deles inn i små, dynamisk lastbare biter. Dette reduserer den initielle størrelsen og gjør det mulig å laste data og kode i bakgrunnen.
Fordeler med Remix Framework
- Fullstack: Vanligvis bruker man forskjellige språk eller rammeverk for klient- og serversiden. For eksempel kan React brukes for frontend og et Node.js-rammeverk som ExpressJS for backend. Alternativt kan et Python-rammeverk som Django brukes i backend. Remix er et fullstack-rammeverk som betyr at både front-end og back-end er en del av den samme applikasjonen.
- Utmerket datahåndtering: Remix benytter native nettleserfunksjoner og konvensjoner. Dataflyten er sømløs, noe som forenkler overføring av data mellom front-end og back-end.
- Enkel tilstandshåndtering: Tilstandshåndtering i React-applikasjoner kan være krevende, og mange utviklere bruker tredjepartsbiblioteker som Redux. Remix bruker lastere for å håndtere tilstand på serversiden. Attributtet «useLoaderData» kan brukes fra hvilken som helst komponent i den gjeldende ruten.
- Feilgrenser: En feil i en nestet rute eller komponent vil ikke påvirke hele applikasjonen. Feilen begrenses til den spesifikke komponenten. Denne funksjonen er innebygd i Remix, mens det i andre rammeverk, som Next.js, krever ekstra implementering.
Forutsetninger for å sette opp en Remix-applikasjon
For å sette opp en Remix-app, trenger du følgende:
- Node.js versjon 14.17.0 eller nyere
- En pakkebehandler som npm (versjon 7 eller høyere)
- En koderedigerer
- Grunnleggende forståelse av hvordan React-applikasjoner fungerer
Slik setter du opp «Hello, World!» på Remix
La oss lage et enkelt prosjekt med navnet «Remix-app». Du kan følge disse trinnene:
- Gå til stedet der du ønsker å opprette applikasjonen, åpne terminalen, og kjør følgende kommando:
npx [email protected] remix-app
Terminalen vil be deg om å svare på noen spørsmål for å konfigurere applikasjonen. Vi kan velge de grunnleggende innstillingene og velge TypeScript som språk.
- Naviger til den opprettede applikasjonen (Remix-app) og åpne den i din foretrukne koderedigerer. Mappestrukturen vil se omtrent slik ut:
- Bygg applikasjonen ved å bruke følgende kommando:
npm run build
- Start utviklingsserveren ved å bruke følgende kommando:
npm start
Du kan nå åpne appen i nettleseren ved hjelp av lenken http://localhost:3000. Du vil da se følgende:
- Endre innholdet i filen app/root.tsx med følgende kode:
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>
);
}
Den gjengitte siden vil nå se slik ut:
Hvor brukes Remix Framework?
Som Next.js og React, kan Remix brukes til å utvikle ulike typer applikasjoner. Her er noen av de vanligste bruksområdene:
- Enkelt-side applikasjoner (SPA): All kode i en Remix-app lastes inn én gang. Den server-renderte tilnærmingen gir raske initiallastinger, mens klienten håndterer påfølgende forespørsler.
- SEO-vennlige nettsteder: Remix bruker forhåndsgjengivelse for å generere statiske HTML-sider. Dette gjør det mulig å indeksere nettsider selv om innholdet er dynamisk.
- Dynamiske nettsteder: Remix bruker server-side rendering i applikasjonene sine. SSR laster sidene på serveren før en HTML-side sendes til klienten. Dette gjør Remix egnet for nettsteder med dynamisk generert innhold.
Hvordan Remix-rammeverket fungerer på serversiden og klientsiden
Gjengivelse på serversiden
Remix gjengir koden din til ren HTML på serversiden. Dette reduserer mengden JavaScript og øker dermed lastehastigheten. Remix bruker native «action»- og «loader»-funksjoner. Serveren utfører alle server-side-handlinger du spesifiserer, gjengir React-koden til ren HTML og sender dette til klientnettleseren.
Gjengivelse på klientsiden
Remix tilbyr, akkurat som Next.js, «prefetching»-funksjonalitet som gir en jevn navigasjonsopplevelse.
I Next.js lar <link>-komponenten forhåndslaste en side som <link> omdirigerer til, slik at man ikke trenger å vente på at siden skal lastes inn. Denne tilnærmingen fungerer imidlertid best for statiske nettsteder.
Remix bruker funksjonen <link rel=»prefetch»>, som gjør det enkelt å hente <links> og andre sider. Dette gjør at Remix laster sider raskt, selv når innholdet endrer seg basert på brukerens handlinger.
Remix-begrensninger
- Lite fellesskap: Remix var opprinnelig et betalt rammeverk, men ble åpen kildekode i 2021. Som et relativt nytt rammeverk er ressursene og verktøyene begrenset.
- Brattere læringskurve: Remix introduserer konseptet med nestede ruter, som kan være forvirrende for utviklere som kommer fra React eller rammeverk som Next.js. Men når man først forstår konseptet, blir rammeverket enkelt å bruke.
Hva er fremtiden for Remix?
- Økt adopsjon: Som et relativt nytt rammeverk er det sannsynlig at flere utviklere og selskaper vil oppdage og bruke Remix i fremtiden.
- Voksende økosystem: Det er et begrenset antall verktøy og biblioteker for Remix i dag. Dette vil trolig endre seg etter hvert som adopsjonen øker.
- Større fellesskap: Et sterkt fellesskap er viktig for ethvert rammeverk eller programmeringsspråk. Det er forventet at fellesskapet rundt Remix vil vokse etter hvert som flere utviklere ser fordelene med rammeverket.
Er Remix bedre enn Next.js?
Svaret på dette spørsmålet avhenger av applikasjonen du utvikler. Hvis du ønsker å bygge en fullstack-applikasjon med ett rammeverk, kan Remix være et bedre valg enn Next.js. Hvis du derimot foretrekker et mer modent rammeverk med et stort fellesskap og mange ressurser, kan Next.js være det rette valget.
Er Remix et godt rammeverk?
Ja. Det er et godt rammeverk for å utvikle en fullstack-applikasjon med ett rammeverk. Det er også et godt valg hvis du ønsker teknologi med innebygde feilgrenser. Men Remix er kanskje ikke det rette valget hvis du prioriterer et rammeverk med et stort fellesskap og mange ressurser.
Er Remix JS produksjonsklart?
Ja. Hvis du er komfortabel med å distribuere Node.js-applikasjoner, vil det også være enkelt å jobbe med og distribuere Remix-applikasjoner.
Bør jeg lære Remix eller React?
Remix er et React-rammeverk. Derfor er det en fordel å forstå React før du lærer Remix. Hvis tiden din er begrenset, vil valget avhenge av dine mål.
Remix lar deg bygge fullstack-applikasjoner. Det er også mulig å lære Remix uten å ha en dyp forståelse av React, men læringskurven vil være brattere.
Hvis du bruker React, trenger du et backend-rammeverk som Django eller Ruby on Rails for å utvikle en fullstack-applikasjon. Hvis du velger å lære React, vil du kunne dra nytte av et stort antall ressurser og et aktivt fellesskap.
Konklusjon
Det er fortsatt for tidlig å si sikkert om Remix er fremtiden for webutvikling. De gode funksjonene som fleksibel ruting, server-side rendering, kodedeling og fokus på utvikleropplevelse, gjør det til et lovende webrammeverk.
Men Remix er fortsatt relativt nytt og har et begrenset antall ressurser og et lite fellesskap. Verktøyene og bibliotekene for Remix er fortsatt få, siden de fleste åpen kildekode-rammeverk er avhengig av fellesskapsstøtte og tredjepartsverktøy.
Det kan også være nyttig å utforske andre rammeverk og biblioteker for å utvide dine ferdigheter som fullstack-utvikler.