Definition „Präsentationsschicht“ Welche Komponenten gehören zum Frontend?

Anbieter zum Thema

Windhoff Group

Das Frontend ist der Teil einer Anwendung oder Website, den Besucher zu sehen bekommen: die Präsentationsschicht, zu der die Benutzeroberfläche gehört. Frontend-Entwicklung umfasst alles, was zum Erzeugen und Manipulieren dieser Oberfläche nötig ist.

Allgemein gesagt ist das Frontend, oder auch Front-end, der Teil einer Anwendung, der näher an den Anwendern und Anwenderinnen ist. Das Gegenstück nennt man Backend. In der Regel geht es beim Frontend um alles, was die grafische Benutzeroberfläche (GUI, Graphical User Interface) einer Anwendung ausmacht. Der Begriff ist vor allem in der Webentwicklung alltäglich, da bei Webanwendungen praktisch immer eine Trennung zwischen clientseitiger und serverseitiger Logik vorliegt.

Welche Aspekte gehören zu einem Frontend?

Das Frontend umfasst die Teile einer Applikation, die der Benutzende sehen und bedienen kann. Am Beispiel einer Webanwendung ist es das, was einem User angezeigt wird, wenn er eine Website im Browser öffnet – also alles von statischen HTML-Elementen über Formulare und Schaltflächen bis hin zu animierten und interaktiven Inhalten. Developer und UI-Designer nutzen HTML, CSS und JavaScript, um diese sichtbaren Bereiche einer Webanwendung zu gestalten.

Die Benutzeroberfläche

Die Benutzeroberfläche einer Internetseite ist durch ein Layout geprägt, das sich aus Schriftarten, Farben, Grafiken und verschiedenen HTML-Elementen zusammensetzt. Sie alle dienen dazu, die Inhalte der Seite benutzerfreundlich, ansprechend und strukturiert zu vermitteln, statt sie als reinen Text abzubilden.

Neben statischen Elementen wie Texten oder Bildern gehören auch interaktive Elemente zur Benutzeroberfläche. Das können z. B. Links, Schaltflächen, Formulare oder animierte Menüs sein. Über sie kann ein Benutzer mit der Website interagieren, z. B. um durch ihre Inhalte zu navigieren oder ihre Funktionen zu nutzen.

Client-seitige Logik

Moderne Webanwendungen dienen nicht nur zum Anzeigen von Informationen, sondern können Besuchern verschiedenste Funktionen anbieten, z. B. Banking, Einkäufe oder Buchungen. Damit komplexe Anwendungen möglich werden, muss die Website auf Benutzereingaben reagieren können.

Soll das passieren, ohne die Seite neu zu laden, muss die entsprechende Logik dynamisch im Browser ausgeführt werden. Client-seitige Logik wird meist per JavaScript realisiert und kann vielseitige Funktionen bieten, z. B. das Validieren von Formulareingaben schon während der Eingabe oder das Aktualisieren von Teilbereichen einer Webseite.

Kommunikation mit dem Backend

Wenn eine Webanwendung Datenbankzugriffe, Datenverarbeitung oder andere komplexere Funktionen umfasst, spielen sich diese normalerweise im Backend ab. Das Frontend zeigt lediglich Informationen an oder gibt Benutzereingaben an das Backend weiter. Frontend und Backend müssen miteinander kommunizieren, damit eine Website Daten abrufen, speichern oder verarbeiten kann. Das geschieht z. B. über HTTP-Requests.

Warum trennt man Frontend und Backend?

Beim Frontend liegt der Schwerpunkt auf der Aufbereitung und Darstellung von Inhalten, damit sie für den Benutzer leicht zugänglich sind. Aufgaben rund um das Frontend sind nicht nur inhaltlich, sondern auch technisch anders aufgebaut als jene aus dem Backend. Hier werden Technologien genutzt, die direkt im Browser ausgeführt werden können. Dazu werden bereits nahezu alle Bestandteile, die für die Darstellung gebraucht werden, beim Laden der Website abgerufen.

Bedient ein Nutzer die interaktiven Elemente der Seite, kann die gewünschte Funktion sofort ausgeführt werden. Für komplexere Geschäftslogik oder Datenzugriffe werden jedoch leistungsfähigere Technologien wie PHP oder C# gebraucht, die wiederum auf Webservern ausgeführt werden müssen. Auch Infrastruktur mit hoher Speicherkapazität oder Leistungsfähigkeit kann im Hintergrund gebraucht werden.

Solche Aufgaben werden dementsprechend in eine eigene Schicht abstrahiert und vom Frontend getrennt. Dadurch bleibt das Frontend performant und schlank. Es funktioniert in der Regel unabhängig vom Endgerät, sofern ein moderner Browser verwendet wird.

Durch die Trennung in verschiedene Schichten können sich Entwickler zudem auf verschiedene Aufgabenbereiche spezialisieren. Zu den typischen Aufgaben und Kenntnissen eines Frontend-Entwicklers gehören viele Dinge, die man unter dem Begriff Webdesign zusammenfassen kann, z. B.:

• Technologien wie HTML, CSS und JavaScript sowie CSS- oder JavaScript-Frameworks

• Suchmaschinenoptimierung (SEO)

• benutzerfreundliche Gestaltung von Inhalten

• barrierefreie Gestaltung von Inhalten

• Tests zur Benutzerfreundlichkeit und Barrierefreiheit

• optische Gestaltung, Layout

• Grundlagen in der Bildbearbeitung

• Sicherung der Performance der Webanwendung

• Sicherung der Kompatibilität mit mehreren Browsern und Endgeräten

• Anbindung an das Backend

Alles, was mit Aspekten wie Programmierung, Datenhaltung, Infrastruktur oder IT-Sicherheit zusammenhängt, fällt demnach in den Aufgabenbereich des Backend-Entwicklers. Wenn ein Entwickler sowohl Aufgaben aus dem Frontend als auch aus dem Backend übernehmen kann, spricht man von einem Full Stack Developer.

Fazit

Frontend ist ein Begriff, der alle Bereiche der grafischen Benutzeroberfläche einer Software umfasst, z. B. die im Browser sichtbaren Teile einer Webseite. Es ist für die Interaktion mit dem Benutzer und die Darstellung von Informationen zuständig, nicht aber für die Verarbeitung und Speicherung von Daten oder die Bereitstellung von Ressourcen.

Frontend-Technologie entwickelt sich ständig weiter. Waren z. B. Internetseiten vor einigen Jahren noch relativ starr und statisch aufgebaut, können sie sich heute automatisch an verschiedene Bildschirmgrößen anpassen oder wie eine native App wirken und funktionieren, Stichwort Progressive Web App (PWA).

(ID:49738335)