Backend och frontend är de två halvorna av nästan varje webbapplikation. Frontend är det du ser och klickar på i webbläsaren, backend är motorn som lagrar data och utför logiken bakom kulisserna. Här förklarar vi hur de hänger ihop.

Frontend är den synliga delen av en webbapplikation som körs i din webbläsare, till exempel knappar, menyer och formulär. Backend är den osynliga delen som körs på en server och hanterar databaser, inloggning, beräkningar och affärslogik. Tillsammans utgör backend och frontend grunden för i princip allt du använder på webben, från nätbanken till din favoritbutik.

En bra liknelse är en restaurang. Matsalen med bord, meny och servitörer är frontend. Köket med kockar, recept och kylrum är backend. Du som gäst ser aldrig köket, men utan det blir det ingen mat. Och utan matsalen skulle ingen kunna beställa.

Hur fungerar frontend och backend tillsammans?

När du öppnar en webbplats eller en webbapplikation skickar din webbläsare en förfrågan till en server. Servern, alltså backend, hämtar rätt information, bearbetar den och skickar tillbaka ett svar. Frontend tar emot svaret och presenterar det på ett sätt som du förstår och kan agera på.

Tänk dig att du loggar in på en tidrapporteringsapp. Du skriver ditt användarnamn och lösenord i ett formulär (frontend). Uppgifterna skickas till servern, som kontrollerar dem mot en databas (backend). Om allt stämmer får du tillbaka dina tidrapporter, och frontend ritar upp dem som en snygg tabell på skärmen.

Så samarbetar frontend och backend

Användaren klickar i webbläsaren

Frontend skickar en förfrågan

Backend tar emot och bearbetar

Databasen levererar data

Backend skickar svar

Frontend visar resultatet

Vad ingår i frontend?

Frontend byggs oftast med tre grundteknologier som webbläsaren förstår direkt:

HTML bygger strukturen: rubriker, stycken, länkar och formulär.
CSS styr utseendet: färger, typsnitt, marginaler och hur sidan anpassar sig till mobilen.
JavaScript gör sidan levande: menyer som fälls ut, formulär som valideras och innehåll som uppdateras utan att sidan laddas om.

Många team använder dessutom ramverk som React, Vue eller Angular för att bygga större och mer interaktiva webbapplikationer på ett strukturerat sätt.

Vad ingår i backend?

Backend består av flera delar som tillsammans gör att applikationen fungerar på riktigt:

Server: datorn (ofta i molnet) som tar emot förfrågningar.
Applikationslogik: koden som bestämmer vad som ska hända, till exempel att räkna ut ett pris eller kontrollera behörigheter.
Databas: platsen där information lagras långsiktigt, som kunder, ordrar eller dokument.
API:er: gränssnitt som gör att frontend och andra system kan prata med backend på ett kontrollerat sätt.

Vanliga språk i backend är C#, Python, Java, Node.js och PHP. Valet beror mest på vad teamet kan och vilken miljö applikationen ska köras i.

Info: Ett API (Application Programming Interface) fungerar som en överenskommen beställningslista mellan frontend och backend. Frontend vet exakt vad den kan be om, och backend vet hur den ska svara.

Därför spelar uppdelningen roll

Att förstå uppdelningen är användbart även om du aldrig skriver en rad kod. Den påverkar hur projekt planeras, vilka kompetenser som behövs och hur snabbt ni kan leverera.

Användarupplevelsen avgörs i frontend. Om gränssnittet är rörigt, långsamt eller svårt att förstå på mobilen lämnar användarna, oavsett hur bra backend är. Det är i frontend som människor bestämmer sig för om de gillar en tjänst.

Tillförlitligheten avgörs i backend. Säkerhet, dataintegritet och prestanda hanteras bakom kulisserna. Ett snyggt gränssnitt räcker inte om data försvinner eller om obehöriga kommer åt känslig information.

Uppdelningen gör det enklare att utveckla och förändra. Eftersom backend och frontend är separata delar kan olika personer arbeta parallellt. Du kan byta ut hela utseendet på en webbapplikation utan att röra logiken, eller koppla en mobilapp till samma backend som webbplatsen.

Tips: När du beställer eller specificerar ett system, fråga tidigt hur backend och frontend är uppdelade. Det avgör hur lätt det blir att bygga ut med nya kanaler, till exempel en app, senare.

Skillnaderna i korthet

	Frontend	Backend
Var körs det?	I användarens webbläsare	På en server
Vad ser användaren?	Allt synligt	Ingenting direkt
Fokus	Utseende, interaktion, tillgänglighet	Data, logik, säkerhet, prestanda
Vanliga verktyg	HTML, CSS, JavaScript, React	C#, Python, Java, SQL, API:er
Exempel	Knapp, meny, formulär	Inloggning, betalning, databas

Exempel på backend och frontend i praktiken: e-handel, intranät och bokningssystem

Här är tre vardagliga exempel som visar hur frontend och backend samspelar i praktiken.

Exempel 1: E-handel

När du lägger en tröja i varukorgen är det frontend som visar korgen och uppdaterar summan. Backend kontrollerar att tröjan finns i lager, räknar ut frakt och moms, tar hand om betalningen och sparar ordern i en databas. Köper du två tröjor samtidigt som någon annan tar den sista i storleken ser backend till att bara en order går igenom.

Exempel 2: Intranät och digital arbetsplats

På ett intranät ser du startsidan med nyheter, genvägar och dina senaste dokument. Det är frontend. Bakom kulisserna hämtar backend innehåll från olika system, kontrollerar vilka behörigheter just du har och anpassar det du får se utifrån din roll eller avdelning. Samma uppdelning finns i en digital arbetsplats byggd på Microsoft 365, till exempel i ett SharePoint intranät där SharePoint-webbdelar (frontend) hämtar data via API:er från andra system (backend).

Exempel 3: Bokningssystem

I ett bokningssystem för mötesrum väljer du tid och rum i en kalendervy (frontend). Backend kollar att rummet är ledigt, registrerar bokningen och skickar en bekräftelse. Om två personer försöker boka samma rum samtidigt är det backend som avgör vem som hann först.

OBS: Säkerhetskontroller får aldrig bara ligga i frontend. Koden som körs i webbläsaren kan ändras av användaren, så avgörande kontroller, som vem som får se vad, måste alltid upprepas i backend.

Vanliga frågor om backend och frontend

Vad är skillnaden mellan backend och frontend?

Frontend är den del av en webbapplikation som användaren ser och interagerar med i webbläsaren, som knappar, formulär och layout. Backend är den osynliga delen på servern som hanterar data, logik, säkerhet och kommunikation med databaser. Frontend visar, backend tänker och lagrar.

Vad är fullstack-utveckling?

En fullstack-utvecklare arbetar med både frontend och backend. Det betyder att hen kan bygga hela flödet från knappen i webbläsaren till databasen på servern. I mindre team är det vanligt att en person täcker båda delarna, medan större projekt ofta har specialister på respektive område.

Vilken del är viktigast, backend eller frontend?

Ingen av dem fungerar bra utan den andra. Frontend avgör hur användbar tjänsten upplevs, och backend avgör om den är pålitlig, snabb och säker. Ett lyckat projekt kräver att båda delarna får lika mycket uppmärksamhet.

Vilket programmeringsspråk används i frontend respektive backend?

I frontend är HTML, CSS och JavaScript grunden, ofta tillsammans med ramverk som React, Vue eller Angular. I backend används många olika språk, till exempel C#, Python, Java, Node.js och PHP. Valet i backend styrs av teamets kompetens och teknikmiljön.

Behöver alla webbplatser en backend?

Nej. En enkel informationssida med fast innehåll kan klara sig med enbart frontend. Så fort du behöver inloggning, formulär som sparar data, sökning eller personligt innehåll behövs en backend, eller en tjänst som fungerar som backend åt dig.

Vad är ett API och vad har det med backend och frontend att göra?

Ett API är ett sätt för frontend att be backend om data eller att utföra en åtgärd. Det fungerar som en överenskommen meny: frontend vet vilka frågor den kan ställa och i vilket format svaret kommer. Därför kan flera olika appar och webbplatser dela samma backend.

Kom igång med backend och frontend

Du behöver inte bli utvecklare för att dra nytta av förståelsen. Börja med att titta på en webbapplikation du använder dagligen och fundera över vad som är frontend (det du ser) och vad som troligen är backend (det som sparas, kontrolleras och beräknas). Den övningen gör det mycket lättare att prata med utvecklare och att ställa rätt frågor i projekt.

Vill du lära dig mer praktiskt finns det gott om gratis resurser. Prova att bygga en enkel sida med HTML och CSS för att förstå frontend, och experimentera sedan med ett enkelt API för att se hur backend svarar. För den som arbetar med digitala arbetsplatser är nästa steg ofta att förstå hur lösningar i Microsoft 365 kopplas ihop med andra system via API:er och automatiseringar.

Behöver ni hjälp att avgöra hur er nästa webbapplikation, intranätlösning eller integration bör byggas upp, med rätt balans mellan backend och frontend? Boostly hjälper er hitta den lösning som passar er verksamhet, oavsett om den bygger på Microsoft 365, andra verktyg eller en kombination. Hör av dig så tar vi ett förutsättningslöst samtal.

Sammanfattning

Frontend är det du ser och använder i webbläsaren.
Backend är motorn på servern som hanterar data, logik och säkerhet.
De kommunicerar med varandra via API:er.
Uppdelningen gör webbapplikationer enklare att utveckla, förändra och bygga ut.
Säkerhetskontroller ska alltid ligga i backend.

Vad är backend och frontend? En enkel förklaring