Frontend und Backend — wo der Code läuft und wie sie miteinander sprechen
Client, Server, Datenbank und die API dazwischen
Einleitung
Wenn du eine Webanwendung benutzt, sind in Wirklichkeit zwei Programme im Spiel. Das Frontend läuft in deinem Browser und ist das, was du siehst und anklickst. Das Backend läuft auf einem Server an einem anderen Ort und kümmert sich um Daten, Regeln und Zugriff. Die beiden sprechen über das Netz miteinander.
Frontend — die Clientseite
Das Frontend besteht aus dem HTML, CSS und JavaScript, das der Browser lädt und ausführt. Hier liegen die Benutzeroberfläche und die unmittelbare Interaktion. Weil der Code beim Benutzer läuft, kann man ihm in Sicherheitsfragen nicht vertrauen — alles, was vom Client kommt, muss auf dem Server erneut geprüft werden.
Backend — die Serverseite
Das Backend übernimmt Geschäftslogik, Zugriffskontrolle und Daten. Hier arbeitet man typischerweise mit einer Datenbank, validiert Eingaben, prüft, ob der Benutzer eine Handlung ausführen darf, und sorgt dafür, dass Daten sicher gespeichert und geholt werden. Das Backend läuft auf einem Server, zu dem der Benutzer keinen direkten Zugang hat.
die API dazwischen
Frontend und Backend kommunizieren über ein API (Application Programming Interface). Ein verbreiteter Stil ist ein Web-API, bei dem das Frontend eine Anfrage sendet und das Backend mit Daten antwortet — oft im Format JSON. So können eine Webseite, eine mobile App und andere Systeme dasselbe Backend nutzen, weil sie dieselbe vereinbarte Sprache sprechen.
- 01Frontend: Benutzeroberfläche, läuft im Browser, kann in Sicherheitsfragen nicht vertraut werden
- 02Backend: Logik und Daten, läuft auf dem Server, validiert alles
- 03API: der vereinbarte Vertrag darüber, wie sie Daten austauschen
- 04Datenbank: wo Daten dauerhaft gespeichert werden, Zugriff vom Backend
Ein typischer Datenfluss
Stell dir einen Nutzer vor, der ein Profil speichert: Das Frontend sammelt die Felder und schickt sie an die API des Backends. Das Backend prüft, ob der Nutzer angemeldet und berechtigt ist, validiert die Felder, speichert sie in der Datenbank und antwortet mit einem Ergebnis. Das Frontend zeigt dann eine Bestätigung. Jede Seite erledigt genau ihren Teil der Arbeit.