Was ist ein Frontend?

Frontend und Backend sind eigenständige Ebenen einer Software, die sich gegenseitig ergänzen. Stellt man sich eine Software als Restaurant vor, umfasst das Frontend die Außenfassade, Inneneinrichtung, Speisekarte und das Servierpersonal. Demgegenüber entspräche das Backend in dieser Analogie der Küche und dem Management mitsamt Personal und Produktions- und Verwaltungsprozessen.

Was macht ein Frontend aus?

Ein Frontend ist eine grafische Benutzeroberfläche zur Bedienung einer Website oder App. Das Frontend orientiert sich an den Bedürfnissen und Erwartungen von Menschen. Somit stehen eine ansprechende Darstellung von Informationen und leicht nachvollziehbare Strukturierung der Interaktionen im Vordergrund. Frontend-Design zielt darauf ab, eine gute User-Experience (UX) zu gewährleisten.

Beim Frontend handelt es sich um eine Software-Schicht, welche auf dem Client ausgeführt wird. Dabei verbirgt das Frontend Komplexität, denn die eigentliche Verarbeitung der Informationen findet auf dem Backend statt. Hinter den Kulissen kommuniziert das Frontend mit dem Backend, um Daten abzugleichen und Änderungen widerzuspiegeln. In der Regel kommen dabei als API bezeichnete Programmierschnittstellen zum Einsatz.

Dem Entwicklungs-Grundsatz „Separation of concerns“, zu Deutsch, „Trennung der Belange“ folgend, werden Frontend und Backend als unabhängige Ebenen realisiert. Für eine voll funktionsfähige Software werden immer beide Ebenen benötigt. Ein Frontend ohne Backend ist wie eine Fassade mit nichts dahinter.

Wer arbeitet am Frontend?

Grundsätzliche arbeiten zwei gänzlich unterschiedliche Nutzergruppen am Frontend:

1. Nutzerinnen und Nutzer, welche mit dem Frontend arbeiten.
2. Frontend-Entwicklerinnen und -Entwickler, welche Frontends bauen und pflegen.

Schauen wir uns im Folgenden die Gemeinsamkeiten und Unterschiede der beiden Gruppen bei der Arbeit mit dem Frontend an.

Wie arbeiten Nutzerinnen und Nutzer mit dem Frontend?

Besucherinnen und Beuscher einer Website navigieren über Links zwischen den einzelnen Seiten. Sie konsumieren dabei Inhalte, wie Texte und Medien, und interagieren mit Schaltflächen und anderen interaktiven Elementen. Dazu zählen die bekannten HTML-Formulare mit Auswahlmenüs, Eingabefeldern und Knöpfen.

Konzeptuell ähnlich verhält es sich mit den in einer App eingeloggten Nutzerinnen und Nutzern. Diesen stehen im Frontend ggf. reichhaltigere Interaktionsmöglichkeiten mit spezialisierten Schaltflächen zur Verfügung. Wiederum beschränkt sich der Umfang der Interaktionen auf wenige, klar festgelegte Pfade. Jedoch gibt es ggf. mehr Möglichkeiten, selbst Inhalte zu erstellen.

Wie arbeiten Entwicklerinnen und Entwickler mit dem Frontend?

Nutzerinnen und Nutzer sind bei der Arbeit am Frontend recht limitiert. Anders sieht es bei den sog. Frontend-Entwicklerinnen und -Entwicklern aus. Diese Programmier-Profis sind für die Erstellung, Pflege und Weiterentwicklung eines Frontends zuständig und werden dabei oft von Designerinnen und Designern unterstützt. Letztendlich steht die Benutzerfreundlichkeit beim Webdesign im Vordergrund.

Was genau macht man bei der Frontend-Entwicklung? Schauen wir uns ein Beispiel aus dem WordPress-Ökosystem an. Frontend-Entwicklerinnen und Entwickler erstellen WordPress Widgets und WordPress-Themes, welche einer WordPress-Website ein ansprechendes Aussehen verschaffen.

Mithilfe eines von Frontend-Entwicklerinnen und -Entwicklern erstellten WordPress-Themes werden die variablen Inhalte der einzelnen Seiten und Beiträge in festgelegte Strukturen eingebettet. So wird die konsistente Darstellung aller Inhalte über die gesamte Site hinweg sichergestellt.

Frontend-Entwicklerinnen und -Entwickler bauen Landingpages und nutzen Call-to-Action (CTA)-Elemente, um Besucherinnen und Besucher durch die Site zu leiten. Dabei steht insbesondere Responsive Design im Vordergrund.

Was sind die wichtigsten Frontend-Frameworks?

Ein Frontend wird für die Nutzerinnen und Nutzer auf deren Endgeräten („Clients“) dargestellt. Prinzipiell unterscheidet man zwischen Web-Frontends für die Darstellung im Browser und nativen Frontends, welche spezifisch für ein Betriebssystem sind. Moderne Methoden der Cross-Platform Entwicklung erlauben, mehrere Frontends aus einer gemeinsamen Basis heraus zu erzeugen.

Web-Frontends umfassen Code in den Web-Sprachen HTML, CSS und JavaScript. Diese entsprechen den drei grundlegenden Belangen der Web-Programmierung:

Prinzipiell lassen sich Frontends direkt auf Basis der drei Web-Sprachen erstellen. Jedoch wäre dieser Ansatz nicht effizient, da man viel unnötigen Aufwand betreiben müsste. Frontend-Frameworks vereinfachen die Arbeit entscheidend.

Je nach Einsatzgebiet erfüllen Frontend-Frameworks verschiedene Funktionen. Sie erweitern den Umfang der Web-Sprachen, erleichtern die Anbindung an das Backend und stellen die Konsistenz der Funktionalität über Browser-Versionen hinweg sicher. Manche Frameworks enthalten ferner Techniken zur Verbesserung der Performanz.

Neuere Frameworks, wie React und Vue, setzen verstärkt auf Reaktivität; Änderungen an den Daten werden sofort im Frontend widergespiegelt. Ferner verankern diese Frameworks Komponenten als zentrales Konzept. Dabei handelt es sich um in sich gekapselte, wiederverwendbare Einheiten reaktiver UI-Elemente.

Abhängig vom genutzten Ansatz gibt es reine CSS- oder JavaScript-Frontend-Frameworks. Ferner unterscheidet man zwischen Web- und Cross-Platform Frontend-Frameworks.

Mit Reactive Frameworks Frontends auf Basis von Komponenten entwickeln

Bei diesen JavaScript Frontend-Frameworks dreht sich alles um maßgeschneiderte, reaktive Komponenten. Komponenten vereinen Struktur, Aussehen und Verhalten und passen sich automatisch an Änderungen der zugrundeliegenden Daten an. Löscht man beispielsweise einen Datensatz, verschwindet der entsprechende Eintrag aus einer Listendarstellung und ein etwaiger Zähler zeigt sofort den aktuellen Wert an.

Die Platzhirsche der reaktiven Frontend-Frameworks sind seit Jahren Angular und React. Beide eignen sich zum Erstellen von Single Page Applications, wie auch umfangreicherer Anwendungen und gelten als recht komplex. Demgegenüber steht das deutlich schlankere Frontend-Framework „Vue“ als moderne Alternative.

Mit dem Svelte-Framework existiert eine interessante Neuentwicklung. Denn Svelte beschreitet einen grundsätzlich anderen Weg, als React und Co. Anstatt innerhalb von JavaScript neue Strukturen zu erfinden, handelt es sich bei Svelte um einen Compiler. So lässt sich simpler Svelte-Code schreiben, welcher vom Compiler in komplexeren JavaScript-Code umgesetzt wird.

Die meisten reaktiven Frontend-Frameworks vereinfachen ferner das Arbeiten mit globalen Daten. Dabei kommt ein „State-Store“ zum Einsatz, mit dessen Hilfe eine Kapselung der Zustandsdaten ermöglicht wird.

Zum Erzeugen des Frontend-Codes kommt ggf. ein separater Build-Prozess mit einem Task-Runner wie Gulp oder Grunt zum Einsatz.

Mixed-Concern Frontend-Frameworks: die alte Garde

Diese älteren Frontend-Frameworks erfreuten sich vor dem Aufkommen der reaktiven Frameworks großer Beliebtheit. Bootstrap oder Bootstrap-Alternativen boten eine damals dringend benötigte Standardisierung über Browser-Unterschiede hinweg und hatten eine Auswahl vorgefertigter Komponenten an Bord. Dazu zählten beispielsweise hierarchische Navigations-Menüs, Akkordeons mit aufklappbaren Feldern und animierte Bilder-Slider.

Gemein ist diesen Frameworks, dass sie sowohl JavaScript-Code als auch CSS-Code umfassen. Das kompakte UI-Framework ZURB Foundation zielte eher auf Anpassungsfähigkeit für professionelle Anwendungen. Mit „jQuery UI“ gab es ferner einen minimalistischen Ansatz zur Kombination mit dem beliebten JavaScript-Framework.

Vorteilhaft an diesen Frontend-Frameworks ist, dass sie sich ausgesprochen einfach einsetzen lassen. Meist genügt es, eine CSS- und / oder JavaScript-Datei einzubinden. Anders sieht es aus, möchte man Anpassungen und Optimierungen vornehmen, dann wird es schnell kompliziert. Auch das Kombinieren von Teilen dieser Frameworks gestaltet sich erfahrungsgemäß eher problematisch.

Single-Concern Frontend-Frameworks: die schlanken Spezialisten

Anders als die Mixed-Concern Frontend-Frameworks, welche JavaScript und CSS kombinieren, beschränken sich Single-Concern Frontend-Frameworks auf eine der Sprachen. Mit Tailwind CSS hat sich quasi ein Standard zum Versehen von Frontend-Komponenten mit CSS-Regeln etabliert. Anstatt CSS-Code selber zu schreiben, werden vordefinierte Klassen direkt in das HTML-Gerüst eingebettet.

Was Tailwind für die Darstellung bietet, leistet das schlanke Frontend-Framework Alpine JS in Bezug auf Verhalten und Reaktivität. Anstelle von CSS kommen vorgefertigte JavaScript-Schnipel zum Einsatz. Dabei versteht sich Alpine als „jQuery for the modern web“ und vollzieht damit den Zirkelschluss zum Klassiker unter den JavaScript-Frameworks.

Entscheidender Vorteil der Single-Concern Frontend-Frameworks ist ihre Einfachheit. In der Regel ist es möglich, den Umfang des eingesetzten Codes auf das tatsächlich benötigte zu Beschränken. Dazu wird ggf. ein separater Build-Prozess benötigt. Ferner lassen sich Teile dieser Frameworks problemlos miteinander kombinieren. Eine beliebte Kombination besteht aus Tailwind CSS + Alpine JS.

Mit Cross-Platform Frameworks mehrere Frontends aus einer gemeinsamen Basis erzeugen

Die bisher besprochenen Frontend-Frameworks zielen allesamt auf die Darstellung im Web-Browser ab. Darüber hinaus existieren sog. Cross-Platform Frontend-Frameworks, welche Code für native Apps erzeugen. Native Apps benötigen keinen Browser, sondern laufen direkt auf einem Betriebssystem, wie Windows, macOS, Android, oder iOS.

Ein bekanntes Cross-Platform Frontend-Framework ist Flutter, welches auf Googles eigener Dart Programmiersprache aufsetzt. Eine in Flutter gebaute Benutzeroberfläche dient als gemeinsame Basis, aus der sich mehrere native und Web-Frontends erzeugen lassen.

Ein ähnlicher Ansatz findet sich beim rein nativen Frontend-Framework GTK. Aus einer gemeinsamen Basis lassen sich Frontends für Linux, Windows, und macOS erzeugen. Anders als bei Flutter setzt GTK nicht auf Web-Technologien auf. Dafür existieren Anbindungen an eine große Auswahl von Programmiersprachen, aus deren heraus sich mit GTK arbeiten lässt.