Vad är skillnaden mellan frontend och backend?

01En liknelse med en restaurang

Tänk dig en restaurang. Borden, menyn, servitörens välkomnande och hur tallriken serveras är det gästen ser, och det är frontend. Köket, skafferiet, recepten och notan i kassan är den del som inte syns men gör allt möjligt, och det är backend.

Servitören är den som bär beställningen mellan salen och köket. I mjukvara tar API:et den rollen: gränssnittet skickar en förfrågan, servern behandlar den och skickar tillbaka svaret. De två sidorna behöver inte känna till varandras inre funktion. Det räcker att de är överens om ett gemensamt språk.

Liknelsen förklarar också varför de två områdena kräver olika expertis. En skicklig person i serveringen är inte alltid en bra kock, men utan att de två arbetar i samklang blir det ingen bra matupplevelse.

02Vad är frontend?

Frontend är allt som användaren interagerar med direkt: menyer, knappar, formulär, animationer och sidlayout. Frontend-utvecklarens mål är att få designen att fungera rätt, snabbt och tillgängligt på alla skärmstorlekar.

Den grundläggande trion är densamma: HTML definierar strukturen, CSS utseendet och JavaScript beteendet. För stora gränssnitt används bibliotek som React, Vue eller Svelte, och det vanligaste av dem har vi gått igenom i inlägget vad är React.

• Gränssnittskomponenter: meny, kort, formulär, modalfönster.
• Mobilanpassning: layout efter olika skärmbredder.
• Prestanda: sidan ska öppnas snabbt och köra smidigt.
• Tillgänglighet: navigering med tangentbord, stöd för skärmläsare, tillräcklig färgkontrast (minst 4,5:1 enligt WCAG).
• Formulärvalidering: omedelbar återkoppling till användaren.

03Vad är backend?

Backend är serversidan som användaren inte ser men som står bakom varje åtgärd. Den verifierar vem den inloggade användaren är, räknar ut beställningens belopp, drar av från lagret, skriver till databasen och skickar vid behov ett e-postmeddelande.

Språken som används för backend-utveckling är många: PHP, Python, JavaScript med Node.js, Java, C#, Go och andra. Valet görs utifrån teamets erfarenhet, projektets behov och befintlig infrastruktur.

I hjärtat av backend finns oftast en databas. Relationsdatabaser står sig starkt för data där konsistens är avgörande, som beställningar och fakturor, medan strukturer med flexibelt schema kan väljas för innehåll som ändras snabbt. Skillnaden mellan de två angreppssätten har vi jämfört i inlägget skillnaden mellan SQL och NoSQL.

• Affärsregler: logik för pris, rabatt, lager och godkännande.
• Databas: konsekvent och säker lagring av data.
• Autentisering och behörighet: vem får se vad och ändra vad?
• Integrationer: koppling till betalning, frakt, bokföring och andra system.
• Säkerhet: kontroll av indata, skydd mot attacker, loggning.

04Frontend och backend jämfört

Även om uppdelningen i tabellen ser tydlig ut är gränserna i praktiken flytande. Ramverk som genererar HTML på servern eller datalager som körs i webbläsaren för de två sidorna närmare varandra. Ändå gör det lättare att hitta fel och dela upp arbetet i teamet om man tänker på ansvaren var för sig, eftersom det är klart vem som ansvarar för vad.

05Hur kopplas de två sidorna samman?

När en användare lägger en produkt i varukorgen sker en kort konversation i bakgrunden. Frontend skickar en förfrågan till servern: ”lägg den här produkten i det här antalet i varukorgen”. Backend kontrollerar lagret, uppdaterar varukorgen och svarar med den nya totalsumman. Frontend uppdaterar sedan skärmen utifrån svaret.

Den här konversationen sker oftast via HTTP, i JSON-format. Nedan ser du ett enkelt exempel.

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
}

06Vem är en full stack-utvecklare?

En full stack-utvecklare är någon som kan arbeta både med gränssnittet och med serversidan. I små team och vid snabba prototyper är det mycket värdefullt, eftersom hen kan driva en funktion från början till slut på egen hand.

Det betyder inte att man är expert på samma djup inom båda områdena. De flesta full stack-utvecklare har ett ”huvudområde” som de står närmare. I stora projekt arbetar specialiserade frontend- och backend-team tillsammans.

Att JavaScript kan köras både i webbläsaren och på servern (med Node.js) är en av faktorerna som gör vägen till full stack lättare. Språkets grunder hittar du i vårt inlägg vad är JavaScript.

07Var ska man börja?

Om du tycker om att se visuella resultat och är intresserad av design och användarbeteende kan frontend kännas närmare. Om du gillar att bygga logik, arbeta med data och undrar hur system skalar kan backend vara något för dig.

I båda fallen är en bra väg för en stabil start att först lära sig HTML, CSS och grundläggande JavaScript och sedan bygga en liten applikation från ände till ände. Då ser du på nära håll hur de två sidorna pratar med varandra och upptäcker genom att pröva vilket område du trivs bäst med.

1. Lär dig den grundläggande webbtrion: HTML, CSS, JavaScript.
2. Vänj dig vid versionshantering: hantera varje projekt med Git.
3. Välj ett gränssnittsbibliotek: till exempel React.
4. Skriv ett enkelt API: med Node.js, PHP eller Python.
5. Koppla till databasen: lägg till, lista, uppdatera, radera poster.
6. Publicera: kör projektet på en riktig server.

08Varför är det viktigt för företag?

För ett företag som låter bygga en webbplats eller programvara gör kunskap om den här uppdelningen att man ställer rätt frågor. En långsam webbplats kan bero på frontend, medan felaktigt sparade beställningar är ett backend-problem. Att rikta problemet till rätt ställe påskyndar lösningen.

Ett bra projekt behandlar båda sidorna med samma omsorg. Ett vackert gränssnitt utan ett konsekvent system bakom sig förlorar förtroende, och ett starkt system kan inte visa sitt värde med ett obrukbart gränssnitt. Hos Aurora Yazılım samlar arbetet med UI/UX-design och hastighet och prestanda frontend-sidan, och e-handelsplattformen och branschspecifika programvarulösningar backend-sidan i samma projekt.

Även på en enkel företagswebbplats är uppdelningen viktig. Att kontaktformuläret skyddas mot skräppost, att sidorna levereras som korrekt HTML för sökmotorerna och att bilderna laddas snabbt beror på att båda sidorna sätts upp rätt tillsammans. En professionell webbdesign-process handlar därför inte bara om utseendet utan också om strukturen bakom sidan. Webbplatsens tillväxtplan bör också diskuteras från början: en webbplats som i dag bara presenterar kan i morgon behöva växa på backend-sidan med bokning, offertformulär eller onlineförsäljning. Om den flexibiliteten finns med från början behövs ingen ombyggnad senare.

Webbupplevelser som fungerar som appar kräver bästa möjliga samspel mellan de två sidorna. Det ämnet tar vi upp separat i inlägget vad är PWA.