Frontend

Was ist ein Frontend-Framework?

18.04.2021

Was ist ein Frontend-Framework?

Was ist eigentlich ein sogenanntes Frontend-Framework? Wenn Sie sich mit dem Thema Web-Entwicklung auseinandersetzen, werden Sie höchstwahrscheinlich auf Begriffe wie Frontend oder Framework stoßen. Möglicherweise haben Sie aber auch ein Angebot einer Agentur erhalten, und wollen nun verstehen, was genau gemeint ist. Nachfolgend stellen wir Ihnen einige wichtige Begriffe vor.

Wenn Sie Fragen zu diesem Beitrag haben oder eine individuelle Webentwicklung beauftragen möchten, sprechen Sie uns an! Die Erstberatung ist selbstverständlich kostenlos.

Kontakt aufnehmen »

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

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

Über den Autor
Author

Christoph Heike

Christoph Heike ist Geschäftsführer der Webzeile GmbH und programmiert bereits seit seinem 12. Lebensjahr. Aktuell beschäftigen ihn Technologien wie PHP, Symfony, VueJS, React uvm.


Fragen? Projekt geplant? Nehmen Sie gleich mit uns Kontakt auf.

Lernen Sie unsere Digitalagentur und Internetagentur kennen. Vereinbaren Sie ein kostenloses Erstgespräch.