Front-End-Webentwickler müssen mehrere Entscheidungen treffen und aus vielen Optionen wählen. Wir müssen entscheiden, welche Art von Tooling wir einsetzen, welche Programmiersprache wir verwenden und welches CSS-Framework wir einbinden wollen. Doch keine dieser Entscheidungen ist so einflussreich wie die Wahl des UI-Frameworks.
Die Auswahl an Frameworks hat in den letzten Jahren stetig zugenommen, und es kommen regelmäßig neue und spannende Möglichkeiten hinzu. Seit 2019 bleiben die „großen Drei“ jedoch konstant. Angular, React und Vue stehen nach wie vor im Vordergrund. Unter der Oberfläche haben sich diese Programme jedoch drastisch weiterentwickelt.
Angular
Angular ist ein vollständiges Framework, das auf einem Muster namens Dependency Injection basiert. Bei diesem Muster registriert Angular Dienste, die das Framework dann an andere Dienste, Module oder Komponenten weitergibt, wenn das System sie verwendet. Dependency Injection ist eine Funktion, die am häufigsten in Sprachen mit statischer Typisierung, wie Java oder C#, zu finden ist.
Darüber hinaus verwendet Angular das universelle Rendering. Diese Funktion ermöglicht es uns, Angular in einem Browser, einem Server oder einer mobilen Anwendung zu rendern. Beliebte Frameworks wie Ionic und NativeScript verlassen sich vollständig auf diese Funktion. Angular verfügt außerdem über eine automatische Codeaufteilung, die von den meisten Entwicklern inzwischen eher als Notwendigkeit denn als Bequemlichkeit angesehen wird.
Anwendungsbereich Angular
Angular zielt in erster Linie auf den Unternehmenssektor ab. Daher bietet es von Haus aus respektable architektonische Grenzen – Konfiguration oder Konvention regeln alles. Da Angular-Projekte dazu neigen, viele bewegliche Teile zu enthalten, ist ihre primäre Verwendung für größere Anwendungen auf Unternehmensebene.
React
Das primäre Verkaufsargument von React war schon immer seine minimale API, die es relativ einfach macht, es zu benutzen. Unter der Oberfläche haben der unidirektionale Fluss und die flexiblen Rendering-Bereiche dafür gesorgt, dass es seinen Wettbewerbsvorteil beibehalten hat.
Gegenwärtig ist das Komponentenmodell von React sein wichtigstes Merkmal. Der meiste React-Code verwendet funktionale Komponenten, d.h. Funktionen mit einer festen Signatur (Empfang von Props und Rückgabe eines React-Elements). React orchestriert diese Komponenten mit Hilfe von Hooks, die die konsistente und flexible Wiederverwendung von funktionalen Aspekten fördern.
Diese gewonnene Flexibilität zahlt sich aus. React rendert sowohl auf dem Server als auch auf statischen Seiten oder mit einzigartigen Streaming-Server-Komponenten reibungslos. Der Hydrierungsprozess sorgt für eine beeindruckende Geschwindigkeit beim ersten Laden selbst der interaktivsten Webanwendungen.
Anwendungsbereich React
Facebook führte React ein, um die UI-Entwicklung zu vereinfachen. Später entdeckten die Entwickler, dass sich das unidirektionale Modell auf jede beliebige Benutzeroberfläche außerhalb des Webs ausdehnen lässt. Folglich hat React mehrere andere Richtungen erforscht, darunter die Unterstützung nativer mobiler Anwendungen und die Erstellung von PDFs.
Obwohl React auf alle Arten von Anwendungen anwendbar ist, zeichnet es sich durch die Konzentration auf große Single-Page-Anwendungen aus.
Vue
Vue teilt viele Funktionen, die React und Angular sehr attraktiv machen. Eine beliebte Funktion von Angular ist die Zwei-Wege-Datenbindung. Während Angular dies jedoch mit „Zonen“ (eingeführt durch zone.js) oder explizit mit einem ChangeDetectionRef-Dienst erreicht, führt Vue die Zwei-Wege-Datenbindung implizit mit Gettern und Settern durch. Dieser Ansatz bewahrt die Leistung, während alles natürlicher fließt.
Im gleichen Sinne führte Vue Single-File-Components (SFC) ein, die ein bestimmtes Dateiformat (*.vue) in Verbindung mit HTML-Tags verwenden, um Dateien in drei Teile zu unterteilen. Ein Teil ist das Skript-Element für den eigentlichen JavaScript-Code. Ein weiterer ist das Template-Element, das angibt, was gerendert werden soll. Der dritte Teil ist das style-Element, das alle CSS-Elemente enthält.
Diese einzelnen Dateikomponenten lassen sich gut kombinieren und bilden eine konsistente Einheit. Außerdem ermöglicht die SFC die Verwendung von JSX, um zum Beispiel andere Komponenten zu rendern, die von anderswo importiert wurden.
Schließlich hat Vue die Composition API eingeführt, um die Wiederverwendbarkeit – zum Beispiel in Bezug auf den Lebenszyklus einer Komponente – in den Entwicklungsprozess einzubringen. In mancher Hinsicht ähnelt dies dem Ansatz von React, Hooks zu verwenden.
Anwendungsbereich Vue
Vue erweist sich als äußerst entgegenkommender Mittelweg für diejenigen, denen Angular zu expansiv und React zu begrenzt ist. Es versteht sich eher als Bibliothek denn als Framework. Vue ist also ideal für mittelgroße Anwendungen.