Frontend-Frameworks - Liste der besten Optionen für Webentwicklungsprojekte

Genauso wie Werkzeuge entwickelt wurden, um Materialien zu verarbeiten und Unterkünfte zu bauen, entwickeln heute Entwickler Werkzeuge für sich selbst, um effizienter zu arbeiten. Aber es wuchs in solchem Maße, dass unter Frontend-Entwicklern Witze über die nächsten Frameworks gemacht werden. Warum gibt es so viele davon? Wie unterscheiden sie sich von JavaScript-Bibliotheken? Was sind Frameworks und warum wollen Entwickler ihre Projekte in ihnen schreiben? Diese Fragen werden wir in einem Moment beantworten, aber Schritt für Schritt...

Framework vs Bibliothek

In der Programmierung ist eine Bibliothek eine Sammlung von Funktionen, Methoden oder einfach Code, die bereits geschrieben wurden, um die Lösung eines Programmierproblems zu erleichtern. Eine Bibliothek kann sich auf ein spezifisches Problem konzentrieren oder eine allgemeine Lösung für eine breitere Gruppe von Problemen anbieten. Eine Analogie zu unserer Welt könnte beispielsweise das Formelsammlung sein, die Abiturienten bei ihren Abschlussprüfungen verwenden. Sie bietet bewährte Lösungen für gegebene Probleme, damit Studenten sie leichter lösen können.

Ein Framework ist ebenfalls ein Werkzeug, das Entwicklern die Arbeit an ihren nachfolgenden Projekten erleichtert, jedoch bietet es eine vorschreibende Art und Weise, in der der bereitgestellte Code verwendet werden kann. Es zwingt Entwickler, auf eine bestimmte Art und Weise zu arbeiten. Dieses Verhalten wird Inversion of Control genannt, bei dem das Framework den von den Entwicklern geschriebenen Code aufruft und nicht, wie im Fall einer Bibliothek, der Entwickler die bereitgestellten Lösungen nutzt.

Obwohl Framework und Bibliothek voneinander verschieden sind, verwenden Entwickler diese Begriffe oft austauschbar. Daher werden wir in diesem Text auch zwei Beispiele von Bibliotheken besprechen.

Wir wissen bereits, was Frameworks sind, aber im Frontend können wir sie dennoch gruppieren in:

• UI-Frameworks (helfen bei der Erstellung der visuellen Ebene - CSS),
• JS-Frameworks (erleichtern das Erstellen von clientseitigen Skripten im Browser des Benutzers).

Quelle: npm trends

UI-Frameworks

Es kann zeitaufwändig sein, eine Anwendung, die aus mehreren Komponenten, Formularen und Ansichten besteht, zu erstellen. Schließlich müssen alle vorgenannten Elemente mit entsprechenden Stilen versehen werden. Hier kommen Frameworks ins Spiel, die sich auf die Gestaltung unserer Benutzeroberfläche konzentrieren.

Bootstrap

Es ist das beliebteste Framework zur Erstellung grafischer Benutzeroberflächen auf Websites. Es wurde 2011 von Twitter-Entwicklern geschaffen. Bootstrap bietet eine Reihe von sofort einsetzbaren Komponenten, die Sie unmittelbar auf Ihrer Webseite verwenden können, und ermöglicht es Ihnen, sie an Ihre individuellen Bedürfnisse anzupassen. Sowohl die neueste Version des Frameworks - 5.2 - als auch frühere Veröffentlichungen werden in verschiedenen Systemen und CMSes weit verbreitet implementiert. Bootstrap ist in WordPress-Skins zu finden und lässt sich auch leicht mit Drupal verbinden.

Frontend-Frameworks wie Bootstrap ermöglichen es uns, eine visuelle Version unserer Website viel schneller zu erstellen durch die Verwendung von bestehenden Elementen wie Schaltflächen, Karussells und Bannern. Das Team muss sie nicht von Grund auf neu erstellen. Dann sparen wir Zeit bei der Erstellung eines Projekts, indem wir ein gegebenes Schema für das Erstellen nachfolgender Seiten anwenden. Es ist daher einfacher, eine solche Website zu warten, und neue Personen können sich dank einer standardisierten Komponentenstruktur oder umfassender Dokumentation schneller mit dem Projekt vertraut machen. Aufgrund der Beliebtheit von Bootstrap ist es auch sehr wahrscheinlich, dass Entwickler dieses Framework bereits in ihrer Arbeit verwendet haben.

Beispiele für Dropdown-Listen bereitgestellt von Bootstrap.

Der Nachteil der Verwendung dieser Art von Lösung kann das resultierende große CSS-File sein, das sich negativ auf die Ladegeschwindigkeit unserer Website auswirkt. Allerdings bieten Frameworks auch eine Lösung dafür an, indem nur die Funktionen importiert werden, die auf einer bestimmten Webseite verwendet werden.

Ähnliche Frameworks, die gebrauchsfertige Elemente anbieten, sind Bulma CSS, Semantic UI und das Foundation Framework.

Doch gebrauchsfertige Komponenten sind nicht der einzige Weg, um das Leben von Frontend-Entwicklern zu erleichtern.

Utility-Frameworks und Tailwind CSS

Ein Utility-Framework bietet vorbereitete Schriftgrößen, Textfarben und Hintergründe für Abstände und andere Elemente. Der Frontend-Entwickler hat daher die meisten Gestaltungseigenschaften bereits ordnungsgemäß deklariert und muss sie nur in seinen Komponenten verwenden. Solche Lösungen ermöglichen es, das Schreiben von benutzerdefinierten Stilen auf ein Minimum zu reduzieren und die resultierende CSS-Datei auf das notwendige Mindestmaß zu beschränken.

Das beliebteste Utility-Framework - Tailwind CSS - analysiert die in der HTML-Struktur verwendeten Klassen und kompiliert auf dieser Grundlage die auf der Website enthaltenen Stile.

Utility-Frameworks haben ihre Befürworter, aber auch vehemente Gegner, die behaupten, dass HTML-Dateien aufgrund der Masse an CSS-Klassen weniger lesbar werden, sowie der Tatsache, dass wir HTML-Klassen schreiben, die fast genauso aussehen wie die in CSS verwendeten Beschreibungsregeln.

Quelle: Warum ich mich für Tailwind CSS entscheide

JS-Frameworks

Jeden Tag wird ein neues JavaScript-Framework erstellt. Wie wählt man dann das richtige aus? Derzeit sind die Top-Lösungen React, Vue und Angular. Seit einigen Jahren sind sie ununterbrochen an der Spitze der Frontend-Tool-Rankings. Obwohl alle verwendet werden, um reaktive Benutzeroberflächen zu erstellen, unterscheiden sie sich in einigen Aspekten.

React.js

Die Bibliothek, die 2013 von Facebook (jetzt Meta) erstellt wurde, ist derzeit das beliebteste Frontend-Tool mit 17 Millionen wöchentlichen Downloads von der npm-Website. React hat durch seinen innovativen Ansatz zur Erstellung von Landingpages und Single Page Applications (SPA) Popularität gewonnen.

Dieses Framework ermöglicht es Entwicklern, deklarativen Code zu schreiben, also Code, der angibt, was der Entwickler erstellen möchte, anstatt - wie zuvor - Schritt für Schritt zu beschreiben, wie etwas erstellt werden soll (imperativer Ansatz).

Der gesamte Mechanismus zum Anzeigen und Aktualisieren von HTML wird von React „unter der Haube“ unseres Browsers durchgeführt, indem der Virtual DOM verwendet wird. Der VDOM ist ein Mechanismus, der die teuren Operationen optimiert, die an Elementen in der Struktur der Webseite durchgeführt werden. Anstatt Elemente jedes Mal in verschiedenen Teilen der Seite zu referenzieren, erstellt der VDOM eine Kopie des aktuellen Dokumentenobjektmodells (DOM), und erst dann werden die Änderungen an den ausgewählten Elementen vorgenommen, und nur diese Elemente werden aus dem VDOM ins DOM ausgetauscht. Dies verbessert die Leistung der Webseite, wodurch sowohl Zeit als auch Computerressourcen gespart werden.

React verwendet JSX, eine JavaScript-Erweiterung, die eine HTML-ähnliche Syntax bietet und es ermöglicht, Komponenten dynamisch auf der Website zu erstellen. Die Komponenten selbst können mehrfach wiederverwendet werden und haben ihren eigenen Zustand, dessen Änderung es ermöglicht, unsere Oberfläche dynamisch zu aktualisieren.

Quelle: Reactjs.org

React hat sein eigenes Ökosystem, in dem wir separate Bibliotheken und Frameworks finden können, die speziell dafür geschrieben wurden, um die Funktionalität des Tools noch weiter zu erweitern. Wenn wir mehr als eine Single Page Application erstellen möchten und verschiedene Wege benötigen, können wir React Router verwenden. Für die Erstellung statischer Webseiten können wir GatsbyJS verwenden. Und wenn unsere Website Server-Side Rendering anbieten soll, kommt Next.js zu unserer Hilfe.

Vue.js

Ein weiterer Framework-Riese ist Vue.js, das 2014 vom ehemaligen Google-Mitarbeiter Evan You entwickelt wurde. Das Framework wurde nach dem Model-View-Controller-Architekturmuster entworfen.

Vue.js bietet fertige Lösungen für verschiedene Bedürfnisse, sodass wir ohne Installation zusätzlicher Codepakete:

• eine Single Page Application erstellen,
• unsere dynamischen Komponenten zu einer statischen Webseite hinzufügen,
• eine Website mit SSG oder SSR erstellen.

Dieses Framework verwendet ebenfalls JSX-Syntax, jedoch auf eine andere Weise als React. Vue ermöglicht uns einen anderen Weg bei der Erstellung von Komponenten. Wir können die Struktur, die Stile und Skripte einer bestimmten Komponente in einer einzigen Datei belassen, mit entsprechender Unterteilung, der sogenannten Single File Component.

Angular

Angular wurde 2016 veröffentlicht, obwohl es ursprünglich die zweite Version des von Google entwickelten Angular.js-Frameworks (2010) sein sollte. Letztendlich wurde Angular als separates Projekt veröffentlicht. Es kann als das älteste der aktuellen „Großen Drei“ angesehen werden, obwohl es sich erheblich von seinem Vorgänger unterscheidet.

Angular hat sich durch seine Funktionalitäten wie Zwei-Wege-Datenbindung, Dependency Injection und integrierte Unterstützung für Ajax- und HTTP-Anfragen einen Namen gemacht. Es ist auch wichtig zu beachten, dass es uns zwingt, in TypeScript und nicht in JavaScript zu schreiben. TypeScript selbst ist eine Obermenge der JS-Sprache und bietet zusätzliche Funktionalitäten wie das Typisieren von Variablen, was es einfacher macht, potenzielle Fehler zu verfolgen.

Obwohl es zweifellos das schwierigste der beschriebenen Frameworks ist, bietet Angular viele Möglichkeiten und kann als solide Wahl angesehen werden.

Svelte

Svelte ist wohl das am schnellsten an Popularität wachsende Frontend-Tool in letzter Zeit. Obwohl dieses Framework 2016 erstellt wurde, wird es in den letzten 2-3 Jahren viel darüber gesprochen, wie Umfragen unter Entwicklern bestätigen. Im Jahr 2021 war es das am meisten geliebte Web-Framework, und 2022 belegte es den zweiten Platz. Diese Meinung teilen auch Apple, die kürzlich ihre Musik-Website mithilfe von Svelte neu geschrieben haben.

Was unterscheidet diese Lösung von den anderen? Alle Prozesse, die zum Beispiel in React oder Vue ablaufen, wie das Aktualisieren des Virtual DOM, wurden durch den Compile-Schritt unseres Projekts ersetzt. Bei der Kompilierung werden keine Bibliotheksdateien oder Frameworks eingebezogen, da unser Projekt in normale HTML-, CSS- und JS-Dateien konvertiert wird, die die nativen Browser-Funktionen verwenden. Natürlich werden wir abgesehen von der geringeren Dateigröße normalerweise eine bessere Leistung erzielen als bei Frameworks und Bibliotheken (die die Ersetzung von Elementen mithilfe des Virtual DOM durchführen), und die Syntax selbst ist der in Vue.js sehr ähnlich, jedoch mit einigen kleineren Abweichungen.

Quelle: Svelte.dev

Basierend auf Svelte wurde das SvelteKit-Framework entwickelt, das die zuvor beschriebenen Lösungen für Routing oder Server-Side Rendering bietet.

Next.js

Wie bereits erwähnt, ist React so beliebt, dass verschiedene Frameworks dafür geschrieben wurden. Eines davon - Next.js - wurde 2016 von der Firma Vercel erstellt. Dieses Framework löste das Problem, das Reacts größtes Manko war. Es erlaubte nicht die Erstellung umfangreicher Websites, da seine gesamte Funktionalität auf einer einzigen Seite begann und endete. Heute bietet Next.js React alles Notwendige, um vollwertige Websites zu erstellen. Next.js bietet Server-Side Rendering (SSR), statische Seitengenerierung (SSG) und eine Kombination der beiden Ansätze, genannt Incremental Static Regeneration (ISR).

Quelle: Nextjs.org

Die Entwickler von Next.js haben eine Lösung für häufige Probleme bei der Website-Entwicklung ausgearbeitet. Daher erleichtert dieses Framework die Arbeit in vielen Bereichen der Webentwicklung, angefangen mit einem einfachen Routingsystem basierend auf der Architektur unseres Projekts, über die Möglichkeit zur Erstellung einer benutzerdefinierten API bis hin zur Unterstützung für CSS und TypeScript. Es ist auch erwähnenswert, dass wir von Anfang an auch native Bildoptimierung und einen separaten Leuchtturm zur Messung der Leistung von Websites basierend auf Next.js erhalten. Dieses Framework hat jedoch einige Nachteile.

• Es erfordert Node.js auf dem Hosting-Server.
• Bei größeren Projekten kann der Prozess der Generierung statischer Seiten steil ansteigen.
• Es fehlt ein State-Manager, d.h. eine Software, die uns hilft, die in der Anwendung verwendeten Daten sinnvoll zu speichern.

Wenn wir uns jedoch Unternehmen ansehen, die sich für die Verwendung von Next.js für ihre Websites entschieden haben, können wir davon überzeugt sein, dass es eine fertige Lösung ist, selbst für die anspruchsvollsten Projekte. Es gibt einen Grund, warum so viele globale Riesen aus verschiedenen Branchen auf dieses Tool gesetzt haben.

jQuery

Es ist eine Bibliothek für JavaScript, die 2006 veröffentlicht wurde. Obwohl sie heute nicht mehr so angesagt ist wie vor ein paar Jahren, wurde sie laut dem Portal BuiltWith 2019 von 80% der 1 Million beliebtesten Webseiten verwendet.

In ihren besten Jahren war jQuery so beliebt, dass Entwickler oft nicht wollten, ihre Projekte ohne dieses Tool auszuführen. Es konnte auch in fertigen Lösungen wie Bootstrap (ab Version 5 wurde die Verwendung von jQuery eingestellt) und CMSes (Drupal und WordPress) gefunden werden.

Die Erstellung von Websites mithilfe dieser Bibliothek war zu einem bestimmten Zeitpunkt bahnbrechend. Sie ermöglichte es Entwicklern, Webseiten viel schneller zu erstellen, da Skripte von mehreren oder mehr Zeilen durch eine einzige Codezeile ersetzt werden konnten. Die Bibliothek erleichterte auch die Manipulation des DOM, die Erstellung von XHR-Abfragen und die einfachere Ereignisbehandlung, die in verschiedenen Browsern gleich funktionierte. Der letzte Faktor ist sehr wichtig, da Browser zum Zeitpunkt der Veröffentlichung der Bibliothek nicht standardisiert waren und es viele Male vorkam, dass derselbe Code je nach beteiligtém Browser unterschiedlich funktionierte.

Im Jahr 2022 wird jQuery immer noch häufig im Internet verwendet. Es läuft gut und wird in den kommenden Jahren sicherlich nicht plötzlich verschwinden. Entwickler werden jedoch bei der Erstellung neuer Websites wahrscheinlich nicht mehr diese Bibliothek in Betracht ziehen. Es gibt sogar Gegner, die z.B.:

• einen imperativen Stil des Code-Schreibens,
• keine Notwendigkeit, jQuery zu verwenden, aufgrund der sehr guten Implementierung von JavaScript in Browsern,
• und eine schlechte Skalierbarkeit des Projekts hervorheben.

GSAP

Aber was ist, wenn unser Projekt komplexe Animationen erfordert? Kann ein Frontend-Tool uns helfen? Die Antwort ist ja, natürlich, und nicht nur eines! Wir werden uns jedoch auf das beliebteste davon konzentrieren - GSAP.

Diese Bibliothek wurde ursprünglich entwickelt, um mit Flash zu arbeiten, aber später wurde sie für JavaScript umgeschrieben, was sich als Hit herausstellte. Obwohl der Schöpfer von GSAP, Jack Doyle, erwähnte, dass es keine leichte Aufgabe war, war es definitiv die Mühe wert, wenn man die Beliebtheit des Tools betrachtet (mehr als ein Drittel der Animationsbibliotheken sind GSAP).

Diese Lösung bietet eine einfache API zur Erstellung verschiedener Arten von Animationen. Sie können einfache Elemente auf einer Website animieren oder komplexere, indem Sie sie beispielsweise in ihre ersten Faktoren zerlegen.

Ein häufig verwendetes Merkmal dieser Bibliothek sind die Animationen, die beim Scrollen einer Seite auftreten. Im Moment des Scrollens können wir eine Animation mit mehreren Stufen erstellen oder sogar einen bestimmten Abschnitt der Website mit einer bestimmten Animationsstufe verknüpfen. Diese Operation ermöglicht es, die Animation abzuspielen und zurückzuspulen, je nach Richtung des Scrollens der Seite. Ein solch fortgeschrittener Effekt kann von Entwicklern mit wenigen Codezeilen erreicht werden, was erheblich Stunden und oft sogar Tage der Arbeit spart.

GSAP ermöglicht es uns, fast alles auf unserer Website zu animieren, und die Funktionalität kann mit Plugins weiter erweitert werden. Mit der Draw SVG-Erweiterung können wir beispielsweise den Effekt eines sich selbst zeichnenden Bildes oder den Effekt der Unterschrift des eigenen Namens erstellen.

Wie alle anderen Lösungen hat auch GSAP seine Nachteile, wie ein sehr großes Datei-Waage- (fast 67 kB, was für eine Bibliothek ziemlich viel ist) und eine Lizenz (wie sich herausstellt, sind nicht alle GASP-Funktionen kostenlos). Es ist auch wichtig zu beachten, dass Animationen mit JavaScript und nicht mit CSS die Hauptprozessorlade belasten können, was Probleme mit der Leistung anderer Skripte auf unserer Website verursachen kann.

Astro

Astro ist ein Framework zur Erstellung schneller Webseiten. Es bietet unter anderem archipelagische Architektur, Routing und Datenladen. Allerdings fehlt ihm die UI- (Benutzeroberflächen-) Funktionalität, was bedeutet, dass wir es mit einem anderen Framework kombinieren können, wie oben beschrieben, oder mit allen von ihnen.

Die archipelagische Architektur von Astro ermöglicht die entsprechende Aufteilung der Website in Abschnitte, die optimal geladen werden, mit der Aufteilung der Webseite in statische Inhalte und dynamische Komponenten. Das gesamte entworfene Layout wird standardmäßig auf dem Server gerendert, und kein JS-Skript wird an den Client gesendet (es sei denn, unsere Komponenten verwenden sie).

Dieser architektonische Ansatz zielt natürlich auf die Effizienz der Website ab. Der Großteil der Webseite wird in statische HTML-Dateien umgewandelt, und reaktive Komponenten werden unabhängig geladen, was bedeutet, dass einige Elemente unserer Website bereits interaktiv sein können, ohne darauf zu warten, dass der untere Teil der Seite geladen wird.

Wie wählt man das beste Frontend-Framework für ein Webprojekt aus?

Beim Entwerfen einer Website oder Anwendung ist es wichtig, sich einige grundlegende Fragen zu stellen, die uns helfen, die besten Lösungen auszuwählen.

Bezüglich der Benutzeroberfläche in unserem Projekt: Möchten wir gebrauchsfertige Komponenten verwenden und an unsere Bedürfnisse anpassen? Wenn ja, nutzen wir Lösungen, die gebrauchsfertige Komponenten anbieten, wie Bootstrap.

Ist das Design so komplex, dass es besser wäre, es von Grund auf neu zu erstellen? In diesem Fall wird Tailwind CSS hilfreich sein. Wenn auch komplexe Animationen beteiligt sein sollen, zögern wir nicht, zu GSAP zu greifen.

Was ist mit der Struktur der Anwendung und ihrer Funktionsweise? Benötigen wir einfach ein robustes Tool mit umfangreichen Erweiterungsmöglichkeiten? Wenn ja, sollten wir React wählen.

Möchten wir sofort die gesamte „Maschine“ zur Erstellung von Anwendungen haben? Wir sollten uns für Angular entscheiden.

Was, wenn wir die Produkte großer Konzerne nicht verwenden möchten? Wir können Vue wählen, obwohl Svelte aufgrund seiner Einfachheit, sowohl in Bezug auf den geschriebenen Code als auch in den verwendeten Architekturen, ebenfalls eine Überlegung wert ist.

Obwohl dies nicht die einzigen Faktoren bei der Auswahl eines Frontend-Frameworks sind, da jedes Projekt einer separaten Analyse für die gegebenen Bedürfnisse bedarf, können wir mit Sicherheit garantieren, dass die Verwendung einer der in diesem Artikel beschriebenen Lösungen (mit Ausnahme von jQuery für neue Projekte) keine schlechte Wahl ist.

Frontend-Entwicklung ist ein sehr wichtiger Teil unserer täglichen Arbeit bei Droptica. Daher können wir Ihnen problemlos helfen, das richtige Framework für Ihr Projekt auszuwählen.