javascript

Nytt Javascript-rammeverk virker uten Javascript

Man bør jobbe med fundamentene til weben, ikke mot, er filosofien i det nye rammeverket Remix.

Devlin Duldulao fortalte om webrammeverket Remix under konferansen Øredev 2022.
Devlin Duldulao fortalte om webrammeverket Remix under konferansen Øredev 2022.

Javascript-verdenen er fullt av rammeverk, men nå kommer et nytt et, som er litt annerledes. Det har fokus på webstandarder som allerede eksisterer, istedenfor å finne opp hjulet på nytt med Javascript.

Den sentrale ideen er «progressive enhancement», altså progressive forbedringer, som Mozilla definerer som «en designfilosofi som gir så mange brukere som mulig et grunnleggende innhold og en grunnleggende funksjonalitet, mens optimal opplevelse leveres til brukere av de mest moderne nettleserne».

Det nye rammeverket heter Remix, og filosofien kan oppsummeres i fire punkter:

Det handler om å omfavne server-klient-modellen og skille klart mellom kildekode og innhold. Man skal jobbe med, og ikke mot, fundamentene til weben: Nettlesere, HTTP og HTML. Javascript skal brukes til å forbedre brukeropplevelsen ved å etterligne nettleserens atferd. Og unngå å over-abstrahere de underliggende teknologiene, når de har det man trenger, fra starten av.

Dermed passer Remix med tendensen, hvor i alle fall noen taler for å bruke mindre Javascript på weben.

Remix bygger til en viss grad på React, og hvis man ønsker det, kan man bruke komponenter fra React i Remix-applikasjoner. Det kan kjøres med node.js på serversiden, men man kan også bruke Deno.

Utviklerne lærer webstandardene

Én av disiplene til det nye rammeverket er Devlin Duldulao, som er fra Filippinene og har bodd og jobbet i Oslo i de siste tre og et halvt årene. Han har ti års bakgrunn fra webutvikling. På konferansen Øredev, som nylig ble avholdt i Malmö, holdt han et innlegg om rammeverket.

Han forteller:

– «Det er så mange Javascript-rammeverk – hver måned kommer det et nytt», er vitsen i webutvikler-miljøet. Remix interesserer seg først og fremst for at utviklerne skal lære seg webstandardene.

Det gjelder for eksempel HTML-skjemaer og alt det andre som finnes inne i nettleseren:

– For det er så mange ting i nettleseren som utviklerne ikke bruker. De skriver i stedet «ekstra» funksjoner i Javascript som man ikke trenger. Det gjelder for eksempel når man skal sende data til eller hente data fra serveren – her bruker Remix HTML-skjemaer til å modifisere data. Det er raskere, og du trenger ikke Javascript.

Eksempel på Remix for bruk av HTML-skjemaer for håndtering av data, hentet fra rammeverkets nettsted:

export async function loader({ request }) {

return getProjects();

}

export async function action({ request }) {

const form = await request.formData();

return createProject({ title: form.get("title") });

}

export default function Projects() {

const projects = useLoaderData();

const { state } = useTransition();

const busy = state === "submitting";

return (

<div>

{projects.map((project) => (

<Link to={project.slug}>{project.title}</Link>

))}

<Form method="post">

<input name="title" />

<button type="submit" disabled={busy}>

{busy ? "Creating..." : "Create New Project"}

</button>

</Form>

</div>

);

}

Faktisk kan brukerne med Remix kan slå av Javascript i nettleseren og fortsatt bruke applikasjonen til å legge til, modifisere eller slette data.

Slike ting gjøres ofte med et Ajax-kall. Hva er egentlig galt med det, og hva kan Remix gjøre i stedet?

– Hvis du sitter på et tog som kjører gjennom en tunnel, og du får tilgang til et nettsted for å fylle ut skjemaet og det ikke er internett i tunnelen, kan du fortsatt bruke applikasjonen. Og når du kommer ut av tunnelen, blir alt sammen synkronisert igjen. Det du ser i brukergrensesnittet, er det samme som du har i databasen, sier Duldulao.

Det er en mer robust løsning, for hvis applikasjonen er basert på Javascript, vil det ikke virke hvis nettforbindelsen forsvinner.

Automatisk synkronisering med serveren

I motsetning til andre rammeverk krever ikke Remix at man installerer et bibliotek for å holde data synkronisert mellom server og klient, forklarer Duldulao:

– Remix fortsetter å sjekke om data er synkronisert, og hvis ikke, utfører Remix endringene for deg. I andre rammeverk, eller i alminnelig React, må du installere det populære biblioteket Redux til å håndtere tilstand.

Devlin Duldulao har gitt sin kjærlighet til webrammeverket Remix, som fokuserer på klassiske webdyder. Han holdt et innlegg om emnet under konferansen Øredev, som fant sted i Malmø i november. Foto: Tania Andersen, Version2
Devlin Duldulao har gitt sin kjærlighet til webrammeverket Remix, som fokuserer på klassiske webdyder. Han holdt et innlegg om emnet under konferansen Øredev, som fant sted i Malmø i november.

Da må utvikleren skrive masse kode med Redux-biblioteket for å bruke funksjonaliteten.

– Hvis du legger til mer kode, gir det flere feil og mer du må vedlikeholde. Det blir vanskeligere å vedlikeholde applikasjonen og lese koden. Utviklere kommer og går i denne bransjen – etter to år, eller kanskje tre måneder, er det en ny person som må lese koden, og det er bedre hvis de ser mindre kode enn mer kode, mener han.

Webstandarder er raskere og pålitelige

For Devlin Duldulao handlet valget av Remix – blant en overflod av andre rammeverk – om webstandarder.

– Når jeg bruker Remix, bygger jeg ikke bare en applikasjon til kundene mine, jeg lærer også hva som er inne i nettleseren – webstandarder som jeg kan bygge videre på – og det er raskere og mer pålitelig.

Man trenger ikke å installere masse biblioteker. I stedet kan programmet bygge på nettleseren og standardene solide fundament.

Shopify, som er en stor aktør innen systemer for netthandel, har nylig kjøpt opp firmaet bak Remix, som imidlertid fortsetter å være åpen kildekode.

– For Shopify hjelper det å gjøre firmaets e-handel virkelig raskt. I e-handel er det viktig, sier Duldulao.

Det heter seg at jo lenger brukeren må vente for å kunne bruke websiden, jo flere inntekter mister butikken. Og her kan Remix tilby noe.

– Det handler alltid om penger, når brukerne venter. Ytelse er en «big deal» i e-handel. Man har tusenvis av brukere, og nettstedet må vises på et blunk. Og det må være personalisert, avslutter Duldulao.

Denne artikkelen ble først publisert på Version 2 for deres abonnenter. Den er tilgjengelig på norsk for abonnenter av Ekstra gjennom vår samarbeidsavtale.

Powered by Labrador CMS