Was ist Frontend?
Frontend (deutsch: "Vorderseite") bezeichnet die clientseitige Hälfte einer Website. Wenn du firmencharisma.de aufrufst, siehst du Überschriften, Bilder, Menüs, Buttons, Hover-Effekte — das alles ist Frontend. Es läuft im Browser deines Besuchers, nicht auf einem Server irgendwo. Der Browser bekommt drei Arten von Code geliefert: HTML für die Struktur, CSS für das Aussehen und JavaScript für die Interaktion. Aus diesen drei Bausteinen baut er die Seite, die du siehst.
Das Gegenstück zum Frontend ist das Backend — der Teil, der unsichtbar im Hintergrund auf einem Server läuft, Datenbanken abfragt, E-Mails verschickt und Bezahlprozesse abwickelt. Frontend und Backend reden über APIs miteinander.
Vergleich aus dem Alltag: Stell dir ein Restaurant vor. Das Frontend ist alles, was der Gast sieht: der Speisesaal, die Tische, der Kellner, die Speisekarte, das Geschirr. Das Backend ist die Küche — Köche, Vorratsraum, Kühlhaus. Der Gast bekommt die Küche nie zu sehen, aber ohne sie gibt es kein Essen.
Was alles zum Frontend gehört
Ein modernes Frontend besteht aus mehreren Schichten:
- HTML — die Struktur. Jede Überschrift, jedes Bild, jeder Link ist ein HTML-Element.
- CSS — das Aussehen. Farben, Schriften, Abstände, Layouts, Animationen.
- JavaScript — die Logik. Klicks, Formvalidierung, dynamische Inhalte, Animationen, API-Aufrufe.
- Assets — die Medien. Bilder, Videos, Fonts, Icons.
- Build-Tools — die unsichtbare Hilfstruppe. Vite, Webpack, Sass-Compiler, Bildoptimierer.
Dazu kommen oft Frontend-Frameworks wie React, Vue oder Svelte, die das Schreiben von komplexen Oberflächen erleichtern. Mehr dazu im Eintrag Framework.
Wie das Frontend mit dem Backend zusammenarbeitet
Stell dir vor, du baust einen Online-Shop für selbstgemachte Marmelade. Der Besucher landet auf der Produktseite — das Frontend zeigt Bild, Beschreibung, Preis, "In den Warenkorb"-Button. Klickt er auf den Button, schickt das Frontend per JavaScript eine Anfrage ans Backend: "Bitte leg dieses Produkt in den Warenkorb von Nutzer XY." Das Backend speichert das in der Datenbank und antwortet: "Erledigt, neuer Warenkorb-Stand: 1." Das Frontend nimmt diese Antwort und aktualisiert den Warenkorb-Counter oben rechts — ohne dass die Seite neu geladen wird.
Das ist die typische Arbeitsteilung: Frontend zeigt und reagiert, Backend rechnet und speichert. Beide sind aufeinander angewiesen, aber sie sind klar getrennt.
Frameworks im Frontend
Reines HTML, CSS und JavaScript reichen für einfache Websites. Sobald eine Anwendung komplexer wird — viele Komponenten, dynamische Daten, App-ähnliches Verhalten — greifen Entwickler zu Frontend-Frameworks. Die wichtigsten sind:
| Framework | Was es ist | Wofür es typisch ist |
|---|---|---|
| React | JavaScript-Bibliothek von Meta | Web-Apps, Dashboards, große SaaS-Produkte |
| Vue | JavaScript-Framework | Schnelle Prototypen, mittlere Web-Apps |
| Svelte | Compiler-basiertes Framework | Performante Apps mit kleinem Bundle |
| Next.js | React-Framework mit Server-Rendering | SEO-relevante Web-Apps, Marketing-Sites |
| Astro | Multi-Framework-Generator | Content-Sites mit minimal JavaScript |
Jedes Framework hat seine Stärken. Für eine kleine Friseur-Website wäre React Overkill. Für ein komplexes Buchungstool mit Live-Daten ist es Gold wert. Die richtige Wahl hängt von der Aufgabe ab — nicht vom Hype.
Warum ist das Frontend für deine Website wichtig?
Dein Besucher sieht und beurteilt nur das Frontend. Was im Backend passiert, ist ihm egal. Wenn das Frontend langsam lädt, schlecht aussieht oder auf dem Handy nicht funktioniert, ist er weg — egal wie genial die Server-Architektur dahinter ist.
Frontend entscheidet über drei Dinge: Wahrnehmung deiner Marke, Bedienbarkeit der Seite und Geschwindigkeit. Eine Restaurant-Website mit hässlichem Frontend signalisiert: "Hier kocht niemand mit Liebe." Eine Anwaltskanzlei mit veraltetem Frontend signalisiert: "Wir sind nicht auf der Höhe der Zeit." Das ist unfair, aber so denken Menschen.
Beispiel aus dem Alltag: Ein Steuerberater investiert 5000 Euro in eine starke Backend-Lösung mit Mandantenportal — schickt den Job aber an einen billigen Frontend-Entwickler, der die Oberfläche zusammenklickt. Resultat: Das Portal ist ein technisches Wunderwerk, sieht aber aus wie aus dem Jahr 2008. Mandanten klagen, niemand benutzt es. Die Investition ist verbrannt, weil das Frontend nicht überzeugt.
Worauf du beim Frontend achten solltest
Performance steht nicht im Nachhinein. Wer ein Frontend baut und am Schluss "noch optimiert", hat schon verloren. Geschwindigkeit gehört in den ersten Entwurf, nicht in die letzte Stunde. Mehr dazu in Core Web Vitals, PageSpeed und Bildkomprimierung.
Mobile zuerst, Desktop danach. Über die Hälfte aller Besucher kommt vom Handy. Ein Frontend, das nur am Desktop schick aussieht, ist halb gebaut. Mehr im Eintrag Responsive Design.
Barrierefreiheit ist Pflicht. Alt-Tags, Tastaturbedienbarkeit, Kontrast — das ist kein "Nice-to-have", sondern technische Hygiene und bald auch gesetzlich vorgeschrieben.
Weniger ist mehr. Jede Library, jedes Tracking-Skript, jeder Slider kostet Ladezeit. Ein gutes Frontend lässt weg, was nicht nötig ist — und schiebt den Rest durch Minification und Lazy Loading.