Forskellen bliver tydelig, når du følger en konkret handling. Det, en knap viser, og det, systemet faktisk gemmer, er forbundne opgaver med forskellige ansvar.
Brugerflade og server løser forskellige dele af opgaven
Frontend præsenterer information og giver brugeren mulighed for at handle. Den kan reagere lokalt på et klik eller sende en anmodning videre. Backend kan kontrollere anmodningen, arbejde med databaser og kontakte andre tjenester, før den sender et svar tilbage.
Grænsen handler om, hvor arbejdet udføres og hvilket ansvar det har. JavaScript kan eksempelvis bruges både i browseren og på en server. Et programmeringssprog alene fortæller derfor ikke, om et stykke kode er frontend eller backend.
| Ansvar | Frontend | Backend |
|---|---|---|
| Brugerens handling | Viser felter, knapper og feedback | Modtager og behandler anmodningen |
| Kontrol af oplysninger | Giver tidlig hjælp ved udfyldning | Kontrollerer gyldighed og adgang |
| Data | Viser resultatet og aktuelle tilstande | Læser, gemmer og ændrer efter reglerne |
| Fejl | Forklarer problemet og næste mulighed | Returnerer et passende svar og registrerer relevante fejl |
Et fiktivt eksempel: En kunde ændrer sin tid
Kunden vælger en dato i brugerfladen. Frontend kan straks vise datoen og kontrollere, om et påkrævet felt mangler. Når kunden bekræfter, sendes en anmodning til serveren med de relevante oplysninger. Det sker typisk gennem en aftalt API-grænseflade.
Backend kontrollerer blandt andet, om kunden må ændre reservationen, og om tiden stadig er ledig. Først når ændringen er accepteret, skal brugerfladen vise den som gennemført. En flot bekræftelse i browseren er ikke i sig selv dokumentation for, at reservationen er gemt.
Kontroller i browseren kan ikke stå alene
Det er nyttigt at få en tidlig besked om en manglende e-mailadresse eller forkert udfyldt dato. Men en anmodning kan sendes uden at følge brugerfladens regler. Backend skal derfor selv håndhæve de regler og tilladelser, som beskytter systemets data og handlinger.
Samarbejdet skal også håndtere ventetid, netværksfejl og gentagne klik. Aftal, hvordan løsningen viser en igangværende handling, og hvad der sker, hvis svaret er uklart. Ved vigtige ændringer kan det være nødvendigt at kontrollere den faktiske status, før brugeren prøver igen.
Opgaven afgør, hvor meget backend der er nødvendigt
Et website med artikler og kontaktoplysninger kan levere sit indhold som færdige sider. Login, personlige oplysninger, booking eller betaling stiller andre krav. Der kan bruges eksisterende tjenester, men integrationen, adgangen og håndteringen af fejl skal stadig afklares.
Skriv de nødvendige handlinger ned, før teknologien vælges. Hvem må se hvilke oplysninger? Hvad skal gemmes? Hvilket system er den gældende kilde? Det gør det muligt at vurdere, om opgaven er en brugerflade, en integration eller et større system med flere dele.
Afklar samarbejdet omkring grænsen
En fullstackudvikler kan arbejde med begge områder. Andre projekter fordeler dem mellem flere personer. Uanset organisering bør teamet aftale dataformat, fejlbeskeder, adgang og de tilstande, brugerfladen skal kunne vise. Det mindsker gætterier under implementeringen.
Ved gennemgang bør I afprøve hele handlingen: fra brugerens input til det gemte resultat og tilbage til brugerfladen. Test også afviste og mislykkede forsøg. At frontend og backend hver især kører, beviser ikke, at hele forløbet hænger sammen.
Tag med videre
Det vigtigste
at huske.
- Frontend viser og understøtter handlingen i browseren.
- Backend håndhæver serverens regler og behandler relevante data.
- Kontrollér hele forløbet og det gemte resultat, inklusive fejl.
Lad os gøre det klart
Spørgsmål & svar
Er en database det samme som backend?
Nej. En database er en mulig del af løsningen. Backend kan også håndtere adgang, regler, integrationer og kommunikationen med databasen.
Hvad betyder fullstack?
Det bruges om arbejde på tværs af frontend og backend. Den konkrete erfaring og opgavefordeling varierer, så aftal ansvaret tydeligt.
Kan et website fungere uden backend?
Det kan fungere uden en særligt udviklet applikationsbackend. Færdige sider skal stadig leveres til browseren fra hosting eller en server.
Hvad betyder backend på dansk?
Backend bruges om løsningen bag brugerfladen, især serverens behandling af anmodninger, regler, adgang og data. Det er mere præcist at beskrive disse opgaver end at oversætte ordet til blot bagsiden.
Er PHP frontend eller backend?
PHP bruges typisk på serveren og hører i den sammenhæng til backend. Serveren kan bruge PHP til at behandle en anmodning og sende eksempelvis HTML til browseren. Det er to forskellige trin i leveringen af siden.
Hvad er forskellen på HTML og PHP?
HTML beskriver dokumentets indhold og struktur. PHP er et programmeringssprog, som blandt andet kan bruges på serveren til at udføre logik og generere et svar. En løsning kan derfor sende HTML, der er blevet skabt af PHP.
Hvilke sprog kan bruges til backend?
Eksempler er JavaScript, Python, PHP, Java og C#. Valget afhænger af eksisterende systemer, opgaver, drift og teamets kompetencer. Et bestemt sprog gør ikke automatisk en løsning sikker, hurtig eller lettere at vedligeholde.
Hvordan taler frontend og backend sammen?
Browseren kan sende en HTTP-anmodning til en aftalt adresse. Serveren svarer med eksempelvis HTML eller data, som frontend kan præsentere. En API-aftale beskriver blandt andet dataformat, tilladelser og fejl, så begge sider kan håndtere samme forløb.
Kan man skjule en hemmelig API-nøgle i frontend?
Kode og værdier, der leveres til browseren, skal betragtes som tilgængelige for brugeren. Hemmeligheder, som giver private tilladelser, hører derfor hjemme i et passende servermiljø. Nogle tjenester har bevidst offentlige klientnøgler; deres begrænsninger skal følge tjenestens dokumentation.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
