Was bedeutet Frontend?
Das Frontend oder auch Front-End ist alles, was User sehen, wenn sie eine Website, App, Software oder ein Computergame öffnen. Im Gegensatz dazu arbeitet das Backend ausschließlich im Hintergrund und ist für die User dementsprechend nicht sichtbar.
Der Begriff “Frontend” wird vor allem in der IT-Branche verwendet. Allgemein werden häufig auch Begriffe wie “Benutzeroberfläche” oder “GUI” (Graphic User Interface) als Synonyme verwendet.
Da das Front-End alles enthält, was der User optisch wahrnehmen kann, umfasst es beispielsweise auch alle Medieninhalte (Texte, Videos, Bilder) sowie die Navigation. Auf der Benutzeroberfläche der jeweiligen Website werden den Usern entsprechend Inhalte präsentiert. Die Eingaben des Usern werden im Frontend entgegengenommen und zeitgleich im Hintergrund vom Backend verarbeitet.
Was ist der Unterschied zwischen Frontend und Backend?
Die visuellen Grafiken und Videos sind häufig das Erste, was den meisten Usern auffällt, wenn sie beispielsweise eine Website, eine App oder ein Videospiel öffnen.
Wer kennt es nicht: Man geht auf eine Website, möchte auf etwas Bestimmtes klicken und plötzlich öffnet sich ein Pop-Up-Formular.Was hat dieses Beispiel jetzt mit dem Front-End und Back-End zu tun? In diesem Beispiel wird der Unterschied zwischen Frontend und Backend und damit auch die Trennung in sichtbare und nicht sichtbare Bereiche, die im Hintergrund ablaufen und auslösen, dass sich bei dem Besuch einer Website automatisch das Pop-Up-Formular öffnet.
Frontend-Entwicklung
Die Front-End-Entwicklung sieht im Allgemeinen so aus:
- Der Teil einer Website oder Webanwendung, mit dem die User interagieren, wird als Frontend bezeichnet. Seine Hauptfunktion ist die Kommunikation mit den Datenressourcen im Backend, um Informationen bereitzustellen, den User die Möglichkeit zu geben, Entscheidungen zu treffen und Inhalte z. B. mithilfe von Schaltflächen, Medien und Rechnern zu konsumieren.
- Es ist die Sicht des Users auf alles, auch wenn Daten aus dem Backend einbezogen werden.
- Da der User häufig über einen Browser oder eine andere Schnittstelle mit dem Frontend kommuniziert, wird es als die Client-Seite der Website oder Anwendung bezeichnet.
- Visuelle Elemente wie Tabellen, Schaltflächen, Farben, Text, Navigationsmenüs und Bilder sind einige Beispiele, die Sie auf einer Website finden können.
- HTML, CSS und JavaScript sind Beispiele für Front-End-Entwicklungssprachen.
- Die beiden wichtigsten Ziele eines Frontend-Developers sind die Steigerung der Leistung und der Reaktionsfähigkeit, d.h. die Website sollte schnell laden und auf allen Geräten fehlerfrei funktionieren.
- Zu den beliebtesten Frontend-Technologien gehören Flutter, SAAS, jQuery, React.JS und AngularJS.
- Front-End-User können normalerweise über eine grafische Benutzeroberfläche (GUI) oder eine Befehlszeile navigieren.
Aufgaben des Front-End-Developers
Frontend-Entwickler*Innen sind, mit anderen Worten, für die sichtbare Oberfläche einer Website zuständig.
Was genau bedeutet das? Damit die Website so aussieht, wie sie am Ende von den Usern gesehen wird, müssen vorab vielzählige Schritte umgesetzt und implementiert werden. Die Aufgaben bestehen unter anderem darin, die Website technisch aufzusetzen und sie anschließend zu codieren.
Die Entwickler*Innen orientieren sich dabei an den Vorgaben des Webdesigner, der das Layout und Erscheinungsbild der Webseite entwickelt. Auch Funktionen, die direkt im Browser passieren, wie beispielsweise Animationen, werden dabei von dem Frontend Developer umgesetzt.
Auch die Optimierung und Wartung gehören zu den Aufgaben der Front-End-Entwicklung. Dabei geht es um die Ladezeit und die Leistung der Website, aber auch um Framework-, Bibliotheks- oder System-Updates. Für einen Überblick über die verschiedenen Aufgabenbereiche von Front-End-Entwickler*Innen, haben wir Ihnen eine Übersicht zusammengestellt:
- Entwicklung und Darstellung von Webseiten oder Anwendungen
- Umsetzung eines (vorgegebenen) Layouts
- Implementierung von Funktionen im Browser
- Verbessern und optimieren von Webseiten
- Wartung von Webseiten
Bedeutung für die Suchmaschinenoptimierung
Das Frontend hat auch eine Schlüsselfunktion für die Indizierung durch Suchmaschinen. In einer idealen Welt würden Website-Besitzer*Innen SEO-Vorlagen verwenden, die bestimmte Kriterien für eine bessere Indizierung erfüllen. Ryte hat dazu einige, wichtige Beispiele aufgelistet, die Sie umsetzen sollten:
- Websites, die Framesets oder Flash verwenden, sind schwer zu navigieren und werden im Allgemeinen abgelehnt
- Wichtig ist ein gut organisierter und aufgeräumter HTML-Code
- Sprechende URLs
- Unike Meta-Description für jede Seite bzw. jedes Produkt
- Das Bestehen einer Sitemap.xml
- Der Einsatz einer Breadcrumb-Navigation
- schnelle Ladezeiten der Website
- Robots.txt nutzen
- Rückmeldung eines HTTP Statuscodes 404 bei fehlerhaften Seiten
- Kein interner Duplicate Content durch einzelne Seiten, die über mehrere URLs erreichbar sind
- Umfangreiche interne Verlinkung
Sie suchen nach Front-End-Developern für Ihr nächstes Freelance-Projekt?
Wir von Connectly beraten und unterstützen Sie gerne bei der Erweiterung von Teams mit IT-Freelancern. Durch unsere jahrelangen Erfahrung haben wir ein großes Netzwerk an Front-End Entwickler*Innen aufgebaut, die Sie bei der erfolgreichen Umsetzung Ihres IT-Projekts unterstützen können. Wir freuen uns schon sehr auf den gemeinsamen Austausch und stehen Ihnen auch bei weiteren IT-Projekten beratend zur Seite.
Einzelnachweise
https://de.ryte.com/wiki/Frontend
https://blog.hubspot.de/website/frontend-backend
