Welches JavaScript Framework passt zu mir?

Eine der wohl am häufigsten gestellten Fragen im Bereich Webseitenentwicklung ist die Frage, welches Framework eingesetzt werden soll. In diesem letzten Beitrag der Blog-Serie “Welches JavaScript Framework passt zu mir?” werden die Vor- und Nachteile der in den vorherigen Beiträgen genannten Frameworks aufgelistet. Abschließend wird in einer Zusammenfassung ein Überblick darüber gegeben, in welchem Kontext welches Framework vorteilhaft ist.

Vorherige Posts der Blog-Serie:

React

Vorteile Nachteile
Komponentenbasiert und strukturiert Zusatzframeworks benötigt
Virtual DOM Projektstruktur
Community Ohne Erfahrung schnell unübersichtlich
Schneller Einstieg
Entwicklungsumgebung
Server Side Rendering

Komponentenbasiert und strukturiert

In React ist die Oberfläche komponentenbasiert. Das heißt, die Oberfläche setzt sich aus beliebig vielen Komponenten zusammen. Ziel ist es, diese Komponenten möglichst klein und unabhängig von ihrem Kontext zu halten, sodass sie jederzeit wiederverwendet werden können. Außerdem fördert diese feingliedrige Unterteilung die Lesbarkeit des Codes und vereinfacht das Unit Testen sowie die Wartbarkeit.

Virtual DOM

Die Manipulation des realen DOM-Baums ist träge. Daher wird in React ein virtueller DOM-Baum im Speicher gehalten. Bei Änderungen wird erst der virtuelle DOM-Baum manipuliert und anschließend wird der reale DOM-Baum mit dem virtuellen ersetzt. Dieses Vorgehen führt zu einem deutlichen Performancegewinn.

Community

Die Community hinter React wächst stetig. Im Stack Overflow Developer Survey 2017 geben 66,9% der Entwickler, die mit React zu tun hatten, an, dass sie weiterhin gerne mit React arbeiten wollen. Durch die sehr beständige API gewinnen auch immer mehr Entwickler Vertrauen in React. Beispielsweise beim Sprung von React Version 15 auf 16 fand eine grundlegende Neuimplementierung von React statt. Trotz des drastischen Umbaus gab es nur wenige Breaking Changes, was das Vertrauen in React verstärkt hat. Zudem verwenden mit Großunternehmen wie Facebook, Airbnb, eBay, Feedly und Flipkart viele bekannte Unternehmen React, von denen einige sogar zur Weiterentwicklung beitragen.

Schneller Einstieg

Da es sich bei React nur um eine Oberflächenbibliothek handelt, ist der Einstieg in reines React sehr schnell möglich. Dank Boilerplate Generatoren wie create-react-app kann man mit einem einzigen Kommandozeilenbefehl die komplette Infrastruktur aufsetzen. Anschließend kann sofort angefangen werden, Komponenten zu entwickeln.

Entwicklungsumgebung

Durch die große Community und die Popularität findet man überall Beispiele und Tutorials, die den Einstieg in React vereinfachen, aber auch komplexe Fragen beantworten. Entwicklungsumgebungen wie Webstorm unterstützen React und ECMAScript 6 und bieten in gewissem Maße Autovervollständigung an. Zudem gibt es für alle gängigen Browser Entwicklungs- und Testtools.

Server Side Rendering

React unterstützt Server Side Rendering, was neben Performancevorteilen auch SEO-Vorteile bringen kann. Will man beispielsweise Suchmaschinen außer Google unterstützen, ist Server Side Rendering vonnöten, da Google die einzige Suchmaschine ist, die JavaScript Code ausführt. Server Side Rendering bedeutet, dass die Webseiten auf dem Server zusammengebaut werden und nur noch die HTML-Struktur an den Client übertragen wird.

Zusatzframeworks benötigt

React ist eine reine Oberflächenbibliothek. Das heißt, dass für den produktiven Einsatz von React noch zusätzliche Frameworks eingesetzt werden. Die Anzahl an Frameworks für React ist enorm und unübersichtlich.

Projektstruktur

Aufgrund der unabdingbaren, zusätzlichen Frameworks und der fehlenden Standardisierung ist die Projektstruktur alleinig vom Entwickler abhängig. Selbst die Ordnerhierarchie ist reine Geschmackssache. Das hat zur Folge, dass ein Entwicklerteam dringend Vorgaben benötigt. Andernfalls wird ein Projekt schnell unübersichtlich und unstrukturiert.

Ohne Erfahrung schnell unübersichtlich

Komponenten werden in React in einer einzigen Datei definiert. Komplexe Logik und ein umfangreiches Template machen eine Komponente schnell unübersichtlich. Für Anfänger kann außerdem die ständige Verwendung von State und Properties verwirrend sein. Außerdem muss auch der Lifecycle der Komponenten einigermaßen bekannt sein, um zu verhindern, dass die Komponente unnötig erneut gerendert wird.

Angular

Vorteile Nachteile
Komponentenbasiert und strukturiert Zerrüttete Community
Typescript Viel veraltetete Dokumentation
Plattformübergreifend Schwieriger Einstieg
2-Wege-Databinding Kein VirtualDOM
Support von Web Components
Formularvalidierung

Komponentenbasiert und strukturiert

Angular ist wie React komponentenbasiert. Angular setzt allerdings noch eine Ebene der Kapselung auf React auf, sodass in Angular CSS-Dateien von Komponenten nur für die jeweilige Komponente gelten.

Typescript

Typescript ist ein typisiertes Superset von JavaScript. Typescript wird im Hintergrund in natives JavaScript kompiliert, bietet aber viele Features an, die mit nativem JavaScript nur sehr schwierig möglich sind. Durch die Typisierung ist auch die Unterstützung in der Entwicklungsumgebung deutlich besser, was gerade bei großen Projekten von Vorteil ist.

Plattformübergreifend

Es ist möglich, Angular zusammen mit NativeScript einzusetzen und somit native Apps zu entwickeln, aber dabei wie gewohnt Angular Code zu schreiben. Die einzige Änderung ist, dass man NativeScript UI Komponenten verwenden muss.

2-Wege-Databinding

Angular bietet nativ eine Unterstützung für 2-Wege-Databinding, ohne dass Zusatzcode geschrieben werden muss. 2-Wege-Databinding ist ein Feature, das man besonders in Webanwendungen benötigt, in denen Benutzer viele Eingaben durchführen.

Support von Web Components

Der Web Components Standard wächst stetig und wird immer populärer. Daher ist es vorteilhaft, dass in Angular neben Web Components auch Bibliotheken wie beispielsweise Polymer verwendet werden können.

Formularvalidierung

Wenn es sich bei der entwickelten Webapplikation nicht gerade um eine simple Portfolio-Seite sondern um eine Geschäftsanwendung handelt, werden meist jede Menge Formulare benötigt. Angular kommt standardmäßig mit einer Unterstützung für Formulare und sogar mit einer Formularvalidierung, die modular mit eigenen Validatoren erweitert werden kann. Anhand dieser Validatoren werden Eigenschaften, wie beispielsweise ob das Formular valide ist oder nicht, gesetzt und können entsprechend behandelt werden.

Zerrüttete Community

Mit dem Release von AngularJS (Version 1.x) wuchs die Beliebtheit von AngularJS immer weiter. Als mit Angular (Version >= 2) ein nahezu komplett neues Framework veröffentlicht wurde, teilte sich die Community zwischen AngularJS und Angular Benutzern auf. Der Stack Overflow Developer Survey 2017 fasst AngularJS und Angular unter dem Begriff “AngularJS” zusammen. In der Kategorie der beliebtesten Frameworks gaben 51,7% der Angular-Entwickler an, dass sie gerne weiterhin mit dem Framework arbeiten wollen. Die anderen 48,3% haben allerdings kein Interesse, weiter mit Angular zu arbeiten. Somit ist Angular gleichzeitig eines der beliebtesten Frameworks und eines der unbeliebtesten Frameworks.

Viel veraltete Dokumentation

Da Angular und AngularJS weitestgehend inkompatibel sind, muss man bei der Suche nach Beispielen und Dokumentation immer stark darauf achten, welche Version verwendet wird. Es kommt häufig vor, dass man auf Dokumentation zu AngularJS stößt, diese allerdings nicht eindeutig als solche erkennbar ist.

Schwieriger Einstieg

Angular ist ein sehr umfangreiches Framework. Durch den enormen Umfang hat Angular eine besonders starke Lernkurve. Hinzu kommt die Verwendung von Typescript. Für reine JavaScript Entwickler öffnet sich mit TypeScript eine neue Welt. Wer allerdings bereits Erfahrungen mit Java oder C# hat, kann TypeScript leichter verwenden, als natives JavaScript.

Kein VirtualDOM

Bei Oberflächenmanipulationen verändert Angular den tatsächlichen DOM-Baum. Andere Frameworks wie React und Vue halten im Hintergrund einen virtuellen DOM-Baum, auf dem Manipulationen deutlich schneller gehen, und ersetzen anschließend nur noch den echten mit dem virtuellen DOM-Baum.

Vue

Vorteile Nachteile
Leichtgewichtig Zusatzframeworks benötigt
Einfache Integration Wenig Mitwirkende
Umfangreiche Dokumentation Sprachbarriere
2-Wege-Databinding

Leichtgewichtig

Das Ziel von Vue war es, die wichtigsten Features in einer leichtgewichtigen Bibliothek abzubilden. In komprimierter Form hat Vue nur beeindruckende 18 KB, aber dennoch einen guten Funktionsumfang.

Einfache Integration

Vue kann nicht nur dazu genutzt werden, Single Page Applications (SPA) zu entwickeln, sondern auch Komponenten für andere Projekte zu entwickeln und sie dort einfach verwenden zu können.

Umfangreiche Dokumentation

Vue hat eine ausgiebige Dokumentation, die extrem einsteigerfreundlich ist. Es reichen lediglich grundlegende HTML und JavaScript Kenntnisse, um mithilfe der Dokumentation einzusteigen. Zusätzlich stellt sich Vue dem Vergleich zu anderen Frameworks in der offiziellen Dokumentation.

2-Wege-Databinding

2-Wege-Databinding ist eines der grundlegenden Features, die der Entwickler von Vue unbedingt in Vue integrieren wollte. Vue bietet ohne den Einsatz zusätzlicher Frameworks die Möglichkeit, ein Eingabefeld im Template mit einem Wert des Controllers zu verknüpfen.

Zusatzframeworks benötigt

Vue ist – genau wie React – eine reine Oberflächenbibliothek. Für komplexe Anwendungen, die zustandsbehaftet sind, werden Zusatzframeworks benötigt.

Kleine Community

Vue hat von den vorgestellten Frameworks die wenigsten Mitwirkenden. Man kann zwar aufführen, dass zu viele Köche den Brei verderben, allerdings kann eine kleine Entwicklergruppe auch dazu führen, dass ein Projekt schneller eingestellt wird.

Sprachbarriere

Vue erfreut sich besonders im chinesischen Raum an großer Beliebtheit. Dementsprechend sind viele Frameworks und viel Dokumentation auf Chinesisch.

Ember

Vorteile Nachteile
Datenorientiert Konventionen wichtig
Generatoren Abhängigkeiten zu jQuery
Sehr viele Addons Lange Einarbeitung
Klare Projektstrukturen Sehr viele Addons

Datenorientiert

Ember ist datenorientiert und dazu ausgelegt, in einfachster Art und Weise mit einem Datenspeicher oder Remote Server zu kommunizieren. Beispielsweise kann Ember ohne das Schreiben von zusätzlichem Code einen JSONApi standardkonformen Server als Datenspeicher verwenden.

Generatoren

Mithilfe des Ember Command Line Interface (CLI) kann ganz einfach ein Ember Projekt aufgesetzt oder um Module erweitert werden.

Sehr viele Addons

Ember besitzt eine Schnittstelle für Addons. Entwickler können einfach Addons entwickeln und der Community bereitstellen. Aufgrund der schieren Menge an Addons gibt es für nahezu alle Anwendungsfälle auch ein Addon.

Klare Projektstrukturen

Ember setzt ganz klar auf Konventionen. So auch in der Projektstruktur. Ember sucht nach bestimmten Modulen wie Services und Models an klar definierten Dateipfaden, wodurch jedes Ember Projekt gleich aufgebaut ist.

Konventionen wichtig

Die oben genannten Konventionen sollten in Ember keinesfalls verändert werden. Möchte man beispielsweise einen nicht JSONApi-konformen Server als Backend System nutzen, muss auch hier viel eigener Code geschrieben werden.

Abhängigkeiten zu jQuery

Viele Addons bringen einen nahezu Klon von jQuery mit. Außerdem wird innerhalb von Ember ebenfalls jQuery verwendet.

Lange Einarbeitung

Ember hat von den vorgestellten Frameworks den größten Einarbeitungsaufwand. Das ist allerdings der Tatsache geschuldet, dass Ember auch den größten Funktionsumfang besitzt. Allerdings wird die Einarbeitung in Ember auch dadurch nicht erleichtert, dass man bei der Recherche häufig auf veraltete Dokumentation stößt.

Sehr viele Addons

Dieser Punkt ist sowohl ein Vor- als auch ein Nachteil. Dadurch, dass die Addon-Entwicklung von Ember so einfach ist, gibt es unwahrscheinlich viele Addons, die nur kleine Spielereien sind und nicht für den produktiven Einsatz in Frage kommen.

3… 2… 1… Fight!

In der Blog-Serie wurden die Frameworks React, Angular, Vue und Ember betrachtet. Im Nachfolgenden findet ein direkter Vergleich zwischen den einzelnen Frameworks hinsichtlich verschiedener Projektmerkmale oder persönlicher Präferenzen statt.

Ein wichtiger Aspekt bei der Auswahl eines JavaScript Frameworks ist die Community des jeweiligen Frameworks. Einfach nur eine möglichst große Community zu haben, ist meist ein nicht ausreichendes Kriterium, da auch eine große Community Nachteile hat. Beispielsweise ist die Angular Community die wohl größte von allen. Allerdings ist sie durch den Sprung von AngularJS zu Angular gespalten. Die Community hinter React wächst aufgrund der stetig steigenden Popularität des Frameworks immer weiter und die Anzahl der Mitwirkenden steigt ebenfalls. Mit über 1000 Contributors besitzt React auch mit Abstand die größte Anzahl an aktiven Entwicklern. Ob das ein gutes Zeichen ist, ist persönliche Einstellung. Vue hat mit nur knapp unter 200 Mitwirkenden nicht einmal ein Fünftel der Entwickler von React, Ember liegt mit knappen 700 im Mittelfeld.

Dient die zu entwickelnde Webanwendung der reinen Anzeige von Daten, muss ein Backend verwendet werden. Meist bedeutet dies, dass sehr viel zusätzlicher Code zur Kommunikation und Synchronisierung von Client und Server geschrieben werden muss. Ember setzt sich an dieser Stelle stark von seinen Mitbewerbern ab und bietet mit sogenannten Stores eine Möglichkeit, sämtliche Serverkommunikation ohne zusätzlichen Code durchzuführen. Um das gewährleisten zu können, muss das Backend allerdings Standards einhalten. Sind diese Standards nicht eingehalten, ist an dieser Stelle – genau wie bei allen anderen Frameworks – zusätzlicher Code notwendig.

Besonders bei der Einarbeitung wird oft die Dokumentation zu Rate gezogen. Auch hier finden sich starke Unterschiede in Qualität und Quantität zwischen den einzelnen Frameworks. Aufgrund der Ähnlichkeit der Namen von AngularJS und Angular findet man häufig Dokumentation, die für AngularJS und somit nicht mehr auf Angular übertragbar ist. Besonders für Neueinsteiger ist allerdings nicht immer sofort deutlich, dass es sich um Dokumentation für AngularJS handelt. Aufgrund der häufigen Verwendung von Vue im chinesischen Raum stößt man an dieser Stelle immer wieder auf chinesische Dokumentation.

Der Projektumfang spielt auch eine große Rolle bei der Wahl eines Frameworks. Hierbei sind viele Faktoren, wie beispielsweise die Wartbarkeit, Individualität oder die Größe des Frameworks, zu betrachten. Für kleine Projekte ist aufgrund der geringen Größe und Modularität der Einsatz von React und Vue besser geeignet. Durch deren Modularität kann der Funktionsumfang genau so erweitert werden, dass alle Anforderungen abgedeckt werden. Für Großprojekte sind Angular oder auch Ember praktikabler. Angular bietet eine TypeScript Unterstützung. Mit Hilfe von TypeScript kann auch komplexer Code lesbarer und auch wartbarer gehalten werden. Ember eignet sich durch seine starke Standardisierung für große Projekte. Da jedes Ember-Projekt gleich aufgebaut und strukturiert ist, finden auch neue Entwickler schnell in das Projekt und können produktiv werden. Im Gegensatz hierzu steht React, bei dem es nahezu keine Vorgaben oder Standards zur Strukturierung von Projekten gibt. Daher ist jedes Projekt anders und neue Entwickler finden nur schwer in das Projekt.

Viele Entwickler wollen beim Lernen eines neuen Frameworks schnelle erste Ergebnisse sehen. Angular und Ember bieten von Haus aus mehr Funktionalität als React und Vue und besitzen dementsprechend zumindest anfangs eine höhere Lernkurve. Da sich Ember auch in seinen Konzepten von allen anderen Frameworks absetzt, entsteht hier am meisten Einarbeitungsaufwand. Möchte man allerdings Vue oder React produktiv einsetzen, werden zusätzliche Frameworks benötigt, durch die dann nachträglich mehr Einarbeitungsaufwand anfällt.

Häufig sind besonders Business-Anwendungen voll von Eingabeformularen. Besonders sensitive Daten müssen bereits clientseitig validiert werden, sodass der Benutzer direktes Feedback zu seinen Eingaben bekommt. Angular kommt standardmäßig mit einer Formularunterstützung, die sogar Validierungen anbietet. Zudem können eigene Validierungsmethoden erstellt werden, wodurch auch komplexe Formulare ausreichend geprüft werden können. Derartige Formularunterstützung ist React, Vue und Ember nur durch zusätzliche Frameworks/Addons möglich. Müssen die Formulare nicht validiert werden, eignen sich Angular, Vue und Ember gleichermaßen, da alle das 2-Wege-Databinding unterstützen, welches das Verwalten von Formularen vereinfacht. React hingegen verzichtet auch auf das 2-Wege-Databinding. Daher fällt bei der Erstellung von Formularen mit React der meiste Aufwand an.

Investiert man viel Geld in ein Projekt, soll dieses auch lange eingesetzt werden können. Daher ist es wichtig, auf ein Framework zu setzen, das auch in allzu naher Zukunft noch existiert. Logischerweise kann man nicht in die Zukunft blicken und genaue Aussagen treffen. Allerdings ist ein guter Indikator dafür, dass ein Framework nicht von heute auf morgen eingestampft wird, welche Großunternehmen dahinterstehen oder das Framework einsetzen. Alle genannten Frameworks werden mittlerweile von Großunternehmen eingesetzt. Allerdings stehen mit Facebook hinter React und Google hinter Angular zwei der größten Firmen hinter den Frameworks.

Häufige Neuerungen sind Ärger und Segen zugleich. Einerseits ist es toll, immer die neusten Features einsetzen zu können, allerdings kann es auch nervtötend sein, sich ständig in Neuerungen einarbeiten zu müssen. Ember ist im Gegensatz zu React, Angular und Vue zurückhaltender, was das Einführen von neuen Features angeht. Auch wenn in Ember neue Webstandards schnell etabliert werden, lassen neue Features meist etwas länger auf sich warten.

Viele Neueinsteiger in der Webentwicklung haben bereits Vorerfahrungen in der Programmierung außerhalb des Webs. Gerade Java und C# Entwicklern fällt der Einstieg in die Webentwicklung mit Angular leichter, da sie TypeScript verwenden können. Das liegt einerseits an der vergleichbaren Syntax, andererseits aber an der Typsicherheit, die sie gewohnt sind. Um Typsicherheit auch in React einsetzen zu können, gibt es neben dem Standardfeature Typings auch eine Flow-Integration.

Auch native Anwendungen sind trotz der stetigen Weiterentwicklung von Webanwendungen für Mobilgeräte in der heutigen Zeit nicht wegzudenken. Mittels Wrappern, wie beispielsweise Cordova, können mithilfe von allen betrachteten Frameworks native Anwendungen entwickelt werden. Außerdem bietet React mit React Native, Angular mit Ionic und Vue mit NativeScript beliebte Alternativen zu Zusatztools wie Cordova.

Aber… welches Framework passt denn nun zu mir?

Gute Frage! Um die Antwort so einfach wie möglich zu halten: Zusätzlich zu der Blog-Serie gibt es auch einen Fragebogen, der anhand von einfachen Fragen eine Entscheidungshilfe gibt, welches Framework am besten auf die angegeben Anforderungen und Präferenzen passt. Die Erfahrung zeigt, dass jedes Projekt seine eigenen Tücken hat. Daher sollte das Ergebnis des Fragebogens nicht auf die Goldwage gelegt, sondern nur als Orientierungshilfe für weitere Recherchen verwendet werden.

Hier geht’s zum Fragebogen!

Quellen

Short URL for this post: https://wp.me/p4nxik-2Wo
This entry was posted in Web as a Platform and tagged , , , , , . Bookmark the permalink.

One Response to Welches JavaScript Framework passt zu mir?

Leave a Reply