SPA Frameworks - ein Vergleich zwischen Angular, React und Vue

Beim Wandel des World Wide Webs hin zum Phänomen Web 2.0 wurde das Internet im Laufe der Jahre kontinuierlich durch neue innovative Technologien weiterentwickelt und ergänzt, die fortan vermehrt auf User Experience (UX) bauen und versuchen die Nutzerinteraktion immer mehr in den Mittelpunkt des Geschehens zu rücken.

Infolgedessen kam es neben der Weiterentwicklung des Internets zudem zu einem Wandel der Anwendungen, die fortan den Zweck verfolgen sollten, zunehmend interaktiver zu werden. Desktop-Anwendungen wurden allmählich von den klassischen Web-Anwendungen und diese wiederum von den sogenannten „Rich Internet Applications“ (RIAs) ersetzt, die als derzeitiger Standard der Web-Anwendungen dienen. RIAs versuchen dabei den Bedienkomfort, die Reaktionsgeschwindigkeit und die Offline-Fähigkeit von Desktop-Anwendungen mit der Verfügbarkeit und der einfachen Installation einer Web-Anwendung zu verknüpfen, um so eine bessere UX zu erzielen.

Eine spezielle Ausprägung von RIAs, die diese Gegebenheiten besonders gut umsetzt und bereits von Unternehmen wie Facebook, Google oder Instagram verwendet wird ist die sogenannte „Single-Page Application“ (SPA). Beim Single-Page Prinzip kommt es zu keinem kompletten Seitenwechsel mehr, wie es bei traditionellen Web-Anwendungen üblich ist, sondern einzig zu einer Änderung der Benutzeroberfläche, was zu einer direkten Reaktion auf Benutzereingaben bei gleichzeitiger Reduzierung der Wartezeit führt. Da sich bei SPAs im Gegensatz zu den klassischen Web-Anwendungen die Geschäftslogik, die mittels JavaScript umgesetzt wird, auf der Clientseite befindet, steigt auf dieser folglich die Komplexität an, was die Erstellung für den Entwickler aufwändiger und schwieriger gestaltet.

Um dieser Komplexität entgegenzuwirken und die Entwicklung von SPAs zu erleichtern, hat sich in den Jahren folglich ein wichtiges Hilfsmittel namens SPA Framework etabliert, das dem Entwickler ein Programmiergerüst, bestehend aus Bibliotheken einschließlich deren Funktionalitäten und Methoden, zur Verfügung stellt, um ihn bei der Implementierung von SPAs zu unterstützen. Aufgrund des anfangs beschriebenen kontinuierlichen Wandels des Webs, werden neben Web-Anwendungen auch SPA Frameworks ständig erneuert und verbessert. Dies hat inzwischen zu einer recht unübersichtlichen Entwicklung geführt. Um diesem Problem etwas entgegenzuwirken sollen nun drei der beliebtesten SPA Frameworks vorgestellt und anhand von vordefinierten Anforderungen bewertet werden.

Angular

Das 2016 von Google veröffentlichte Open-Source Framework Angular wurde mit dem Ziel entwickelt sich neben dem Erstellen von Webseiten, zunehmend auch für den Bereich der Cross-Plattform Entwicklung zu positionieren. Ein wichtiger Aspekt von Angular ist somit die Plattformunabhängigkeit, durch die das Framework auf mehreren Plattformen wie auf dem Desktop oder auf dem Smartphone angesprochen werden kann. Die Plattformunabhängigkeit ist auch eine der wichtigsten Eigenschaften von SPAs.

Angular bedient sich einer komponentenbasierten Architektur, die eine hohe Wiederverwendbarkeit von Komponenten in der gesamten Anwendung gewährleistet und besticht sowohl durch eine hohe Codequalität, als auch durch eine hohe Performance, die mitunter auf die hierarchische Dependency-Injection oder Angular Universal zurückzuführen ist. Zudem benutzt Angular serverseitiges Pre-Rendering, welches sowohl sicherstellt, dass alle Suchmaschinen auf die Inhalte der Anwendung zugreifen, als auch, dass Social-Media-Apps die Site-Previews korrekt darstellen können.

Schwächen von Angular sind zum einen der abnehmende Community Support, der sich mitunter sowohl in der Lerninteressens- als auch Nutzerzufriedenheitsrate bemerkbar macht und zum anderen die steile Lernkurve, die auf die Komplexität und Ausführlichkeit des Frameworks zurückzuführen ist.

Zusammenfassend lässt sich sagen, dass Angular ideal für Anwendungen auf Großunternehmensebene konzipiert ist. Dies liegt sowohl an TypeScript, durch dessen Tooling fortgeschrittene Autokomplettierungs-, Navigations- und Refactoring-Dienste zur Verfügung stehen, als auch an der Ausführlichkeit des SPA Frameworks, die eine große Lernkurve und viel Investition an Zeit mit sich bringt.

Stärken

• Plattformunabhängigkeit
• Komponentenbasierte Architektur
• Typescript
• Google Long-Term Support

Schwächen

• Community Support
• Komplexität
• steile Lernkurve

React

Im Gegensatz zu Angular, das ein effizientes SPA Framework bereitstellt, wurde mit React eine JavaScript Open-Source Library inklusive JSX-Compiler entwickelt, die hauptsächlich auf die Benutzeroberfläche ausgerichtet ist und es ermöglicht wiederverwendbare Komponenten zu erstellen. So bietet React eine UI-fokussierte Lösung, die den Benutzern letztendlich eine sehr reaktionsschnelle und flüssig ladende Oberfläche bietet.

Nachdem die JavaScript-Bibliothek 2013 als Open-Source-Tool veröffentlicht wurde, genoss sie aufgrund ihres revolutionären Ansatzes zur Programmierung von Benutzeroberflächen schnell große Beliebtheit. Hinter React steht nicht nur der Internet-Riese Facebook, sondern auch eine stetig steigende Community mit einem immensen Entwicklungstempo. React-Lösungen sind zum einen SEO-freundlich und bieten zum anderen durch die Verwendung des Virtual DOM eine hohe Performance und Flexibilität. Auch gestaltet sich das Programmieren für den Entwickler durch die Wiederverwendbarkeit von Komponenten und des unidirektionalen Datenflusses, der die Stabilität des Programmcodes gewährleistet, sowohl akkurat, als auch komfortabel.

Trotz der Tatsache, dass React aufgrund der Vielzahl von React-Tools eine relativ hohe Lernkurve mit sich bringt, macht es laut vieler Entwickler die App-Entwicklung dennoch einfach und verständlich und kann perfekt für die Erstellung einer erweiterten, modernen Benutzeroberfläche verwendet werden.

Da es sich bei React lediglich um ein JavaScript-Bibliothek handelt, ist allerdings anzumerken, dass es besser für die Entwicklung kleinerer Anwendungen geeignet ist, da es sich schwer gestalten kann für große Anwendungen die passenden Tools auszuwählen und zusammenzusetzen.

Stärken

• Virtual DOM
• Wiederverwendbarkeit von Komponenten
• Flexibilität
• Unidirektionaler Datenfluss
• Community Support

Schwächen

• Hohes Entwicklungstempo
• React-Ökosystem
• Komplexität (JSX)

Vue

Die 2016 erschienene zweite Version des Open-Source Framework Vue wurde vom Entwickler Evan You mit dem Ziel entwickelt, das Beste aus Angular und React zu vereinen, was ihm auch in vielen Punkten gelungen ist.

So bietet Vue eine bidirektionale Datenbindung, serverseitiges Rendering, TypeScript- und JSX-Unterstützung und eine ähnliche komponentenbasierte Architektur wie Angular. All diese Eigenschaften wurden zu einem handlichen, leichtgewichtigen Paket vereint, durch das Vue im Vergleich zu React oder Angular sowohl in Bezug auf Größe als auch Performance punkten kann.

Aufgrund der Kompatibilität mit anderen SPA Frameworks, der geringen Größe, der einfach gehaltenen Struktur und der umfangreichen Dokumentation, verlangt das Open-Source SPA Framework zudem eine sehr geringe Lernkurve, was den Einstieg in Vue immens erleichtert. So lässt sich, auch dank der guten CLI, ein Vue-Projekt in nur wenigen Zügen erstellen und eine Vue-Komponente leicht in bestehende Anwendungen integrieren.

Zudem besticht Vue durch seine Flexibilität im Datenfluss, da es sowohl eine bidirektionale Kommunikation, was die Handhabung von HTML-Blöcken erleichtert und beschleunigt, als auch eine unidirektionale Kommunikation, was bei der Arbeit mit verschiedenen Komponenten wichtig ist, unterstützt. Außerdem bedient sich Vue ähnlich React eines flexiblen Ökosystems, das individuell an die Anforderungen einer Applikation jeder Größe angepasst werden kann und dem Entwickler viele Freiheiten und die Möglichkeit bietet Vue mit verschiedenen Bibliotheken zu kombinieren. Zu viel Freiheiten und Flexibilität kann im Entscheidungsprozess allerdings auch einen Nachteil mit sich führen, da der Entwickler zwischen einer Vielzahl von möglichen nützlichen Bibliotheken die für sich am besten geeignete finden muss.

Alles in allem ist Vue besonders für die schnelle Entwicklung von plattformübergreifenden Lösungen geeignet. Es bietet sowohl eine Basis für anspruchsvolle SPAs, als auch eine vorteilhafte Lösung für Anwendungen bei denen die Performance einer guten Code-Organisation oder Anwendungsstruktur vorangestellt ist.

Stärken

• Komponentenbasierte Architektur
• Flexibilität
• Einfachheit
• geringe Größe
• geringe Lernkurve

Schwächen

• Community Größe
• Vue-Ökosystem

Angular vs. React vs. Vue

Da jedes der vorgestellten Frameworks sowohl unterschiedliche Funktionalitäten und Methoden, als auch unterschiedliche Vor- und Nachteile beinhaltet, ist es sehr schwer einen Gewinner bzw. ein „SPA Framework to go“ auszumachen. 

Um aber den Entscheidungsprozess für eines der vorgestellten Frameworks zu erleichtern macht es durchaus Sinn vordefinierte und auf den individuellen Anwendungsfall zugeschnittene Anforderungen an das Framework festzulegen und anhand derer die SPA Frameworks vergleichend zu gewichten. So kann letztendlich durch dessen Auswertung eine Entscheidung für das, bezüglich der Anwendung, am besten geeignete SPA Framework getroffen werden. Wichtige Anforderungen könnten zum Beispiel folgende sein:

• Es sollte eine modulare Architektur aufweisen und stabil sein.
  -> Angular, React, Vue
• Es sollte von großen Unternehmen und/oder Projekten unterstützt werden.
  -> Angular, React
• Es sollte flexibel sein und dem Entwickler viele Freiheiten geben.
  -> React, Vue
• Es sollte eine geringe Lernkurve und Entwicklungszeit aufweisen.
  -> Vue
• Es sollte eine möglichst einfache Struktur und eine geringe Größe besitzen.
  -> Vue, React
• Es sollte eine hohe Performance erzielen.
  -> Angular, React, Vue
• Es sollte eine leicht verständliche und umfangreiche Dokumentation haben.
  -> Angular, React, Vue
• Es sollte die Integration von Bootstrap ermöglichen.
  -> Angular, React, Vue
• Es sollte idealerweise erlauben HTML und CSS wiederzuverwenden.
  -> Angular, Vue

So würde anhand des Beispiels die Entscheidung vermutlich auf das SPA Framework Vue fallen, da es bis auf die Tatsache, dass es im Gegensatz zu Angular oder React nicht von Internetriesen wie Google oder Facebook, allerdings inzwischen von Unternehmen wie Alibaba oder Projekten wie Laravel unterstützt wird, alle Anforderungen erfüllt.

Da wir uns in der Welt des Internets allerdings in einem ständigen Wandel befinden, ist auch in den nächsten Jahren auf dem Markt an SPA Frameworks weiter mit viel Bewegung und Dynamik zu rechnen, was uns Entwicklern nur in die Karten spielt und ständig neue Chancen mit sich bringt.