Frontend

Den del av ett program som användaren ser och använder, till exempel en webbsida i webbläsaren.

Kallas även: front end, klientsida
Kategori: Programmering

Enkel förklaring

Frontend är allt som användaren ser och kan klicka på: knappar, texter, menyer och formulär. På en restaurang motsvarar det matsalen, medan köket är backend.

För en webbplats är frontend det som visas i webbläsaren.

Teknisk förklaring

För webben byggs frontend av tre sorters filer:

HTML: innehållet och strukturen
CSS: utseendet
JavaScript: det som händer när man klickar, och annat beteende

Filerna skickas från en server till användarens webbläsare, och koden körs på användarens egen enhet. Frontend hämtar ofta data från en backend genom ett API.

Det finns också frontend i mobilappar och datorprogram.

Praktiskt exempel

Kodkollektivet Academy är nästan bara frontend. Sidorna är färdiga HTML-, CSS- och JavaScript-filer som skickas till webbläsaren, och allt det interaktiva körs där:

Kunskapstesterna rättas i webbläsaren, och svaren skickas aldrig någonstans.
Sökningen körs också i webbläsaren. Sökindexet hämtas som vanliga filer, och det du söker på skickas inte till någon server.

Servern gör bara en sak: den lämnar ut filerna.

När och varför används det?

Ordet används när man pratar om vem som gör vad i ett system. En frontendutvecklare arbetar med det användaren ser, och en backendutvecklare med det som körs på servern.

Uppdelningen är också viktig för säkerheten: man måste veta vad som körs hos användaren och vad som körs på servern.

Rekommendation: lägg aldrig hemligheter eller behörighetskontroller enbart i frontend. Allt där kan läsas och ändras av användaren.

Vanliga missförstånd

“Frontend är bara utseende.” Nej. Frontend innehåller också logik, till exempel kontroller av formulär eller, som i Academy, rättning av kunskapstester.
“Det som står i frontend är dolt.” Nej. Användaren kan läsa all kod och data som skickas till webbläsaren.
“Ett system måste ha både frontend och backend.” Nej. En statisk webbplats klarar sig utan backend.

Relaterade begrepp

BackendDen del av ett system som körs på en server, utom synhåll för användaren. Den lagrar data, kontrollerar behörighet och utför arbetet.

API (Application Programming Interface)Ett bestämt sätt för program att be andra program om information eller tjänster, med regler för vad man får fråga och hur svaret ser ut.