Was ist ein Frontend? Aufgaben und Grundlagen
Autor: Redaktion Domeny.ForSale Veröffentlicht
Kurz erklärt: Das Frontend ist der Teil einer Website oder Anwendung, den Nutzer sehen und bedienen: die Anordnung der Inhalte, Menüs, Schaltflächen, Formulare und deren Reaktionen auf Eingaben. Im Web wird es vor allem mit HTML, CSS und JavaScript erstellt. Das Backend übernimmt dagegen die Verarbeitung im Hintergrund, etwa die Prüfung von Anmeldedaten und das Speichern von Bestellungen.
Was gehört zum Frontend?
Das Frontend ist die Benutzeroberfläche, also die Ebene, über die Nutzer mit dem System interagieren. Dazu gehört nicht nur das Erscheinungsbild auf dem Bildschirm, sondern auch das Verhalten der Elemente: das Öffnen eines Menüs, die Auswahl eines Datums, die Anzeige von Formularfehlern oder das Aktualisieren des Warenkorbs, ohne die Seite neu zu laden.
In einem Onlineshop gehören unter anderem die Produktkarte, die Bildergalerie, die Variantenauswahl und die Schaltfläche „In den Warenkorb“ zum Frontend. Das Frontend zeigt an, dass das ausgewählte Produkt hinzugefügt wurde. Während es auf die Antwort des Servers wartet, kann es eine Ladeanzeige einblenden.
Das Frontend ist also nicht bloß Dekoration. Lesbare Inhalte, die Bedienbarkeit per Tastatur und die korrekte Funktion auf dem Smartphone sind ebenso wichtig wie Farben oder Animationen. Ein ansprechend gestaltetes Formular, das sich nicht absenden lässt oder Fehler nicht erklärt, bleibt eine schlecht funktionierende Benutzeroberfläche.
Frontend und Backend – wo verläuft die Grenze?
Das Backend ist der Teil des Systems, der im Hintergrund arbeitet, meist auf einem Server. Es setzt die Regeln des Dienstes um, kontrolliert Berechtigungen und kommuniziert mit der Datenbank. Das Frontend übermittelt ihm Anfragen und stellt die erhaltenen Ergebnisse in einer für Menschen verständlichen Form dar.
Beide Teile kommunizieren häufig über eine API, also eine Schnittstelle, die festlegt, wie Programme Daten austauschen. Beispielsweise fragt das Frontend eine Liste verfügbarer Besuchstermine an. Das Backend liefert die Daten zurück, aus denen der sichtbare Kalender entsteht.
Der Ablauf einer Anmeldung verdeutlicht die Aufgabenverteilung:
- Das Frontend zeigt die Felder für E-Mail-Adresse und Passwort an.
- Nach dem Absenden des Formulars gelangen die Daten über eine verschlüsselte HTTPS-Verbindung zum Backend.
- Das Backend prüft die Daten und entscheidet, ob es den Zugriff gewährt.
- Das Frontend zeigt die Kontoansicht oder eine Meldung über die fehlgeschlagene Anmeldung an.
Im Browser zu prüfen, ob ein Feld ausgefüllt ist, hilft den Nutzern, schützt aber nicht das System. Diese Prüfung lässt sich umgehen. Deshalb muss das Backend Daten und Berechtigungen eigenständig überprüfen. Geheime Schlüssel oder Passwörter gehören nicht in den Frontend-Code: Code und Daten, die an den Browser geliefert werden, lassen sich einsehen.
Nicht jede Website benötigt ein umfangreiches Backend. Eine einfache Seite mit einem Angebot und Kontaktdaten kann aus statischen Dateien bestehen, also aus fertigen Dokumenten, die an die Nutzer ausgeliefert werden. Ein Kundenkonto, eine Bestellhistorie oder Reservierungen erfordern dagegen zusätzliche Funktionen im Hintergrund oder eine Anbindung an einen externen Dienst.
HTML, CSS und JavaScript – drei unterschiedliche Aufgaben
Die grundlegenden Frontend-Technologien ergänzen sich, übernehmen aber jeweils andere Aufgaben:
| Technologie | Hauptaufgabe | Beispiel |
|---|---|---|
| HTML | Legt die Struktur und Bedeutung der Inhalte fest | Überschrift, Link, Formularfeld |
| CSS | Beschreibt das Aussehen und die Anordnung der Elemente | Farben, Abstände, Layout auf dem Smartphone |
| JavaScript | Ergänzt Logik und dynamisches Verhalten | Produkte filtern, ohne die Seite neu zu laden |
HTML ist eine Auszeichnungssprache, CSS eine Stylesheet-Sprache. JavaScript ist eine Programmiersprache. Ein einfaches Dokument mit Text, Bildern und Links kann ohne JavaScript funktionieren; nicht jede Interaktion erfordert ein zusätzliches Skript.
Bei größeren Projekten kommen auch Bibliotheken und Frameworks zum Einsatz. Diese Werkzeuge stellen fertige Mechanismen und eine Struktur für die Organisation des Codes bereit. Beispiele sind React, Vue und Angular. Sie helfen dabei, die Benutzeroberfläche aus Komponenten aufzubauen – wiederverwendbaren Teilen wie einer Produktkarte oder einem Dialogfenster. Kenntnisse der Grundlagen ersetzen sie jedoch nicht.
Moderne Anwendungen können HTML auch auf dem Server erzeugen, bevor es an den Browser gelangt. Deshalb lässt sich die Grenze zwischen Frontend und Backend nicht immer genau daran festmachen, wo der Code ausgeführt wird. Am hilfreichsten bleibt die Unterscheidung zwischen Benutzeroberfläche und den im Hintergrund arbeitenden Teilen des Systems.
Was macht ein Frontend-Entwickler?
Ein Frontend-Entwickler setzt die Benutzeroberfläche in Code um und sorgt dafür, dass sie funktioniert. Er kann sich dabei an einem grafischen Entwurf orientieren, doch seine Aufgabe geht über das Nachbilden einer Darstellung hinaus. Er muss auch Situationen berücksichtigen, die ein statischer Entwurf nicht zeigt: fehlende Daten, einen langen Titel, einen Verbindungsfehler oder das mehrfache Anklicken einer Schaltfläche.
Zu dieser Arbeit gehören unter anderem:
- Responsives Design: das Layout an unterschiedliche Bildschirmgrößen anpassen.
- Barrierefreiheit: die Nutzung der Website auch per Tastatur und Screenreader ermöglichen.
- Performance: unnötigen Code und zu große Ressourcen reduzieren.
- Backend-Anbindung: Daten abrufen, senden und darstellen.
- Tests: Funktionen in verschiedenen Browsern und Zuständen der Benutzeroberfläche prüfen.
Ein Interface-Designer legt gewöhnlich das Aussehen und die Bedienung der Benutzeroberfläche fest. Der Frontend-Entwickler setzt diese Vorgaben in eine funktionierende Website um. In kleinen Teams kann eine Person beide Rollen übernehmen, doch Gestaltung und Programmierung erfordern unterschiedliche Fähigkeiten.
Wie gelingt der Einstieg ins Frontend?
Als erste Übung eignet sich am besten eine kleine Website, zum Beispiel eine Vorstellungsseite für eine Dienstleistung. Erstelle zunächst mit HTML Überschriften, eine Beschreibung, eine Liste und Kontaktdaten. Ergänze anschließend CSS, damit die Seite sowohl auf breiten als auch auf schmalen Bildschirmen gut lesbar ist.
Füge erst danach JavaScript hinzu, beispielsweise für einen einfachen Preisrechner. Prüfe, was bei der Eingabe eines ungültigen Werts passiert und ob sich alle Elemente ohne Maus bedienen lassen. Eine solche Übung zeigt den Unterschied zwischen einer Seite, die lediglich richtig aussieht, und einer Benutzeroberfläche, die sich tatsächlich nutzen lässt.
Siehe auch: Was ist GitLab?
Lesen Sie auch
