Backend vs. Frontend

Begge betegnelser er engelsk adapterede ord, som referer til ”kodeverdenen” (alt online). Forskellen mellem de to ord er, at en Frontend-udvikler arbejder på den del af en digital løsning, som brugerne interagerer med, mens en Backend-udvikler arbejder med infrastrukturen og funktionerne, som ligger inde bagved.

Deraf begreberne;

• “frontend” = forenden og det som du ser.
• “backend” = bagenden og det som man ikke ser.

En frontend udvikler arbejder med de ting, som foregår på brugerens enhed, mens backend udviklere arbejder med alt det, som sker på en server eller en database.

Hvad er frontend udvikling?

En frontend udvikler er oftest optaget af brugerfladen (UI) og brugeroplevelsen (UX), altså overordnet set, hvordan ser løsningen ud, og hvordan er den at interagere med.

Frontend udvikling foregår i brugernes webbrowser, hvilket også er kaldet ’client-side’.

Frontend udvikling sker i en kombination af disse primære teknologier:

• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript

HTML

Denne teknologi giver frontend udvikleren adgang til at bygge visuelle elementer og overordnede funktioner. Det er i HTML, at man definerer websider og anden information, som kan blive vist i en webbrowser (f.eks. billeder, tekster, links og andet).

Man bruger næsten altid HTML i en kombination med CSS og JavaScript, for at løsningen ikke virker flad og kedelig at interagere med. HTML definere kun ”hvad er” og ”hvad findes”, men ikke hvordan tingene føles at interagere med, hvordan tingene opfører sig i forhold til hinanden, eller hvordan tingene skal se ud på forskellige enheder (responsivt).

Eksempel på HTML kode for en knap:

Resultat:

CSS

Med denne teknologi kan frontend udviklerne definere hvordan en løsning ser ud, samt hvordan det føles at interagere med løsningen.

CSS er en webløsnings ”stylesheet”, hvilket betyder, at det er her, at en udvikler definerer og beskriver hvordan elementerne skrevet i HTML skal præsenterer sig selv. HTML i sig selv ser ens ud på alle løsninger, det er CSS, som gør, at din hjemmeside ser anderledes ud fra andres. Med andre ord, så tillader CSS, at en frontend udvikler kan kontrollere det visuelle udseende af webløsningen.

Det er også i CSS’en at udviklerne definerer hvor responsiv en løsning skal være.

Uden CSS så ville alle løsninger se ens og kedelige ud.

Forsat eksempel på Knap nu med CSS tilknyttet:

Resultat:

JavaScript

Dette er et kompleks udviklingssprog, som bruges til at bygge interaktive og dynamiske elementer på webløsninger, som f.eks. animationer, pop-ups, og digitalt ”feedback” til brugeren.

En frontend udvikler benytter primært JavaScript til at tilføje interaktive elementer til en løsning, altså alt det, som du kan interagere med, når du bevæger dig rundt på en hjemmeside.

JavaScript er den eneste af de tre teknologier, som både kan bruges til at definere frontenden (ting som defineres i brugerens webbrowser), men også til at bygge backend funktioner (ting som defineres på en server).

Knappen nu med JavaScript:

Resultat:

DISCLAIMER

Hvis der sidder en udvikler og kigger med, så er jeg godt klar over, at det ikke er best practice, at skrive hele koden ‘inline’, men man normalvis, blot ville referere til CSS- og JavaScript-filer i HTML’en. Ovenstående visuelle eksempel var blot for, at gøre eksemplet nemmere at forstå.

Hvad er backend udvikling

En backend udvikler fokuserer primært på alt der foregår ’server-side’, hvor de arbejder med at bygge forbindelsen, som leverer data til en webløsning, når den bliver efterspurgt.

Lad mig komme med et eksempel på alt det, som en backend udvikler bygger.

Forstil dig at du er inde og shoppe på en webshop. Størstedelen af det, som du interagere med er bygget af frontend udviklerne. Men det indhold og produkter, som vises på din skærm, er i virkeligheden sendt fra databasen eller en server til frontenden, hvor alt indhold styres fra.

Det vil siges at uden backend udvikleren, så ville du slet ikke kunne se noget indhold eller produkter, da de så ikke ville blive indlæst i brugerfladen du sidder på.

Men backend udvikleren er ikke færdig…

For når du putter en vare i kurven og færdiggøre dit køb, så ryger der informationer til eksterne økonomi- og lagerstyringssystemer, der også ligger på en server. Her behandles dine informationer og din ordre.

Intet af dette ville ske, hvis ikke en backend udvikler havde været indover.

Der findes en lang række kodesprog til at kode backend applikationer her i blandt:

• Ruby on Rails
• Java
• C++
• C#
• Python
• PHP

Det er også i backenden, at man automatisere en lang række manuelle processer, ved at bygge et system eller en integration i mellem systemer, som håndterer en given proces automatisk. Dette kaldes også en RPA (Robotic Process Automation).

Hvad afgør valget af programmeringssproget i en backend opgave?

Man kan i virkeligheden opsætte en server i lige det programmeringssprog man vil. Men når man som backendudvikler vælger sprog, så handler det oftest om, hvad der skal udvikles.

3 programmeringssprog som vi vil fremhæve:

• C#
• PHP
• JavaScript

C# er sproget bag Microsofts portefølje, og det betyder, at hvis man skal arbejde på et Microsoft setup, så skal der kodes i C#.

C# er primært til websteder og applikationer (f.eks. til at få noget til at snakke sammen med Excel og Outlook).

C# er meget udbredt i Danmark, grundet at det er det, som man uddannes i. På trods af, at Java og Python på et verdensplan er mere udbredt.

Et groft estimat vil være, at 90% af alle hjemmesider arbejder i PHP. Hvilket gør dette til et populært programmeringssprog at arbejde i grundet efterspørgslen.

PHP er primært til websteder og webapplikationer.

Bliver brugt til at lave ting, som skal hentes i real tid, eller at noget skal være dynamisk.

Så med andre ord, så er programmeringssprog ikke noget man, som sådan ”vælger”.

Den korte forklaring

I sidste ende så er alt du kigger på internettet HTML. Serveren sammensætter hele det HTML dokument, som du kigger på, for dig. Så serveren bestemmer hvad du skal se, så sendes det til din browser, hvor det ”renderes” og her bestemmer frontend koden hvordan det skal se ud.