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

von Markus Schwabeneder

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.

SEQIS GmbH
Abbildung: SEQIS GmbH

Artikel teilen
SEQIS News RSS
Autor
SEQIS Autor Markus Schwabeneder

Markus Schwabeneder

Senior Consultant

Newsletter

Um neue Beiträge per E-Mail zu erhalten, hier die E-Mail-Adresse eingeben.

Unsere Autoren

Informieren Sie sich über unsere Autoren und erfahren Sie mehr über unsere Spezialisten und ihre Fachbereiche:

Zu den Autoren

Sie haben eine Frage?

Zurück

Kommentare
(Bitte geben Sie eine gültige URL mit "http://" ein.)
  • SEQIS
  • Entwicklung von Responsive Web Apps: Welches Framework sollte man nutzen?
Zum Seitenanfang navigieren