Was ist ein Frontend-Framework?

Typischerweise besteht eine Webanwendungen aus mehreren Teilen. Es gibt die Anwendung selbst, einen Server, auf dem sie gehostet wird, eine Datenbank und vieles mehr.

Zunächst müssen wir die Begrifflichkeiten eindeutig spezifizieren:

Frontend

Das Frontend ist der Teil einer Anwendung, der durch einen (i.d.R. menschlichen) Nutzer mit einer beliebigen Rolle gesehen und genutzt werden kann. Es enthält Seiten, Buttons, Formulare, Steuerelemente usw.

Backend ≠ Backend

Bei dem Thema Backend wird es schon kniffeliger. Viele bezeichnen oftmals die Administrationsoberfläche einer Anwendung als „Backend“. Dies ist aber in diesem Kontext nicht gemeint. In der Programmierung wird als Backend der Teil der Anwendung bezeichnet, der z.B. die Datenhaltung und -manipulation vornimmt, interne Aufgaben erledigt, mit Schnittstellen kommuniziert und allgemein die Schnittstelle zum Frontend darstellt.

Was ist ein Framework?

Es gibt Frontend- und Backend-Frameworks. Es gibt Daten-Frameworks, Test-Frameworks und etliche weitere. In der Regel übernimmt ein Framework eine Reihe von Grundfunktionen, die häufig wieder verwendet werden, setzt einheitliche Standards und unterstützt den Entwickler bei einer sauberen und sicheren Entwicklung.

Und Frontend-Frameworks?

Am Beispiel von Frontend-Frameworks können das z.B. Buttons, Formulare oder Layout-Funktionen sein. Durch Einhaltung von Standards und Definition von Variablen können Anwendungen besser gewartet und schneller entwickelt werden.

Außerdem vereinheitlicht ein Frontend-Framework die Darstellung in unterschiedlichen Browsern in Geräten.

Es gibt übrigens nicht nur Browser-Frontend Frameworks. Es gibt beispielsweise auch solche, die sich auf Emails oder Print-Layouts spezialisiert haben.

JavaScript Frameworks (React, VueJS, Angular) vs. CSS Frameworks (Bootstrap, Tailwind)

Die oben genannten Begrifflichkeiten tauchen in der modernen Anwendungsentwicklung immer wieder auf. Grundsätzlich lässt sich zwischen JavaScript und reinen CSS Frameworks unterscheiden.

JavaScript Framework

• „Reaktiv“, Inhalt kann sich dynamisch verändern, z.B. nach Kommunikation mit dem Server

• Bietet Möglichkeiten zur Datenhaltung, Datenmutation, Datenmanipulation

• Funktionen über das reine Styling Hinaus

• Bau von wiederverwendbaren Komponenten

CSS Framework

• Schlanker und schnell

• Einfach zu erlernen und verwenden

• Ausreichend für klassische Multi-Page-Applications

Vorteile und Nachteile

Vorteile

• Schnellere Entwicklung durch vorhandene Elemente und Komponenten (z.B. Buttons, Formularelemente)

• Konsistente und sichere Entwicklung durch die ganze Anwendung

• Dasselbe Erscheinungsbild in unterschiedlichen Browsern und Geräten

• Bei JS Frameworks: Schnelle und kostengünstige Entwicklung von reaktiven Frontends

• Je nach genutztem Framework: Updates, Ergänzungen und Community

Nachteile

• Je nach genutztem Framework längere Ladezeit

• Größere Anwendung, mehr Dateien

• Abhängigkeit zum Framework-Entwickler

Ist ein Frontend-Framework ein Baukasten?

Ja und nein! Häufig werden Komponenten und Elemente auf den Webseiten des Framework Herstellers so dargestellt, dass der Eindruck entsteht, man müsse die einzelnen Elemente nur noch „zusammen klicken“ und wäre schon am Ziel. Hier ist Vorsicht geboten: Ein Framework stellt lediglich ein Werkzeug für Entwickler da, etwa wie ein Werkzeugkoffer für den Handwerker. Es werden einem zwar einige Dinge erleichtert, können aber bei dem falschen Umgang auch schädliche Folgen haben.

Was ist die Alternative?

Selbst ohne die Verwendung von Frameworks wird praktisch ein Framework genutzt: Das, des Browsers. Dieser stellt Elemente auf dem Bildschirm bereits ohne zusätzliche Anweisungen in einer speziellen Art und Weise dar. Z.B. Formularelemente oder Buttons.

Die Nutzung eines Frontend-Frameworks ist aber in jedem Fall stark zu empfehlen.

Populäre Frontend-Frameworks

• React

• VueJS

• Angular

• Bootstrap

• Tailwind

• Foundation