SPA Frameworks – welches ist am besten geeignet?

Frontend-Entwicklung beginnt damit, das richtige Javascript-Framework auszuwählen. Diese erleichtern die Arbeit deutlich. Doch welches Framework ist für das anstehende Projekt am besten geeignet?

Im Internet ist die User Experience immer weiter in den Vordergrund gerückt und hat sich zu einem der wichtigsten Erfolgsfaktoren von Webseiten und -applikationen aufgeschwungen. User sollen sich schnell zurechtfinden und leicht mit Seiten und Applikationen interagieren können. 

Mit den neuen technischen Möglichkeiten wurden Desktop-Anwendungen allmählich von klassischen Web-Anwendungen und diese wiederum von so genannten „Rich Internet Applications“ (RIAs) ersetzt, dem derzeitigen Standard der Web-Anwendungen. RIAs verbinden den Bedienkomfort, die Reaktionsgeschwindigkeit und die Offline-Fähigkeit von Desktop-Anwendungen mit der Verfügbarkeit und der einfachen Installation einer Web-Anwendung, 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). Das Single-Page-Prinzip besagt, dass es keinem kompletten Seitenwechsel mehr gibt, wie es bei traditionellen Web-Anwendungen üblich ist, sondern nur eine Änderung der Benutzeroberfläche. Dadurch kann die App direkt auf Benutzereingaben reagieren und Wartezeiten für Nutzer reduzieren. Da sich bei SPAs - im Gegensatz zu klassischen Webanwendungen - die Geschäftslogik, die mittels JavaScript umgesetzt wird, auf der Client-Seite befindet, steigt auf dieser die Komplexität an. Das macht es für Entwickler*innen aufwändiger und schwieriger diese umzusetzen.

Um der Komplexität entgegenzuwirken und die Entwicklung von SPAs zu erleichtern, hat sich ein wichtiges Hilfsmittel namens SPA-Framework etabliert. Es bietet ein Programmiergerüst bestehend aus Bibliotheken einschließlich deren Funktionalitäten und Methoden. Da die Entwicklung im Internet nicht stehen bleibt, werden neben den Webanwendungen selbst auch SPA-Frameworks ständig erneuert und verbessert. Wir geben einen Überblick über die beliebtesten SPA-Frameworks und bewerten sie anhand von vordefinierten Anforderungen.

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 Code-Qualitä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 steile 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 wachsende 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 ist das Programmieren durch die Wiederverwendbarkeit von Komponenten und den unidirektionalen Datenfluss, der die Stabilität des Programmcodes gewährleistet, komfortabel und führt zu akkuraten Ergebnissen.

Trotz der Tatsache, dass React aufgrund der Vielzahl von React-Tools eine relativ steile Lernkurve erfordert, macht es die App-Entwicklung einfacher und verständlicher.

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, ist es einfacher in die Verwendung dieses Open-Source SPA-Frameworks einzusteigen. 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. Es unterstützt 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. Zudem bedient sich Vue ähnlich wie React eines flexiblen Ökosystems, das individuell an die Anforderungen einer Applikation jeder Größe angepasst werden kann und Entwickler*innen 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 sein, da Entwickler*innen aus einer Vielzahl von möglichen nützlichen Bibliotheken die für sie am besten geeignete finden müssen.

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 eine größere Rolle als eine gute Code-Organisation oder Anwendungsstruktur spielt.

Stärken

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

Schwächen

• Community Größe
• Vue-Ökosystem

Angular vs. React vs. Vue

Da jedes der vorgestellten Frameworks unterschiedliche Funktionalitäten und Methoden bietet und die Vor- und Nachteile ebenso abweichen, ist es nicht einfach einen Gewinner bzw. ein „to-go SPA-Framework“ auszumachen. 

Um aber den Entscheidungsprozess bei der Auswahl eines der vorgestellten Frameworks zu erleichtern, ist es sinnvoll vordefinierte und auf den individuellen Anwendungsfall zugeschnittene Anforderungen an das Framework festzulegen und anhand derer die SPA-Frameworks vergleichend zu gewichten. Auf diese Weise kann eine Entscheidung für das am besten geeignete SPA-Framework für ein Projekt getroffen werden. Anforderungen für die Gewichtung können 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 Entwickler*innen viele Freiheiten geben
  -> React, Vue
• Es sollte eine flache Lernkurve haben und wenig Entwicklungszeit erfordern
  -> 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 erlauben HTML und CSS wiederzuverwenden
  -> Angular, Vue

Bei dieser Liste hat Vue tendenziell die Nase vorn, da es bis auf die Tatsache, dass es nicht von Internetriesen wie Google oder Facebook vorangetrieben wird, alle Kriterien erfüllt. Sollte euer Anforderungskatalog anders sein oder es in einem Projekt zusätzliche Anforderungen geben, wird das Ergebnis eventuell anders ausfallen. Und da sich das Web sowieso schnell weiterentwickelt, werden auch die SPA-Frameworks bald anders aussehen, oder es werden neue Schwergewichte hinzukommen. 

Wichtig ist, dass die Entscheidung für ein Framework nicht aufgrund subjektiver Vorlieben getroffen wird. Jedes Projekt hat die beste Lösung verdient.