JavaScript beholder herredømmet som et av de mest brukte programmeringsspråkene. På grunn av dette faktum har dette programmeringsspråket også mange biblioteker og rammer. React er et av de mest populære JavaScript-bibliotekene.
React kommer også med mange rammeverk og biblioteker designet for å utføre forskjellige funksjoner. Et nettrammeverk gir en strukturert måte å lage en nettapplikasjon på. I stedet for å lage alt fra bunnen av, gir rammeverk gjenbrukbar kode som utviklere kan bruke i applikasjonene sine.
Remiks er et av de nyeste React-nettrammene som har fått mye gjennomslag i det siste. Denne artikkelen vil definere hva som er Remix-rammeverket, dets funksjoner, hvordan du setter det opp, brukstilfellene til Remix og dets begrensninger.
Innholdsfortegnelse
Hva er Remix Framework?
Remix er et fullstack-nettutviklingsrammeverk bygget på toppen av React. Du kan bruke en Remix-app for å lage appens backend og frontend. Remix lar deg fokusere på brukergrensesnittet og hjelpe deg med å levere en spenstig og rask brukeropplevelse.
Dette rammeverket kan beskrives som fire ting: en kompilator, et nettleserrammeverk, et serverrammeverk og en HTTP-behandler.
Remix var opprinnelig en betalt tjeneste, men ble gjort åpen kildekode sent i 2021. Det var det også kjøpt opp av Shopify i 2022.
Remix Framework-funksjoner
- Remix-stabler: Denne Remix CLI-funksjonen lar deg generere Remix-apper raskt. Noen av disse stablene er innebygd. Du kan også lage en applikasjon fra bunnen av på egen hånd. De offisielle innebygde stablene har funksjoner som automatiske distribusjonsrørledninger, databaser, testing, autentisering og linting. Noen av stablene 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 på Remix skjer på serveren, og sender et fullstendig gjengitt HTML-dokument til klienten. Gjengivelse på serversiden har flere fordeler, som å forbedre tilgjengeligheten, la søkemotorer gjennomsøke innholdet og forbedre hastigheten.
- Ruting med nestede ruter: Remix bruker React Router 6. Med dette rammeverket trenger du bare å slippe filene inn i rutemappen, og Remix sin rutemodul vil transformere dem til navigerbare stier. En nestet rute er en rute inne i en annen rute.
- Støtter TypeScript og JavaScript: Du kan bruke Remix uavhengig av om du bruker JavaScript eller TypeScript. Fordelen med å bruke TypeScript er at det lar deg deklarere variabler og gjøre det enkelt å fange opp feil tidlig.
- Innebygd datainnlasting og hurtigbufring: Dette rammeverket lar utviklere definere lastere som henter data fra ulike kilder. Remix håndterer datahenting på både klient- og serversiden. Buffermekanismen som tilbys av dette rammeverket gjør det enkelt å redusere unødvendig datahenting og optimalisere påfølgende forespørsler.
- Kodedeling og forhåndshenting: Du kan dele koden i en Remix-app i små, lastbare biter på forespørsel. Denne tilnærmingen reduserer den innledende buntstørrelsen og forhåndshentingsfunksjonene som laster data og kode i bakgrunnen.
Fordeler med Remix Framework
- Full stack: De fleste bruker forskjellige språk eller rammeverk for å lage appenes klient- og serversider. Du kan for eksempel bruke React for frontend og bruke et Node.js-rammeverk som ExpressJS for backend. I andre tilfeller kan du bruke et Python-rammeverk som Django i backend. Remix er et fullstack-rammeverk, noe som betyr at front-end og back-end vil være på samme app.
- Utmerket datahåndtering: Remix er avhengig av native nettleserfunksjoner og konvensjoner. Den eksepsjonelle dataflyten gjør det enkelt å overføre dataene mellom front-end og back-end av applikasjonen.
- Enkel tilstandshåndtering: Det kan være vanskelig å administrere tilstanden i React-applikasjoner, og de fleste utviklere bruker tredjepartsbiblioteker som Redux. Remix bruker lastere for å administrere tilstanden på serversiden. Du kan bruke «useLoaderData»-attributtet fra hvilken som helst komponent i gjeldende rute.
- Feilgrenser: Hvis du får en feil i en nestet rute eller komponent i en Remix-app, vil feilene være begrenset til kun den komponenten. En slik feil vil ikke ødelegge hele appen, som i andre rammeverk. Selv om du kan implementere feilgrensefunksjonen i noen React-rammeverk som Next.js, er denne funksjonen innebygd i Remix.
Forutsetninger for å sette opp en Remix-applikasjon
Hvis du vil sette opp en Remix-app, er dette noen av tingene du trenger;
- Node.js versjon fra 14.17.0 eller nyere
- En pakkebehandler som npm (7 eller høyere)
- En koderedigerer
- En forståelse av hvordan React-apper fungerer
Slik setter du opp «Hello, World!» på Remix
Vi lager et enkelt prosjekt og kaller det «Remix-app». Du kan følge med;
- Naviger til stedet der du vil opprette programmet, åpne terminalen og kjør denne kommandoen;
npx [email protected] remix-app
Terminalen vil be deg svare på flere spørsmål og sette opp applikasjonen din. Vi kan holde oss til det grunnleggende og velge TypeScript som språk.
- Naviger inn i den opprettede appen (Remix-appen) og åpne den i din favorittkoderedigerer. Mappestrukturen vil være som følger;
- Bygg appen din ved å bruke denne kommandoen;
npm run build
- Start utviklingsserveren ved å bruke denne kommandoen;
npm start
Du kan nå åpne vinduet i nettleseren din ved å bruke lenken http://localhost:3000, og denne vil vises i nettleseren din;
- Endre innholdet i app/root.tsx-filen med følgende;
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 være som følger;
Hvor brukes Remix Framework
Akkurat som Next.js og React, kan Remix brukes til å bygge forskjellige applikasjonstyper. Dette er noen av de beste brukstilfellene;
- Enkeltsideapplikasjoner: All koden i en Remix-app lastes inn én gang. Den server-renderte tilnærmingen tillater raske innledende belastninger mens klienten håndterer de påfølgende forespørslene sømløst.
- SEO-vennlige nettsteder: Remix bruker forhåndsgjengivelsesfunksjonen til å generere statiske HTML-sider. Dette gjør det mulig å indeksere nettsider selv om du har å gjøre med dynamisk innhold.
- Dynamiske nettsteder: Remix bruker gjengivelse på serversiden i sine applikasjoner. SSR laster sidene på serveren før en HTML-side sendes til klienten. Remix blir dermed en perfekt passform for nettsteder hvis innhold er dynamisk generert.
Hvordan Remix-rammeverket fungerer på serversiden og klientsiden
Gjengivelse på tjenersiden
Remix gjengir koden din i vanlig HTML på serversiden. Denne tilnærmingen reduserer mengden JavaScript, og øker dermed lastehastigheten. Remix bruker i utgangspunktet native «action»- og «loader»-funksjoner. Serveren vil utføre alle handlinger på serversiden du oppgir, gjengi React-koden ren og HTML, og deretter sende den til klientnettleseren.
Gjengivelse på klientsiden
Remix, akkurat som Next.js, tilbyr «prefetching»-funksjonen som tilbyr jevn navigering til brukerne.
I Next.js lar -komponenten vår nettside forhåndslaste en side som omdirigerer til og trenger ikke å vente på at siden skal lastes ned. En slik tilnærming fungerer imidlertid bare bra med statiske nettsteder.
Remix bruker funksjonen , som gjør det enkelt å hente
Remix-begrensninger
- Lite fellesskap: Remix var opprinnelig et betalt rammeverk. Imidlertid ble den laget åpen kildekode i 2021 og er fortsatt ung. Dette betyr at det finnes begrensede ressurser og verktøy for å gjøre appen din til en lek.
- Brattere læringskurve: Remix introduserer konseptet nestede ruter og kan være forvirrende hvis du kommer fra React eller dets rammeverk som Next.js. Men når du først får kroken, blir det enkelt å bruke dette rammeverket.
Hva er Future of Remix?
- Vi vil sannsynligvis se økt adopsjon: Remix er fortsatt ung. Utviklere har kanskje ikke oppdaget potensialet, og vi vil sannsynligvis se flere selskaper og utviklere bruke det i fremtiden.
- Økosystemet vil sannsynligvis vokse: Remix har fortsatt få verktøy og biblioteker for å støtte økosystemet. Vi kan forvente flere verktøy og biblioteker etter hvert som adopsjonen vokser.
- Fellesskapet vil vokse: Et fellesskap er avgjørende for veksten av et ramme-/programmeringsspråk. Vi forventer at fellesskapet vil vokse etter hvert som utviklere oppdager edelstenene til Remix.
Er Remix bedre enn Next.js?
Svaret på dette spørsmålet vil avhenge av appen du lager. Hvis du vil bygge en fullstack-app ved hjelp av ett rammeverk, vil Remix være bedre enn Next.js. Men hvis du vil ha et modent rammeverk med massevis av ressurser og en god tilhengerskare, vil Next.js være det perfekte valget.
Er Remix et godt rammeverk?
Ja. Det er et godt rammeverk for å bygge hele fullstack-appen ved å bruke ett rammeverk. Det er også et fantastisk rammeverk hvis du vil ha teknologi med feilgrenser innebygd. Remix er imidlertid ikke det rette rammeverket hvis du ønsker et rammeverk med et stort fellesskap og masse ressurser.
Er Remix JS-produksjonen klar?
Ja. Hvis du er fortrolig med å distribuere Node.js-applikasjoner, vil det også være en lek å jobbe med og distribuere Remix-apper.
Bør jeg lære Remix eller React?
Remix er et React-rammeverk. Du må derfor forstå hvordan React fungerer før du begynner å lære Remix. Men hvis tiden din er begrenset og du bare ønsker å lære ett rammeverk, vil valget avhenge av sluttmålene dine.
Remix lar deg bygge fullstack-apper. Du kan også lære Remix selv om du ikke forstår React, men læringskurven vil være bratt.
Men hvis du bruker React, må du bruke et backend-rammeverk som Django eller Ruby on Rails hvis du vil ha en fullstack-app. Hvis du bestemmer deg for å lære React, kan du stole på de mange ressursene og fellesskapet.
Konklusjon
Det er fortsatt tidlig å fastslå om Remix er fremtiden for nettutvikling. Dens fantastiske funksjoner, som fleksibel ruting, gjengivelse på serversiden, kodedeling og fokus på utvikleropplevelse, gjør det til et veldig lovende nettrammeverk.
Imidlertid er Remix fortsatt ung, og ressursene er fortsatt begrensede. Den har også et lite samfunn. Remix JS-rammeverkets verktøy og biblioteker er få, ettersom de fleste åpen kildekode-rammeverk er avhengige av fellesskapsstøtte og tredjepartsverktøy.
Du kan også utforske noen rammeverk og biblioteker for å Know som fullstack-utvikler.