Innenfor moderne frontendutvikling snakkes det ofte om progressive enhancement. Altså at man skal lage nettsider og apper som fungerer for alle – men som kanskje ser bedre ut hvis man har en nettleser som støtter den nyeste teknologien.
– Tanken er å gi alle det viktigste, men at de som kan får en bedre opplevelse.
Det sier Jacob Berglund, utvikler i Variant.
Vi ba Berglund om å gå litt i dybden på hva som ligger i det mystiske begrepet "progressive enhancement". Og forklare hvordan du kommer igang selv og unngår eventuelle feller.
– Jacob, hva er progressive enhancement og hvordan fungerer det?
– Det er et prinsipp og/eller en filosofi for å bygge ting som fungerer for så mange som mulig og basert på hva nettleseren kan eller brukeren vil, og så legger man til funksjonalitet.
Berglund mener det bør fungere slik:
- Grunnleggende innhold og funksjonalitet skal være tilgjengelig for alle nettlesere
- Sparsommelig semantisk markup som inneholder alt innhold – litt som universell utforming (UU)
- Forbedringer av visuell layout skjer med frittstående CSS
- Forbedret funksjonalitet tilbys gjennom eksternt lenket JavaScript
– Så hva mener jeg med grunnleggende innhold og funksjonalitet? Jo i 2023 er det fullt mulig å lage en fungerende app med kun HTML – og det kunne man også for 20 år siden med nøyaktig samme teknologi.
«JavaScript skal helst ikke være det som gjør opplevelsen mulig, men forbedre den.»
– Det er selvfølgelig ekstremt å bare skulle bruke HTML, men til daglig så befinner vi jo oss på den andre siden av det ekstreme: Alt av innhold, funksjonalitet og layout blir tilgjengelig først når nettleseren har hentet og kjørt JavaScript.
– JavaScript skal helst ikke være det som gjør opplevelsen mulig, men forbedre den. Men la oss ikke havne i diskusjoner som "fungerer siden uten JavaScript" eller "kan man lese siden uten CSS"?
– Det er i seg selv ikke målet, men: Progressive enhancement skjer når du slutter å stille krav til brukerens nettleser og i stedet forbedrer opplevelsen avhengig av hva den er i stand til.
– Hva er ulempene med å lage nettsider uten progressive enhancement?
– Poenget med å spesifisere grunnleggende innhold samt eksternt lenket CSS og JavaScript i listen overfor, er for å unngå et fossefalls-scenario der en bruker ikke kan se eller gjøre noe før JavaScript er lastet ned og begynner å produsere HTML.
– Hva om det ikke gikk å hente? Det er jo en dårlig strategi å anta og håpe at det alltid går bra. Vi som utviklere er jo ellers ganske bra på å håndtere unntak.
– Er det ikke mye mer jobb å få til dette?
– Det kommer jo an på hvilket utgangspunkt man har og hvilket nivå man velger å legge seg på.
– I perioden med SPAs (Single Page Applications) har vi jo nesten gått imot "standardmåten" å gjøre ting på. Løsningen på mange problemer ble mer kode. At rammeverkene abstraherer bort nettleser-API-er gjør det heller ikke så enkelt å lære seg mer om dem.
– Så for mange blir det kanskje en ny måte å tenke og utvikle på. Det kreves en annen kunnskap – mer om hvordan nettlesere fungerer og hva de er kapable til enn hvordan man gjør ting i ett bestemt rammeverk.
– Hvordan kan jeg som utvikler komme igang?
– Her er noen konkrete eksempler:
- Om du ikke bruker event.preventDefault() for knapper og skjemaer, hva skjer da? Går det å løse det først uten?
- URL-er er bra til å håndtere tilstand. Om mulig, bruk heller det enn global applikasjons-tilstand.
- <a href="/about"> er ti ganger bedre enn <button onClick={() => window.location.pathname = 'about'}>. Begge gjør det samme, men med en lenke i stedet for en knapp slik at man for eksempel kan bruke "Åpne i ny fane" eller "Kopier lenke".
- Man får mye gratis med forms: Enkel validering, fokus til "invalid" ved submit, og ikke minst FormData() ved submit.
- ... og kombinerer du det med litt moderne CSS så har du kommet veldig langt uten tilstand eller onChange i JS.
– Om mulig, ikke re-implementer funksjonalitet som allerede finnes i nettleseren.
– Gir rammeverk som Next.js eller SvelteKit deg automatisk progressive enhancement?
– Dette er egentlig spørsmålet som setter progressive enhancement tilbake på dagsordenen i 2023.
– Om man bygger med rammeverk som resulterer i en SPA er det nesten umulig. Men nå, med mer moderne rammeverk så kan du ha begge deler. Det er med andre ord et godt tidspunkt for å sette seg inn i progressive enhancement!
– Uansett hvilket av de mer moderne rammeverkene du velger, så tar server-side-rendering (SSR) oss en god bit på veien. I SvelteKit er det for eksempel lagt opp til at en side skal ta imot FormData() fra en form submit. Vil man ikke ha en refresh av siden, så er det opt-in å progressivt forbedre alt sammen på klientsiden, men det fungerer altså by-default uten JS. Det er fett!
– Det er også verdt å nevne Remix, Qwik og Astro som rammeverk som ligger langt fremme når det gjelder progressive enhancement.
Dag Erik mener alle bør lære seg Svelte: – Det er gøy å skrive!
– Hva med CSS og for eksempel biblioteker som Tailwind?
– Når det gjelder CSS, ikke bare Tailwind, så er jo det det mest progressive verktøyet vi har.
– En nettleser ignorerer jo alt av regler den ikke kjenner igjen, så du kan bruke det aller nyeste idag: container-queries, view-transition, subgrid eller hvorfor ikke trigonometry functions om du er riktig vågal?
– Men husk å først sørge for at det fungerer uten, deretter bruker du @supports til å forbedre. For en tid vi lever i!
– Er det noen fordeler med tanke på SEO og tilgjengelighet?
– Det viktigste er alltid relevant innhold, men semantisk HTML hjelper jo både for SEO og universell utforming.
– Google har de siste årene hatt fokus på at bra ytelse skal gi høyere ranking. En SPA kommer – som regel – ikke så veldig godt ut på for eksempel First Contentful Paint eller Time to Interactive.
– Bør nettsider fungere selv om noen skrur av JS?
– JavaScript av eller på er ikke målet i seg selv, men en indikator på robusthet.
– Det handler ikke om å støtte de nyeste eller ikke, men om å gi en bruker det viktigste uavhengig av forutsetning.
– Vi har jo alle opplevd dårlig nett, ikke sant? Det er frustrerende å se på en hvit skjerm for at man må vente på JavaScript. Så om man har slått av eller om det tar lang tid å laste, så er jo strategien for å løse det i samme gate.
– Jeg har hørt om noe som kalles "graceful degradation". Er det det samme?
– Nesten. Forskjellen er at graceful degradation tar bort, mens progressive enhancement legger til.
– Personlig synes jeg graceful degradation døde med Internet Explorer. Man utviklet for moderne nettlesere, men ga en brukbar opplevelse for eldre nettlesere ved å inkludere polyfills, eller vise en... mindre fin side.
– I dag er de fleste nettlesere på lik linje, så problemet er derfor ikke like ille. I stedet for å patche gamle nettlesere så kan vi i stedet se fremover og ta i bruk ting som ikke har landet hos alle leverandørene ennå.
– Noen råd til leserne våre til slutt?
– Progressive enhancement handler like mye om at du kan bruke det nyeste – du må bare ha fått det til å fungere uten først.
– Den gode nyheten er at det aldri har vært enklere å få til enn med de verktøyene vi har fått de siste årene.
