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