Våre spådommer for front-end i 2023

Av Øystein Malt

Front-end verden beveger seg like fort som alltid, med rammeverk, bibliotek og teknikker sprettende opp som ugress. Det kommende året blir om mulig enda mer spennende enn fjoråret, og i Kraftlauget har vi sett fremover på hva vi tror 2023 vil bringe.

Vi har gått inn i det nye året med skyhøy inflasjon og økte priser på omtrent alt. Dette vil nok prege også vårt fagfelt i året som kommer. Med reduserte utsikter for inntjening, vil vi måtte tenke annerledes når vi utvikler løsninger for kundene våre. Ytelse, produktivitet og kvalitet har alltid vært fokuspunkt i utviklingen av applikasjoner, og i år vil disse være viktigere enn noen gang. I 2023 ser vi tydelige områder innen rammeverk, bibliotek og verktøy som lar oss heve nivået på løsningene vi skaper med kode. La oss ta en nærmere titt på trendene vi i Kraftlauget tror vil forme året innen front-end utvikling.

Mindre JavaScript?

Med stadig mer fokus på ytelse og brukervennlighet, benyttes løsninger for SSR som for eksempel Next.js hyppigere. Server Side Rendering (SSR) er en teknikk der en webapplikasjons HTML-kode genereres på serveren før den sendes til nettleseren. På denne måten reduseres behovet for å sende JavaScript til nettleseren, og applikasjonen vil laste raskere for brukeren. Resten av applikasjonskoden kan så lastes inn etter at applikasjonen har startet, uten å påvirke oppstartstiden. Prosessen med å kombinere den genererte HTML-koden og applikasjonskoden etter denne har lastet kaller vi hydrering. Denne hydreringen kan være ressurskrevende, og det siste året har det kommet flere teknikker for å redusere behovet for hydrering.

Next.js 13, sammen med React 18, støtter nå "serverkomponenter" og strømming av disse mellom server og nettleser. Serverkomponenter gjør det mulig å benytte SSR på individuelle komponenter, og strømme disse til nettleseren. Serverkomponenter vil aldri ha behov for JavaScript i nettleseren, så på denne måten vil Next.js redusere mengden applikasjonskode som må hydreres og dermed øke ytelsen. Serverkomponenter i Next.js er fremdeles i beta, men vi forventer å se høy adopsjon av mulighetene Next.js 13 tilbyr allerede nå.

Andre rammeverk har hovedsakelig to ulike tilnærminger til hydreringsproblemet. Den ene er “resumability”, der applikasjonstilstanden serialiseres som en del av HTML-koden som sendes til nettleseren, hvor rammeverket så kan deserialisere og gjenoppta kjøringen av applikasjonen. Den andre er “delvis hydrering”, hvor ulike deler av applikasjonen blir hydrert etterhvert som det er behov for det. Qwik og Astro er blant de fremtredende rammeverkene som benytter disse fremgangsmåtene for hydrering. Begge disse ser økt popularitet på bakgrunn av sine innovative løsninger, og dette vil nok fortsette i 2023.

Samtidig som det er gjort store forbedringer i håndteringen av hydrering, er utvikleropplevelse og produktivitet et enda større fokus hos rammeverkutviklere. Svelte har lenge scoret meget høyt i utviklerundersøkelser, og med Sveltekit som akkurat slapp versjon 1.0 vil vi nok se en utvidet bruk av Svelte og Sveltekit i året som kommer. Remix har etablert seg som det største React-baserte alternativet til Next.js, og er svært godt likt av utviklere på grunn av sitt fokus på utvikleropplevelse og bruk av web-standarder. Vi ser også at meta-rammeverk som Blitz øker i popularitet. Slike rammeverk tilbyr ekstra funksjonalitet på toppen av eksisterende rammeverk som Next.js, med den hensikt å øke produktiviteten og redusere behovet for å starte fra bunnen når vi lager nye produkter.

Generelt ser vi at trenden er å flytte mer og mer av front-end-utviklingen tilbake til serveren, og minimere mengden JavaScript som sendes til nettleseren.

Fluttering WASMs

Om vi flytter fokuset vårt fra nettsteder / webapplikasjoner til mer reinspikka applikasjoner / kryssplattformapplikasjoner, møter vi på noen av de mest spennende trendene i disse dager: Webassembly (WASM) og Canvas rendering.

Det har i flere år vært en trend at utvikling av webapplikasjoner flytter seg fra JavaScript til TypeScript, og denne trenden tror vi vil fortsette. Nå har i tillegg WASM gjort sitt inntog for fullt. Det er blitt mulig å benytte andre språk enn JavaScript i nettleseren, og det har blitt mer stuerent å ta i bruk slike løsninger. Blant annet har vi både sett og erfart at .NET rammeverket Blazor begynner å modne og bli meget populært. Blazor lar deg skrive front-end applikasjonen din i C# og Razor, slik at du kan dele forretningslogikk, modellklasser og lignende mellom front- og backend.

Selv om du ikke bruker Blazor kan WASM være til hjelp, ved å la deg dele kode mellom front- og backend eller optimalisere ytelseskritiske moduler. Økosystemet rundt WASM blir større og større, og vi vil nok se enda flere systemer ta i bruk WASM i året som kommer.

Flutter er et annet alternativ til JavaScript-baserte rammeverk som er blitt svært populært den siste tiden. Flutter er et rammeverk for utvikling av kryssplattformapplikasjoner i programmeringsspråket Dart. En av de mest spennende aspektene med Flutter for webutvikling er bruken av CanvasKit som standard rendering-motor. CanvasKit er en WASM-basert versjon av et grafikkbibliotek brukt i Chrome og på Android, kalt Skia. Dette biblioteket tegner alle visuelle elementer i et canvas-element istedenfor i HTML. Dette gir høyere ytelse og piksel-perfekt kontroll over innholdet i applikasjonen. Den negative siden er større bundler, og dårligere søkemotoroptimalisering (SEO).

Google Docs har allerede benyttet canvas-rendering i noen år, for å øke ytelse og kontroll over visuelt innhold. Med fordelene canvas-rendering kan tilby avanserte applikasjoner, inntoget av WASM, for ikke å snakke om det evige ønske om "write once, run everywhere", vil vi nok se flere applikasjoner bli utviklet med Flutter fremover.

Verktøy for en ny tid

Rammeverk er ikke det eneste som er verdt å snakke om i 2023. Blant annet har Vite, som baserer seg på ESBuild og Rollup, tatt utviklere med storm det siste året. Dette vil nok fortsette i år, ettersom det er minutter å spare, sammenlignet med Webpack og co., hver eneste gang du bygger en kodebase. I høst annonserte Vercel også Turbopack, som skal være en direkte arvtager til Webpack og er skrevet i Rust for mye høyere ytelse. Turbopack er fremdeles i alfa-versjon, men vil nok etterhvert som den stabiliseres oppnå høy bruk. Det er også en hel del andre verktøy som blir laget fremover, da det er en trend at verktøy som kjører i JavaScript nå blir skrevet om til Rust eller andre native-språk.

Det blir et spennende år for JavaScript-kjøretidsmiljø, spesielt knyttet til opprettelsen av Web-interoperable Runtimes Community Group, som skal arbeide med interoperabilitet for JavaScript kjøretidsmiljø. Deno, Vercel og Cloudfare er blant medlemmene, og dette initiativet gir økt kredibilitet til Node.js-alternativer som Deno og Bun i tiden som kommer. Deno blir per i dag hovedsakelig brukt til edge-computing, da ytelse og ikke minst oppstartstid er en god del bedre enn Node.js. Blant annet valgte Netlify Deno som kjøretidsmiljø for sine “edge functions” på grunn av dette. På slutten av 2022 fikk Deno endelig kompatibilitet med NPM, en mye etterspurt funksjonalitet, som nok vil lede til økt bruk i år. Bun søker å ta opp kampen med Node.js og Deno. Ytelsen ser ut til å være enda bedre, og Bun skal fungere som en “drop-in” erstatning til Node.js, noe som gjør den enkel å ta i bruk.

Webstandarder

Et nytt år betyr også en ny versjon av JavaScript. ES2023 ligger an til å inkludere mye spennende, men fremst av alt etter vår mening er Temporal API. Denne standarden vil endelig gi oss skikkelig tidssonehåndtering i JavaScript, hvor vi kan overstyre tidssone på et dato-objekt. Mange har ventet på at JavaScript skal få skikkelig støtte for tidssoner, så dette vil uten tvil redusere både utviklingstid og frustrasjon blant landets front-end utviklere.

Det er alltid en tålmodighetsprøve å vente på at alle nettleserene støtter ny funksjonalitet i CSS, men kanskje 2023 blir året vi kan ta i bruk:

• Container queries. Dette er det samme som media-queries, men gjelder for et bestemt element. Altså kan vi endelig ha ekte responsive komponenter, som endrer layout basert på sin egen størrelse.

• CSS Subgrid. I dag kan du nøste flere CSS Grid sammen, men det er ikke mulig å justere barn av det nøstede gridet sammen med spor i foreldre-gridet. Subgrid gjør det mulig å få til dette, slik at for eksempel kort som stilles ved siden av hverandre kan få lik størrelse på alle sine barne-elementer.

• Parent (:has) selector. Et ønske omtrent fra dag en med CSS har vært å kunne tilpasse elementer basert på hva de inneholder. Dette er endelig mulig, og begynner å få en del støtte i nettleserne.

Konklusjon

Denne artikkelen har gått igjennom noen av de spennende trendene vi ser for front-end-utvikling det kommende året. Det er såklart mye vi ikke har dekket i denne artikkelen, men som vi gjerne skulle fått plass til. Om vi løfter blikket fra front-end et øyeblikk, ser vi blant annet at AI har inntatt fagfeltet vårt for fullt. ChatGPT, Copilot og Dall-E gir oss muligheter vi aldri har sett før, og det kommende året vil etter alt å dømme bli enda mer preget av slik teknologi. Vi forventer å se mer sofistikerte verktøy for ulike domener basert på disse og andre AI-teknologier. Teknologien har sine utfordringer, slik vi blant annet har sett med søksmål mot Copilot for lisensbrudd, og kritikk mot Dall-E for å ikke ta hensyn til kunstnernes ønsker. Av denne grunn er det en forståelig skepsis til å ta i bruk slike verktøy blant utviklere. Uavhengig av resultater av søksmål og kritikk, er AI-verktøy kommet for å bli, og begynner allerede å etablere seg. Trenden med at «alt er bedre med AI» vil nok bare akselerere, så vi bør allerede nå identifisere muligheter med teknologien, og lære oss å bruke den effektivt i arbeidshverdagen vår.

No-Code / Low-Code er et annet område som stadig flere tar i bruk. Spesielt med tanke på inflasjonen og de økte prisene vi nå opplever, vil løsninger som gjør at man trenger mindre spesialistbistand bygget på no- og low-code bli populære i tiden som kommer. I Kraftlauget ser vi at løsninger som blant annet Squarespace for nettsider og AppFarm for applikasjoner lar oss levere gode løsninger med færre ressurser og lavere kostnad.

Det er ingen tvil om at 2023 blir et spennende år for front-end utvikling, og vi gleder oss til å ta fatt på årets prosjekter. Kanskje vi får jobbe med noen av de spennende teknologiene vi har diskutert i denne artikkelen sammen med deg?