Hva er forskjellen på frontend og backend?

01En restaurantlignelse

Tenk deg en restaurant. Bordene, menyen, servitøren som tar imot deg og hvordan retten serveres, er det kunden ser, og det er frontend. Kjøkkenet, spiskammeret, oppskriftene og regningen i kassen er den usynlige siden som gjør alt mulig, og det er backend.

Servitøren er den som bærer bestillingen mellom salen og kjøkkenet. I programvare tar API-et denne rollen: grensesnittet sender en forespørsel, serveren behandler den og sender svaret tilbake. De to sidene trenger ikke kjenne hverandres indre virkemåte, det holder at de er enige om et felles språk.

Lignelsen forklarer også hvorfor de to feltene krever ulik kompetanse. En dyktig anretter er ikke alltid en god kokk, men uten at de to jobber i takt blir det ingen god matopplevelse.

02Hva er frontend?

Frontend er alt brukeren er i direkte kontakt med: menyer, knapper, skjemaer, animasjoner og sideoppsett. Frontend-utviklerens mål er å få designet til å fungere riktig, raskt og tilgjengelig på alle skjermstørrelser.

Den grunnleggende trioen er uforanderlig: HTML definerer strukturen, CSS utseendet og JavaScript oppførselen. I store grensesnitt brukes biblioteker som React, Vue eller Svelte, og det mest utbredte av dem har vi forklart i artikkelen hva er React.

• Grensesnittkomponenter: meny, kort, skjema, modalvindu.
• Mobiltilpasning: oppsett som følger ulike skjermbredder.
• Ytelse: siden åpnes raskt og fungerer smidig.
• Tilgjengelighet: navigering med tastatur, støtte for skjermlesere, tilstrekkelig fargekontrast (minst 4,5:1 for WCAG).
• Skjemavalidering: umiddelbar tilbakemelding til brukeren.

03Hva er backend?

Backend er serversiden som brukeren ikke ser, men som ligger bak hver handling. Den verifiserer hvem som logger inn, beregner bestillingsbeløpet, trekker fra lageret, skriver til databasen og sender om nødvendig en e-post.

Språkene som brukes i backend-utvikling er mange: PHP, Python, JavaScript med Node.js, Java, C#, Go og flere. Valget avhenger av teamets erfaring, prosjektets behov og eksisterende infrastruktur.

I hjertet av backend finnes det som oftest en database. Relasjonsdatabaser utmerker seg for data der konsistens er kritisk, som bestillinger og fakturaer, mens strukturer med fleksibelt skjema kan foretrekkes for innhold som endrer seg raskt. Forskjellen på de to tilnærmingene har vi sammenlignet i artikkelen forskjellen på SQL og NoSQL.

• Forretningsregler: logikk for pris, rabatt, lager og godkjenning.
• Database: lagring av data på en konsistent og sikker måte.
• Autentisering og rettigheter: hvem kan se hva, og hvem kan endre hva?
• Integrasjoner: tilkobling til betaling, frakt, regnskap og andre systemer.
• Sikkerhet: kontroll av inndata, beskyttelse mot angrep, logging.

04Frontend og backend sammenlignet

Selv om skillet i tabellen virker tydelig, er grensene i praksis flytende. Rammeverk som genererer HTML på serveren eller datalag som kjører i nettleseren fører de to sidene nærmere hverandre. Likevel gjør det lettere å finne feil og fordele arbeid i teamet å tenke på ansvarsområdene hver for seg, for da er det klart hvem som har ansvar for hva.

05Hvordan henger de to sidene sammen?

Når brukeren legger et produkt i handlekurven, skjer det en kort samtale i bakgrunnen. Frontend sender serveren en forespørsel: “legg dette produktet i dette antallet i handlekurven”. Backend sjekker lageret, oppdaterer handlekurven og svarer med den nye summen. Frontend oppdaterer så skjermen etter svaret.

Denne samtalen skjer vanligvis over HTTP, i JSON-format. Under ser du et enkelt eksempel.

const yanit = await fetch('/api/sepet', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ urunId: 42, adet: 1 })
});
const sepet = await yanit.json();
console.log(sepet.toplam);

{
  "urunSayisi": 3,
  "toplam": 1250.00,
  "stokUyarisi": false
}

06Hvem er en full stack-utvikler?

En full stack-utvikler er en som kan jobbe med både grensesnittet og serversiden. Det er svært verdifullt i små team og ved raske prototyper, fordi vedkommende kan føre en funksjon fra start til slutt alene.

Det betyr ikke at man er ekspert i begge feltene på samme dybde. De fleste full stack-utviklere har et “hovedfelt” som ligger nærmere den ene siden. I store prosjekter jobber spesialiserte frontend- og backend-team sammen.

At JavaScript kan kjøre både i nettleseren og på serveren (med Node.js), er en av faktorene som gjør veien til full stack enklere. Grunnleggende om språket finner du i artikkelen hva er JavaScript.

07Hvilken vei bør du starte på?

Hvis du liker å se visuelle resultater og er opptatt av design og brukeratferd, kan frontend ligge nærmere deg. Hvis du liker å bygge logikk, jobbe med data og lure på hvordan systemer skalerer, kan backend være mer interessant.

I begge tilfeller er det en god vei til et solid utgangspunkt å lære HTML, CSS og grunnleggende JavaScript først, og deretter bygge en liten applikasjon fra ende til annen. Da ser du på nært hold hvordan de to sidene snakker sammen, og oppdager gjennom å prøve hvilket felt du trives best i.

1. Lær den grunnleggende nettrioen: HTML, CSS, JavaScript.
2. Bli vant til versjonskontroll: styr hvert prosjekt med Git.
3. Velg et grensesnittbibliotek: for eksempel React.
4. Skriv et enkelt API: med Node.js, PHP eller Python.
5. Koble det til en database: legg til, list opp, oppdater og slett poster.
6. Publiser: kjør prosjektet på en ekte server.

08Hvorfor er det viktig for bedrifter?

For en bedrift som får laget et nettsted eller programvare, gjør det å kjenne dette skillet at du stiller de riktige spørsmålene. At nettstedet er tregt, kan skyldes frontend, mens feil registrering av bestillinger er et backend-problem. Å sende problemet til riktig sted gjør løsningen raskere.

Et godt prosjekt tar begge sidene med samme omhu. Et pent grensesnitt mister tillit hvis det ikke finnes et konsistent system bak, og et sterkt system får ikke vist sin verdi med et uhåndterlig grensesnitt. Hos Aurora Yazılım bringer UI/UX-design og hastighet og ytelse frontend-siden, og nettbutikkplattformen og bransjespesifikke programvareløsninger backend-siden, sammen i samme prosjekt.

Selv for et bedriftsnettsted er dette skillet viktig. At kontaktskjemaet er beskyttet mot spam, at sidene leveres som riktig HTML til søkemotorene og at bildene lastes raskt, avhenger av at begge sider er satt opp riktig sammen. En profesjonell webdesign-prosess handler derfor ikke bare om utseendet, men også om strukturen bak siden. Planen for nettstedets vekst bør også diskuteres fra begynnelsen: et nettsted som bare presenterer i dag, kan i morgen trenge å utvide backend-siden med timebestilling, tilbudsskjema eller salg på nett. Når du har tenkt på denne fleksibiliteten fra starten, slipper du å bygge om senere.

Nettopplevelser som fungerer som apper krever at de to sidene fungerer best mulig sammen. Vi har tatt opp temaet separat i artikkelen hva er PWA.