Teknologi

Forskjellen på apper og nettsider? Forsvinnende lite.

Person ser med kikkert på kameraet. Foto.

Husker du hvordan det var å surfe på nettet i 2007? Det gikk ganske treigt.

Si du så etter en søt valp på Finn.no. For å rydde opp i resultatene bestemte du deg for å filtrere på "Golden Retriever" og "Akershus" (Jepp, det var den gangen fylker fantes).

Skjermbilder fra Finn.no i 2010. Designet har forandret seg mye siden den tid. Bilde.

Hver gang du trykket på et filter måtte du vente i 2 sekunder før resultatene dukket opp. Filtrere på "Golden Retriever", vente 2 sekunder... Filtrere på "Akershus", vente 3 sekunder... Gå til neste side av resultatene, vente 2 sekunder.

Derfor var apper helt genialt da de kom. Finn-appen gikk lynraskt sammenlignet med nettsiden deres. Istedenfor å måtte laste inn alt på nytt hver gang du trykket på noe, var det bare selve annonsene som forandret seg.

All av layout og kode ble allerede lastet ned den gangen appen ble installert, så det eneste du behøvde å vente på var å få innholdet til de siste annonsene.

Tre skjermbilder fra nettsiden til Finn.no. Viser at nettsiden har app-lignende elementer. Bilde.

Sammenlign Finn-appen og nettsiden i dag. Det er egentlig ikke så mye forskjell. Nettsiden omtrent like raskt som appen og den “føles” mer ut som en app.

Det er mer interaksjoner og layout som vi vanligvis forbinder med apper. For hvem sa at det bare var apper som kan ha slike design?

Farvel Word.

Animert skjermbilde av Google Docs som viser flere brukere som samarbeider på å skrive et dokument samtidig. GIF

Faktisk har mange nettsider blitt så raske at jeg sjelden bruker andre programmer enn Chrome og Safari. Før brukte jeg Sketch og Photoshop til å designe, nå bruker jobber jeg kun i nettleseren med Figma.

Word, Excel og Powerpoint er byttet ut Google Docs, Google Sheets og Google Slides. Det er ikke et kompromiss heller, det går langt raskere å åpne Google Docs enn et beist som Word på datamaskinen min.

Hvorfor har det blitt sånn?

Apper og nettsider blir likere

Tre krokodiller illustrerer hvordan HTML, CSS og Javascript fungerer. HTML: Krokodillen er tegnet med svart omriss. HTML + CSS: Krokodillen har fått farger og har blitt tegnet ferdig. HTML + CSS + JAVASCRIPT: Det er animert noen hjerter som beveger seg rundt hodet til krokodillen.

La oss gå litt i dybden her. Grovt sett kan vi si at nettsider er bygget med tre puslespillbrikker:

  • HTML beskriver innholdet og hva som skal være på nettsiden: "Her skal det være et bilde. Her skal det være en tittel. Under kommer det et sitat".
  • CSS beskriver hvordan det skal se ut: "Tittelen skal være rosa. Bildet skal ha avrundende kanter."
  • Javascript tar seg av de interaktive bitene av nettsiden: "Når man trykker på denne knappen blir bakgrunnen svart. "

Google setter Javascript i forsetet

Før ble Javascript brukt mer som krydder på toppen av ferdige nettsider. Det var et programmeringsspråk som aldri var ment for å gjøre mer kompliserte ting enn å skape animasjoner, ta noen enkle regnestykker og skape interaktivitet på nettsider.

Tiden gikk fremover, utviklere ble mer ambisiøse og surferne mer kresne. Google drømte om å gjøre Gmail og Google Maps om til lynraske verktøy i nettleseren... Men var på den tiden var JavaScript en ganske veik hammer for de spikerne utviklerne fantaserte om.

For å gjøre det enklere å bygge interaktive webapper begynte en av de ansatte, Miško Hevery, å skru sammen det som skulle bli AngularJS. Et rammeverk for å gi Javascript superkrefter til å lage app-lignende nettsider.

Idéen tok raskt av og flere lignende Javascript-rammeverk dukket opp. Blant dem er Angular (2.0), Vue, Elm, ClojureScript, Ember og nykommeren Svelte – som for tiden er ganske trendy.

Facebook sin, kalt React, er den mest populære per dags dato (men det kan fort forandre seg, til mange utvikleres frustrasjon).

Man looks proud. Step 1. Start a new project. Step 2. Use a shiny new javascript framework. Step 3. 6 months later, and the framework is outdated. Man looks shocked and worried. Meme.

Felles for dem alle er at JavaScript gjør mesteparten av jobben med å bygge nettsiden. Istedenfor at utviklere skriver HTML direkte, bruker man heller JavaScript til å generere HTML-en man vil ha.

Fordi man “allerede” bruker JavaScript til å bygge nettsiden er terskelen blitt veldig lav for å bruke det JavaScript er best på: Nemlig interaktivitet, animasjoner og dynamisk innhold som forandres på et blunk.



SPA: Lengre lastetid i begynnelsen, ingenting etterpå

Angular, React og Vue gjorde det alle enkelt å bygge “Single Page Applications”, forkortet SPA.

Konseptet er ganske enkelt: Appen bruker noen sekunder på å laste inn 90% i starten, men til gjengjeld er lastetiden omtrent ikke-eksisterende etterpå.

Er det snakk om enkle applikasjoner spiller det ingen rolle, bare sjekk ut denne kalkulatoren bygget med React her.

Skjermbilde av nettside for en Hulu-kampanje, viser et 3D landskap og 3D-blomst med teksten "Pick a flower to share".

Litt mer merkbart blir det selvsagt om man utnytter React for alt det er verdt og lager nettsider som dette:

Tradisjonelle nettsider blir apper... Til manges fortvilelse

For å lage webapper som Google Docs og Twitter er slike JavaScript-rammeverk helt overlegne. Google Docs har jo i bunn og grunn bare to “views” eller layouter du må laste inn: En side som gir deg oversikt over alle dokumentene dine og selve editoren der man redigerer.

Men engasjerte utviklere stoppet ikke der. Det ble vanligere å se helt vanlige nettsider og nettbutikker bli bygget på denne måten, til irritasjon for mange.

Bare fordi det har blitt enklere å lage fancy nettsider, betyr det ikke at man burde gjøre det. Nettsider kan fort kreve langt mer av datamaskinen din og kan gi kjipe opplevelser for de med dårlig nett eller gamle PC-er. Eremittene som fortsatt bruker Internet Explorer har ikke nubbsjans.

Kompromiss mellom gamle og nye dager

Ny teknologi er innmari gøy for utviklere, men til slutt må man innrømme at ikke alle nettsider trenger å fungere som apper.

Det blir gjerne overkill når bloggen din er bygget på samme teknologi som Facebook. Gode gamle HTML er tross alt helt rå på å gjøre jobben sin.

Men, de fleste ser seg ikke tilbake når man først har begynt å bygge nettsider på denne måten. Det tok ikke lang tid før verktøy som Gatsby, NextJS (React), NuxtJS (Vue) og Svelte presenterte et godt kompromiss mellom tradisjonelle nettsider og JavaScript.

Nå er det relativt enkelt å bygge nettsider på gamlemåten, samtidig som man får alle fordelene ved å bruke React, Angular eller Vue.

I tillegg lar mange løsninger deg kombinere ulike typer løsninger. For eksempel kan en del av løsningen være prikk lik en mobilapp, mens bloggen blir servert “som før”.

Designspråket forandrer seg

Det er selvfølgelig ikke bare koden som gjør at nettsider virker mer app-aktige, det er jo designet vi ser. Men teknologien bak har gjort det enklere å enklere å implementere mer interaktive design, som som vi vanligvis forbinder med apper.

Det er nå vanligere å se å navigasjonsbarer i bunn, hyppig bruk av animasjon og innhold som kan sveipes. Det tar jo tid å skape brukervennlige design, så hvorfor ikke overføre kunnskapen og designer fra en plattform til enn annen?

Nettavisene eksperimenterer med visuell historiefortelling, enkelte nyhetssaker på NRK er nå helt like som stories på Instagram og Snapchart.


Har JavaScript-rammeverk kommet for å bli?

Mange ergrer seg over at webteknologien blir stadig mer komplisert og tidkrevende. Var det egentlig noe galt med det vi hadde fra før av?

Samtidig har vi mye å takke JavaScript for. Stort sett blir nettet raskere og mer behagelig å bruke, spesielt om man ser på den gjennomsnittlige webappen.

Å kunne slippe å laste ned tunge programmer er enormt deilig, det er faktisk ganske utrolig at det er nok å skrive inn en nettadresse for å åpne designprogrammet mitt.

Det er ikke usannsynlig at mobilappene går samme vei. Hvorfor laste ned en app om nettsiden er like bra?

Dessuten er det ikke slik at “alt var enkelt før” og at JavaScript bare kompliserer. I mange tilfeller erstatter JavaScript-rammeverk tungvint teknologi som er alt annet enn perfekt.

Dermed er det ikke så rart at React er det mest populære rammeverket for å bygge webapper og nettsider, i følge StackOverflows årlige undersøkelse.

Men det betyr absolutt ikke at den tradisjonelle måten å bygge nettsider på er utdatert, spesielt ikke om man skal ha en helt enkel informasjonsnettside.

Enkle nettsider som kun kan bygges ved hjelp av HTML, CSS og Javascript bør sannsynligvis fortsatt bygges med det.