6.1 Moderne webutvikling

Fra nettsider til apper

Webutvikling har endret seg enormt. Det som en gang var statiske HTML-sider med litt CSS og JavaScript, er nå komplekse applikasjoner som kan konkurrere med tradisjonelle desktop-programmer. For å forstå hvordan, må vi først dele verden i to.

Frontend er alt brukeren ser og samhandler med i nettleseren: HTML-strukturen, CSS-stylingen, JavaScript for interaktivitet, og alt av grafikk, animasjoner og skjemaer. Backend kjører på serveren og håndterer det usynlige: datalagring i databaser, forretningslogikk, autentisering og sikkerhet, samt API-ene som frontend kommuniserer med. En utvikler som behersker begge deler, kalles en fullstack-utvikler.

Et grunnleggende skille går mellom to måter å bygge webapplikasjoner på. I en tradisjonell webapplikasjon lastes hele siden på nytt hver gang brukeren klikker på en lenke eller sender et skjema – serveren genererer ny HTML for hver forespørsel. I en moderne webapplikasjon, en SPA (Single Page Application), lastes siden bare én gang. Deretter henter JavaScript data fra serveren, vanligvis som JSON, og oppdaterer bare deler av siden dynamisk. SPA-er gir en raskere, mer app-lignende opplevelse, men krever mer JavaScript-kunnskap, kan være vanskeligere å optimalisere for søkemotorer (SEO), og har en mer kompleks arkitektur.

Rammeverk for front og back

Man bygger sjelden alt fra bunnen i moderne webutvikling. I stedet bruker vi rammeverk og biblioteker som gir ferdige byggeklosser. På frontend er React, et bibliotek fra Meta, det mest populære – det er komponentbasert med et stort økosystem. Vue.js regnes som enklere å lære, med god dokumentasjon og fleksibilitet. Angular fra Google er et komplett rammeverk som brukes mye i store bedrifter, men har en bratt læringskurve.

På backend møter vi flere alternativer, gjerne knyttet til ulike språk. Flask (Python) er lettvekts og fint for læring og små prosjekter, mens Django (Python) er mer omfattende med innebygd admin-panel og ORM. Express (Node.js/JavaScript) er minimalistisk og fleksibelt, og Spring Boot (Java) er kraftig og en bedriftsstandard. Det fine er at frontend og backend kan velges uavhengig av hverandre – du kan kombinere React med Flask, eller Vue med Express.

Felles for moderne JavaScript-prosjekter er npm (Node Package Manager), verktøyet for å installere biblioteker. Du installerer en pakke med npm install react, og filen package.json holder oversikt over alle avhengighetene prosjektet trenger, sammen med nyttige skript. Kjører du npm install uten argumenter, installeres alle avhengighetene listet i package.json. Dette er helt essensielt, fordi et moderne prosjekt kan ha hundrevis av avhengigheter.

Hvordan et fullstack-prosjekt henger sammen

Når du setter sammen frontend og backend til et helt system, blir organiseringen viktig. Et typisk fullstack-prosjekt deles gjerne i tre hoveddeler. I en backend-mappe ligger serverkoden – for et Flask-prosjekt for eksempel app.py for selve applikasjonen, models.py for databasemodellene, routes.py for API-rutene, og requirements.txt for Python-avhengighetene. I en frontend-mappe ligger klientkoden, med en src-mappe som inneholder komponentene, App.js og index.js, samt package.json for npm-avhengighetene. Og en database-mappe kan inneholde et oppsettsskript som init.sql.

Denne tydelige separasjonen gir flere praktiske fordeler. Den lar utviklere jobbe parallelt på frontend og backend uten å trå på hverandre. Den lar deg deploye delene separat, slik at du kan oppdatere frontend uten å røre backend. Og den lar deg teste hver del isolert, noe som gjør feilsøking enklere. Skillet mellom de tre lagene – grensesnitt, logikk og data – er ikke bare ryddig, det er selve fundamentet for hvordan moderne webapplikasjoner bygges og vedlikeholdes av team.

Oppsummering

Weben har gått fra statiske sider til app-lignende systemer. Vi delte verden i frontend (det brukeren ser i nettleseren) og backend (logikk og data på serveren), med fullstack-utvikleren som behersker begge. Vi skilte tradisjonell web, der hele siden lastes på nytt, fra SPA-er, der siden lastes én gang og oppdateres dynamisk med JSON.

Moderne utvikling lener seg på rammeverk som React, Vue og Angular i front, og Flask, Django, Express og Spring Boot i back, med npm og package.json for å håndtere avhengigheter. Et fullstack-prosjekt deles ryddig i backend, frontend og database, noe som lar team jobbe parallelt, deploye separat og teste isolert. I neste kapittel dykker vi ned i JavaScript og hvordan vi manipulerer selve nettsiden.