Welches JavaScript-Framework wofür
Ob React, Angular oder Vue: JavaScript-Frameworks gibt es mittlerweile zuhauf. Das macht die Wahl zunehmend schwieriger. Der Artikel hilft bei der Entscheidung und beschreibt die konzeptionellen Ansätze der Frameworks.
„Wir haben mittlerweile Milchprodukte, die länger halten als so manches JavaScript-Framework.“ Dieser Satz, den JavaScript-Experte und Autor Manfred Steyer auf dem JS Kongress in München äußerte, bringt drastisch auf den Punkt, wie schnelllebig die JavaScript-Welt ist. Doch so schlimm, wie der erste Eindruck vermuten lässt, ist die Situation gar nicht. Zwar gibt es teils gravierende Unterschiede in Implementierungsdetails und Workflows, doch alle modernen Frameworks ähneln sich zumindest in den grundlegenden Strukturen und Konzepten. Entwicklungsteams stehen bei jedem neuen Projekt vor der Frage, welches Framework das passende ist. Von welchen Faktoren die Antwort abhängt und wo die Stärken der verschiedenen Produkte liegen, vermittelt der Artikel.
Die Qual der Wahl
Das Internet ist voll mit Vergleichen zwischen den großen JavaScript-Frameworks Angular, React, Vue und – seit einiger Zeit – Svelte (Abbildung 1). Abhängig von der Perspektive des jeweiligen Autors gewinnt eines dieser Frameworks und alle anderen sind die Verlierer. Für Entwicklerinnen und Entwickler hat diese Konkurrenzsituation trotz der oft emotional geführten Debatten Vorteile. Sie haben mehr Auswahl bei der Software, die Hersteller versuchen sich nicht nur zu übertrumpfen, sondern inspirieren sich auch gegenseitig. Auch bei der Auswahl des Frameworks gilt: Es gibt nicht den einen Gewinner, sondern jedes Framework hat seine Daseinsberechtigung und die Teams können sich das für sie passende Framework aussuchen.
Die modernen Frameworks haben eines gemein: Sie sind dafür konzipiert, Single-Page Applications (SPAs) umzusetzen und dabei eine Komponentenarchitektur zu verwenden. Eine Applikation besteht aus vielen einzelnen Komponenten, die eine Baumstruktur bilden. Durch diesen Baum fließen Informationen von der Quelle in die Kindkomponenten, die wiederum mit ihren Elternkomponenten kommunizieren und so die Daten in der Quelle manipulieren.
Mittlerweile hat sich auch TypeScript als feste Größe in der Frameworkwelt etabliert. Einige Frameworks wie Angular und Vue sind in TypeScript implementiert. Andere wie React und Svelte sind zwar in JavaScript umgesetzt, beherrschen aber auch TypeScript. Für Teams, die an neuen Applikationen arbeiten, sollte es mittlerweile eine Selbstverständlichkeit sein, TypeScript einzusetzen.
Die Frameworks haben noch weitere Gemeinsamkeiten. Ihre Entwickler versuchen den Einstieg in die Entwicklung einer Applikation so einfach wie möglich zu machen und stellen zu diesem Zweck Kommandozeilenwerkzeuge zur Verfügung, die die Initialisierung übernehmen. Nachdem das Kommandozeilenwerkzeug die Struktur der Applikation aufgebaut und alle Abhängigkeiten heruntergeladen hat, können Entwickelnde sofort mit der Arbeit beginnen und ihre Komponenten erzeugen.
Auch eine Unit-Test-Umgebung stellen die meisten Frameworks bereit und manche, wie beispielsweise Angular, liefern sogar die Vorbereitung für Ende-zu-Ende-Tests mit. Egal, für welches Framework sich ein Team entscheidet, alle großen Frameworks sind General-Purpose-Frameworks. Somit sind sie generell alle eine gute Wahl, wenn es darum geht, SPAs zu erstellen.
Angular: Logik, Struktur und Styling säuberlich getrennt
Angular steht für Struktur, Stabilität und Software. Es ist gerade für Umsteiger aus der Enterprise-Backend-Entwicklung mit Java oder C# geeignet, da das Framework mit seinen Vorgaben Entwickler an die Hand nimmt und wenig Raum für architektonische Fehler lässt. Viele der Konzepte von Angular finden sich auch in der Backend-Entwicklung wieder, was den Einstieg zusätzlich erleichtert. Das Framework nutzt für die Implementierung von Komponenten TypeScript-Klassen und trennt Logik, Struktur und Styling sauber voneinander. Die Komponenten in Angular enthalten lediglich die Anzeigelogik. Businesslogik, die keine direkte Abhängigkeit zur Anzeige hat, liegt in Services.
Angular nutzt Dependency Injection, um einzelne Bestandteile der Applikation zu entkoppeln. Greift eine Komponente auf die Funktionalität eines Service zu, erhält sie über den Dependency-Injection-Mechanismus des Frameworks Zugriff auf eine Instanz des Service und kann ihn dadurch verwenden. Die Dependency Injection funktioniert jedoch nicht nur auf Komponentenebene, sondern auch zwischen Services. Das Entkoppeln führt auch dazu, dass Komponenten und Services besser testbar sind, da Abhängigkeiten über die Dependency Injection in der Testumgebung durch vordefinierte Strukturen ersetzt werden.
Ein großer Vorteil von Angular ist, dass es für viele typische Aufgaben bereits vordefinierte Lösungsansätze gibt. Sie folgen den Regeln und Best Practices des Frameworks und integrieren sich in die Applikation. Schwierig wird es nur, wenn Entwickler versuchen, von diesem vordefinierten Angular-Weg abzuweichen. Dann arbeiten sie gegen das Framework.
React mit mehr Freiheiten für Entwickelnde
Wo Angular alles mitbringt, um eine SPA zu erstellen, und den Weg dahin vorzeichnet, lässt React seinen Nutzern großen Spielraum und ermöglicht es, leichtgewichtige und flexible Produkte zu entwickeln. Der Schwerpunkt von React, das eher Bibliothek als Framework ist, liegt nur darauf, grafische Oberflächen umzusetzen. Es stellt die grundlegenden Werkzeuge zur Verfügung, für alles Weitere sind die Entwickler jedoch selbst verantwortlich. Die Teams müssen die Lösungen entweder selbst implementieren oder auf bestehende Pakete außerhalb von React zugreifen. Dieser Umstand hat dazu geführt, dass sich um React ein aktives Ökosystem gebildet hat, das Lösungen in Form von Paketen für nahezu jede Anforderung bietet. Beispiele hierfür sind die Arbeit mit Formularen mit Bibliotheken wie Formik oder React Hook Form und die Navigation innerhalb einer Applikation mit React Router.