– Vårt gamle nettsted var ferdig for rundt ett og et halvt år siden, og det var litt tidlig å begynne å skrive det om, fortalte Tomas Jansson, Principal Software Engineer i Elkjøp Nordic, under en presentasjon på NDC Oslo 2024 i Oslo Spektrum.
Likevel var det nettopp det Elkjøp måtte gjøre. Nettsidene de for ikke lenge siden hadde bygget med Angular, var så trege og dårlige, at frustrasjonen var stor ikke bare hos kunder som besøkte elkjop.no – men også internt i Elkjøp.
Jansson og hans utviklerteam ønsket derfor å skrive om nettsidene i React og Next.js 14. Men før de kunne gjøre det, måtte de overbevise ledelsen om at det var lurt å bruke tid og penger på å bygge om de nesten nye nettsidene nok en gang.
– Du må ha en ganske god salgspitch, sa Jansson.
Snakk samme språk som ledelsen
Utviklere har ofte vanskelig for å bli hørt, fordi de ikke sier de rette tingene, sa Jansson. Veldig ofte er utviklere opptatt av teknologi, men for å nå frem til ledelsen må utviklerne snakke samme språket som ledelsen, sa Jansson.
– Ikke selg teknologien, selg problemet. Det holder ikke å si at vi har et nytt JavaScript-bibliotek som skal løse alt, du må ha en idé om problemet vi vil løse.
Ledelsen er opptatt av økonomi og kostnader. Derfor er det en større sjanse for å få ja til å bygge noe nytt hvis du klarer å estimere hvor mye ting koster, hvor mye tid utviklerne bruker på bugfiksing, og så videre – og tallfeste hvor mye kostnadene kan reduseres med.
I Elkjøps tilfelle var det ganske klart at det ville være lønnsomt å bygge om en nettbutikk som hadde misfornøyde brukere, og Jansson og teamet fikk klarsignal til å gå igang.
«Min mening er at Angular er best egnet for mer dynamiske nettsider.»
– Måtte slåss med rammeverket
Jansson antydet at de kanskje hadde valgt feil da de i sin tid gikk for Angular. Han sammenlignet de ulike rammeverkene og verktøyene med et spekter. I den ene enden av spekteret har du helt statiske applikasjoner, i den andre dynamiske applikasjoner.
En nettbutikk som elkjop.no har ifølge Jansson mer til felles med en statisk blogg enn en veldig dynamisk side som for eksempel en side for aksjehandel eller lignende.
– Vår forrige side ble laget i Angular. Min mening er at Angular er best egnet for mer dynamiske nettsider.
– Vi endte opp med å måtte slåss med rammeverket!
Den nye app-ruteren i Next.js 14, med React Server Components og rendring av mest mulig på serveren, er perfekt for en nettbutikk som elkjop.no, mener han.
Et solid stykke teknologi
Jansson fortalte at Elkjøp selvfølgelig kunne valgt noe mer spennende eller banebrytende teknologi enn Next.js. Men Next.js er en såpass solid og moden teknologi, at det fremsto som det tryggeste og beste valget for dem.
– Du må også vurdere hvilken "pool" av web-utviklere du har. Nesten alle web-utviklere kan React nå, og Next er bare en måte å skrive React-applikasjoner på.
– Velg kjedelig teknologi!
Ifølge Jansson gjør Next-valget at de slipper å måtte finne opp ting på nytt, men i stedet kan fokusere på problemene som skal løses.
– Next.js er et solid stykke teknologi å velge.
Ved å også hoste Next-applikasjonen hos Vercel, har det blitt mulig for Elkjøp å rulle ut ny kode raskere.
– Vercel har definitivt en av de beste, kanskje den beste, utvikleropplevelsen jeg har opplevd når jeg har jobbet med skyplattformer, sa Jansson.
Han nevner blant annet muligheten til å raskt kunne rulle tilbake til tidligere "deploys", samt at du har nyttige analyseverktøy tilgjengelig. Man slipper også å bygge pipelines, knote med webpack-konfigurasjoner eller andre ting – men kan fokusere på å bygge applikasjonen.
– De minimerer behovet for å jobbe med infrastruktur. Og siden det kjører på en serverless-infrastruktur, så skalerer det ut av boksen.
Mye nytt i Next.js 14
– Hva var de største utfordringene dere støtte på underveis?
– Det var mye som var nytt. Som for eksempel ruting, server side/client side, streaming, "parallel routes", edge- eller node-runtime, caching. Alt det var litt nytt, så var mye prøving og feiling, sier Jansson etter foredraget til kode24.
Han forteller at en del ting var en del "buggy" i starten, spesielt parallelle ruter. Dette er en måte å samtidig rendre mer enn én side innenfor samme layout på i Next.js 14.
En av de største nyhetene i React- og Next.js-verdenen er React Server Components (RSC), og Jansson brukte i sitt foredrag litt tid på å gå gjennom hva dette er for noe.
– Var det noe som ikke fungerte med serverkomponenter?
– Det er nok større muligheter for problemer om man oppdaterer en eksisterende løsning. Da vi lagde en helt ny så var det ikke noen eksisterende komponenter vi trengte å oppdatere. Den største tingen var at vi måtte gjøre en større forskjell mellom rene visuelle komponenter og det som kanskje hentet data, sier Jansson.
Jansson er svært fornøyd med de nye nettsidene – som nå er live i fire land –og med teknologivalgene teamet hans tok.
– Dette har vært det morsomste prosjektet jeg har jobbet med i min karriere, sa Jansson.
