Entwicklung von Responsive Web Apps: Welches Framework sollte man nutzen?

14.04.2021 13:10

Wie immer in der Software-Entwicklung stellt sich schnell die Frage, auf welche Technologien bzw. Frameworks man setzen sollte. Der Frage gehe ich in diesem Artikel nach. Damit hier der Rahmen nicht völlig gesprengt wird, konzentriere ich mich auf die drei meist verbreitetsten, auf JavaScript aufbauenden, Frameworks, namentlich Angular, React und Vue.js. Ich werde am Ende eine einfache Entscheidungshilfe anbieten, in der natürlich auch meine subjektive, aber faktenbasierte Meinung einfließt.

Zuerst aber werde ich kurz auf die Begrifflichkeiten eingehen und auch eine Übersicht über die Unterschiede und Eigenschaften dieser Frameworks geben.

Progressive Web App

Eine Progressive Web App (= PWA) ist eigentlich einfach eine Website mit der Besonderheit, dass sie, wenn man auf sie mit einem mobilen Endgerät zugreift, viele Funktionen bietet, die früher nur native Apps hatten. So kann man eine PWA unter anderem auch “installieren”, also sie als Icon auf dem Homescreen anzeigen oder mittels “Push Notifications” Nachrichten an den User schicken, auch wenn er die App gerade nicht benutzt.

Vorteile

Es reicht eine gemeinsame Website für alle Plattformen zu programmieren, man muss keine zusätzlichen Apps für iOS und Android schreiben.
Man ist nicht an die Stores von Apple oder Google gebunden, man kann auch Microtransactions durchführen, ohne einen Obolus an Dritte entrichten zu müssen.

Nachteile

Man kann die Stores von Apple oder Google nicht zum Verteilen nutzen.
Man ist an die Kompatibilität des auf dem Gerät installierten Browsers gebunden, Chrome und Firefox bieten derzeit eine 100%-Unterstützung an, Safari als Browser bedeutet noch diverse Einschränkungen.

Angular

Eigenschaften

“Vater” dieses Frameworks ist das noch immer verbreitete, aber nicht mehr weiterentwickelte, “AngularJS”
Trotz der namentlichen Ähnlichkeit zu “AngularJS” sind beide nicht kompatibel und der Umstieg bedeutet mehr Aufwand und Probleme als man vermuten könnte
Erscheinungsjahr 2016
Aktuelle Version 11.2.4
Ist Open-Source, wird aber von Google entwickelt und gewartet
Der Code ist TypeScript, eine Erweiterung zu JavaScript. JavaScript-Programme sind gültige TypeScript-Programme, aber nicht umgekehrt

Vorteile

Weit verbreitet und erprobt
Viele erfahrene Entwickler
Gut dokumentiert
Stabil und gut gewartet
“Schweizer Taschenmesser”, bietet viele Funktionen, für die die Konkurrenz sich weiterer Frameworks bedient

Nachteile

Hohe Lernkurve
Großer monolithischer Block, der nicht sehr gut auf die eigenen Bedürfnisse reduziert werden kann
Dadurch auch etwas längere Ladezeiten
TypeScript wird benötigt, nur JavaScript-Kenntnisse sind im Normalfall nicht ausreichend
Hat ein etwas angestaubtes Image

React

Eigenschaften

Erscheinungsjahr 2013
Aktuelle Version 17.0.1
Ist Open-Source, wird aber von Facebook entwickelt und gewartet
Java-Script-Code mit sogenannten JSX (Javascript XML)-Tags als Erweiterung

Vorteile

Weit verbreitet und erprobt
Gut dokumentiert
Stabil und gut gewartet
Moderate Lernkurve
Prinzipiell Entwicklung auch mit “plain” JavaScript möglich, JSX ist optional
Bietet mit dem Programm npx eine einfache Möglichkeit, über die Kommandozeile bereits funktionierende Web Apps zu konstruieren, die dann angepasst und erweitert werden können
Das Rendering der Seiten ist extrem schnell, da eine Technologie namens Virtual-DOM benutzt wird, die aufwendige Operationen auf dem echten DOM (der Struktur) der HTML-Seite vermeidet

Nachteile

Viele Funktionen müssen über PlugIns erst hinzu konfiguriert werden
Die große Auswahl von Third-Party-PlugIns kann verwirrend sein und man kann sich in den vielen Möglichkeiten, ein- und dieselbe Aufgabe zu lösen, verlieren

Vue.js

Eigenschaften

Erscheinungsjahr 2014
Aktuelle Version 3.0.7
Ist Open-Source, es steht kein großes Unternehmen dahinter, sondern wird hauptsächlich durch die Community entwickelt und gewartet
Bietet über sogenannte Direktiven die Möglichkeit, HTML-Code und JavaScript-Code verschmelzen zu lassen

Vorteile

Gut dokumentiert
Flache Lernkurve
Prinzipiell Entwicklung auch mit “plain” JavaScript möglich
Direktiven erlauben es, sehr viel Funktionalität schon im HTML zu deklarieren, damit können auch Laien mit HTML-Kenntnisse eventuell Anpassungen vornehmen beziehungsweise den Code besser verstehen und nachvollziehen
Das Rendering der Seiten ist extrem schnell, auch Vue.js nutzt ein Virtual DOM
Sehr leichtgewichtiges Framework, dass sich sehr gut an die Bedürfnisse anpassen lässt und nur benötigte Funktionalität lädt
Hat ein sehr modernes und fortschrittliches Image
Ist laut Github das unter den Entwicklern beliebteste (nicht meist verwendete) Framework

Nachteile

Weniger Support als die beiden Alternativen
Viele Funktionen müssen über PlugIns erst hinzu konfiguriert werden.
Weniger erfahrene Entwickler am Markt
Weniger etabliert

Entscheidungshilfe

Ich habe mir eine Tabelle überlegt, die Ihnen vielleicht bei der Entscheidung zwischen den Frameworks hilft. Überlegen Sie sich, wie wichtig die einzelnen Eigenschaften für Sie sind und bestimmen Sie einen Faktor dafür (0 - unwichtig bis 3 - sehr wichtig) und multiplizieren Sie die Werte in der entsprechenden Zeile damit. Dann addieren Sie die Werte für jedes Framework und das mit den meisten Punkten ist ein guter Kandidat als Basistechnologie für ihre Progressive Web App.

^{Abbildung: SEQIS GmbH}