Vergleich von JavaScript Frameworks / Runtime Compiler für eine Internet Booking Engine

Vergleich von JavaScript Frameworks / Runtime Compiler für

                                   eine Internet Booking Engine

Abbildung 11

                         Autor: Fabian Krutsch
                         Matrikelnummer: 3123355
                         1. Betreuer: Prof. Dr. rer. nat. Alexander Voß
                         2. Betreuer: Henry Ziegelmann
                         Datum: 14.12.2018

1   Abbildung 1: https://jelvix.com/blog/top-10-best-javascript-frameworks-list-in-2017, 27.11.2018
                                                                                                      1

Eidesstattliche Erklärung

Hiermit versichere ich, dass ich die Seminararbeit mit dem Thema „Vergleich von JavaScript
Frameworks / Runtime Compiler für eine Internet Booking Engine“ selbstständig verfasst und keine
anderen als die angegebenen Quellen und Hilfsmittel benutzt habe, alle Ausführungen, die anderen
Schriften wörtlich oder sinngemäß entnommen wurden, kenntlich gemacht sind und die Arbeit in
gleicher oder ähnlicher Fassung noch nicht Bestandteil einer Studien- oder Prüfungsleistung war. Ich
verpflichte mich, ein Exemplar der Seminararbeit fünf Jahre aufzubewahren und auf Verlangen dem
Prüfungsamt des Fachbereiches Medizintechnik und Technomathematik auszuhändigen.

Aachen, den ____________________

Fabian Krutsch

                                                                                                  2

Inhalt
Abkürzungen und Begrifflichkeiten ......................................................................................................... 4

Motivation ............................................................................................................................................... 5

Frameworks ............................................................................................................................................. 6

   Vorstellung .......................................................................................................................................... 6

       AngularJS ......................................................................................................................................... 6

       React ................................................................................................................................................ 6

       Angular ............................................................................................................................................ 7

       Vue.js ............................................................................................................................................... 7

       Marko .............................................................................................................................................. 7

       Svelte ............................................................................................................................................... 7

Vergleich .................................................................................................................................................. 8

   Kriterien ............................................................................................................................................... 8

   Dokumentation und Community......................................................................................................... 8

   Möglichkeiten zur Migration oder Neubau ....................................................................................... 11

   Perfomancestrategien und –vergleiche ............................................................................................ 11

       Server Side Rendering ................................................................................................................... 12

       Dynamic Import ............................................................................................................................. 12

       Tree Shaking .................................................................................................................................. 12

       Polyfill Erkennung .......................................................................................................................... 12

       Performancevergleiche ................................................................................................................. 13

   Funktionalitäten der Frameworks und weitere Tools ....................................................................... 16

       Entwicklung über Web hinaus ....................................................................................................... 17

       Hilfreiche Tools & Libraries ........................................................................................................... 17

   Test-Frameworks ............................................................................................................................... 18

Resultat.................................................................................................................................................. 19

Ausblick ................................................................................................................................................. 20

Quellen .................................................................................................................................................. 21

Appendix................................................................................................................................................ 22

                                                                                                                                                             3

Abkürzungen und Begrifflichkeiten
 API                – Application programming interface: eine Schnittstelle zum Anbinden
                     an das Softwaresystem
 Back-End           – der Code, der auf dem Server ausgeführt wird. Meistens wird es für
                     das Anbinden an Datenbanken und als Sicherheitsmechanismus
                     genutzt
 Boilerplate Code   – Code, der wegen Konventionen oder syntaktischer Anforderung
                     regelmäßig auftaucht
 Bugs               – Fehler im Programmiercode
 Bundle-Größe       – die Größe einer gebündelten Datei (z.B. mehrere JavaScript Dateien)
                     um Netzwerkanfragen zu minimieren
 Compiler           – übersetzt Quellcode in direkt ausführbaren Computercode
 devdoc             – eine beliebte offline API
 DOM                – Document Object Model: Baumstruktur einer HTML Seite
 Ecosystem          – ein struktureller Aufbau von Softwaresystemen mit Fokus auf
                     Skalierbarkeit und Nachhaltigkeit
 ECMAScript         – der Standard für JavaScript Sprach-Spezifikationen
 Framework          – Programmiergerüst zum Entwickeln neuer Anwendungen
 GitHub             – bietet verteilte Versionsverwaltung im Internet an
 IBE                – Internet Booking Engine: Ein Buchungssystem im Internet für
                     Reiseleistungen
 IDE                – Integrated Development Environment: integrierte
                     Entwicklungsumgebung
 IIFE               – Immediately-invoked function expression: eine Funktion, die sich nach
                     der Initialisierung in einen eigenen Geltungsbereich ausführt
 JSX                – Syntax-Erweiterung um DOM Elemente mittels JavaScript zu rendern
 Lighthouse         – ein Google-Tool im Browser zum Analysieren der Applikation auf
                     Performance, Barrierefreiheit und mehr
 npm                – Node Package Manager: beliebter Paketmanager
 PWA                – Progressive web application – eine Webapplikation, die besondere
                     Funktionalitäten hat (z.B. Offline Funktionalität), damit eine native App
                     anfühlt
 SEO                – Search Engine Optimization: Optimierung von Applikationen, um ein
                     besseres Ranking auf Suchmaschinen zu erzielen

                                                                                             4

SPA                        – Single Page Application: ausschließlich der benötigte Inhalt wird
                                 dynamisch nachgeladen (anstelle von Seitenwechsel)
    Stack Overflow             – eine beliebte Internetplattform für Fragen zum Thema
                                 Softwareentwicklung
    Thread                     – hier: Beitragsstrang
    TypeScript                 – eine Open-Source-Programmiersprache von Microsoft, die für
                                 Objektorientierung entworfen wurde und eine Obermenge von
                                 JavaScript nach ECMAScript-2015-Standard ist. Transkompiliert zu
                                 JavaScript
    UWP                        – Universelle Windows-Plattform: eine Plattform zum Entwickeln von
                                 Windows 10, Windows 10 Mobile, Xbox One und HoloLens Apps
    VR                         – Virtuelle Realität – interaktive virtuelle Umgebung

Motivation
Traveltainment ist ein Unternehmen der internationalen Amadeus IT Group SA und der IT-Partner für
den Reisevertrieb. Für Online-Reiseleistungen werden überwiegend Webapplikationen in der
Kommunikation zum Endkunden eingesetzt. Zum Bauen einer Webapplikation können Frameworks
genutzt werden, damit wiederholte Tätigkeiten vereinfacht werden und die Wiederverwendung von
Code und die Selbstdokumentation der Software-Entwicklung gefördert werden. 2 Die betrachteten
Frameworks sind in JavaScript oder TypeScript geschrieben, denn diese Programmiersprache wird von
allen gängigen Browsern unterstützt und auch im Back-End eingesetzt (Node.js). Die Auswahl der
JavaScript Frameworks ist beträchtlich, denn die Community wächst kontinuierlich und sowohl die
Sprache als auch die Frameworks werden weiter entwickelt. Das intern eingesetzte Framework ist
AngularJS, welches allerdings nicht weiterentwickelt wird und für das nur bis 2021 Sicherheitsupdates
zur Verfügung gestellt werden. 3 Des Weiteren kann dieses Framework nicht mit der Performance
neuerer Frameworks mithalten. 4 Es ist daher für eine sichere und moderne Weiterentwicklung des
Produktes notwendig die interne Basis auf eine neue und moderne Plattform zu stellen.

2 vgl. Wikipedia, Web framework https://de.wikipedia.org/wiki/Webframework , 27.11.2018
3 „Stable AngularJS and Long Term Support“, https://blog.angular.io/stable-angularjs-and-long-term-support-
7e077635ee9c, 11.12.2018
4 “Migrating from AngularJS to React — how do you measure your performance gains?”

https://medium.freecodecamp.org/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455,
27.11.2018
                                                                                                                 5

Frameworks
Im Weiteren werden alle Open-Source-Frameworks betrachtet, die nicht in einer Alpha oder Beta
Entwicklungsphase sind, eine gewisse Anzahl an Downloads haben (gemessen an npm) und eine aktive
Weiterentwicklung anstreben. Die drei bekanntesten dafür sind React, Angular und Vue.js. Weitere
Frameworks, die performant sind und die oben gelisteten Attribute vertreten, sind Marko, da es auch
von einem Konzern angetrieben wird, und Svelte, da es einen anderen Lösungsweg einschlägt und
dadurch Traktion auf vielen Internetplattformen hervorruft.

Vorstellung
AngularJS
AngularJS ist das aktuell genutzte clientseitige Framework für die IBE. Es
wurde 2009 von Google Inc. veröffentlicht und verwendet jQuery Lite. Das
Framework nutzt das Model-View-Controller-Strategiemuster um die Präsentationsschicht von der
Daten- und der Logikschicht zu trennen. Mittels Dependency Injection können Services, Directives und
mehr eingebunden werden. AngularJS unterstützt two-way data binding und bietet keine
Rückfallebene, wenn JavaScript deaktiviert ist. Eine nennenswerte App seitens Traveltainment ist die
Basic IBE.5

React
React ist eine User-Inferface Bibliothek von Facebook, die seit September 2017
unter der MIT-Lizenz läuft. Hier hat man Komponenten, die ihren eigenen
Zustand managen, um das reaktive Programmieren zu gewährleisten, und
JavaScript und HTML mittels JSX einkapseln. Die Benutzung von JSX ist allerdings
optional. Zusätzlich werden Änderungen an Kopien des DOMs (virtual DOMs)
ausgeführt bis die Render-Funktion von React ausgeführt wird, die dafür sorgt, dass die Änderungen
der Bäume an dem eigentlichen DOM ausgeführt werden. Da React nur eine UI Bibliothek ist, müssen
weitere Bibliotheken eingebunden werden, um es zum vollständigen Framework zu machen. React
unterstützt one-way data binding. Nennenswerte Apps sind: Facebook, Instagram, AirBnb, Discord,
Tesla, Pinterest.6

5   http://basic-ibe.traveltainment.de, 11.12.2018
6   https://github.com/facebook/react/wiki/Sites-Using-React, 12.12.2018
                                                                                                  6

Angular
Angular ist der Nachfolger von AngularJS und wird vom selbigen Entwicklerteam bei
Google Inc. entwickelt. Das Framework adressiert die üblichen Probleme beim
Bauen einer SPA. Allerdings wurde Angular von Grund auf neu entworfen und in
TypeScript programmiert. Es werden Komponenten genutzt, die in die
Applikation eingebunden werden können. Für das reaktive Programmieren wird
die Bibliothek RxJS genutzt und two-way data binding unterstützt. Nennenswerte Apps sind: Angular,
Microsoft Customers, vielfache Google Dienste (z.B. Google Cloud7), BitPay, VMware, NBA.8

Vue.js
Vue.js wurde 2014 von Evan You, einem ehemaligen Entwickler bei Google Inc.,
erstellt und ist ein progressives Framework, das auch ein virtuelles DOM,
optionale Unterstützung von JSX und Komponenten nutzt. Diese Komponenten
enden mit .vue und beinhalten CSS, HTML und JavaScript. Allerdings ist es auch
möglich in der klassischen Technologientrennung zu entwickeln. Zusätzlich versucht
Vue.js schlank und wertfrei zu sein, um universell eingesetzt werden zu können. Das Framework
unterstützt one-way und two-way data binding. Für das reaktive Programmieren werden Getter und
Setter für Objekte und ab Version 3 Proxies genutzt. Nennenswerte Apps sind: Facebook Newsfeed,
GitLab, Laravel Nova, Rivalry.9

Marko
Marko ist ein Framework von eBay Inc. und nutzt auch Komponenten, welche
die Logik, das Template und die Styling-Datei beinhalten. Marko versucht
Boilerplate Code zu eliminieren. Zusätzlich arbeitet Marko auch mit einen
virtuelles DOM und wurde bei weiteren Funktionalitäten von React inspiriert.

Svelte
Svelte wurde 2016 von Rich Harris ins Leben gerufen und ist ein Runtime
Compiler: es kompiliert während des Builds zu optimalen JavaScript Code.
Dabei werden kleine Standalone-Komponenten erzeugt, die in eine
Webapplikation jedes Frameworks eingebunden werden können. Für das reaktive Programmieren
werden Getter und Setter auf die Komponenten bei Zustandsänderungen genutzt. Es besteht die
Intention die Reaktivität mittels des Compilers zu optimieren.10

7 https://cloud.google.com, 11.12.2018
8 https://www.madewithangular.com, 12.12.2018
9 https://madewithvuejs.com/, 12.12.2018
10 https://github.com/sveltejs/rfcs, 12.12.2018

                                                                                                7

Vergleich
Kriterien
Im Vordergrund sollte die Entwicklung und Wartbarkeit stehen, denn je komfortabler die Erweiterung
einer umfangreichen Applikation ist, desto zufriedener sind die Entwickler, die Kunden und die
Benutzer. Die Entwicklung und die Wartbarkeit werden durch das Ecosystem des Frameworks und
durch die Unterstützung der Community verstärkt. Auch Möglichkeiten zum Testen und
Entwicklungswerkzeuge können den Entwickler helfen. Im Folgenden werden diese Punkte analysiert:

       Dokumentation und Community
       Möglichkeiten zur Migration oder Neubau
       Perfomancestrategien und –vergleiche
       Funktionalitäten der Frameworks und weitere Tools
       Test-Frameworks

Dokumentation und Community
Die Anzahl der Downloads der Frameworks wird in Abbildung 2 dargestellt. An der Ordinatenachse
kann die Anzahl als Interesse interpretiert werden und somit als die Häufigkeit der Nutzung dieses
Frameworks in der Liveumgebung. In dem Zeitraum hat sich die Anzahl der Downloads für React mehr
als verdoppelt, bei Angular und Vue.js verdreifacht und bei Svelte verzehnfacht.

Abbildung 2: Anzahl an Downloads bei npm von 24.12.2017 bis 09.12.2018 11

11   https://www.npmtrends.com/react-vs-vue-vs-svelte-vs-marko-vs-@angular/core, 12.12.2018
                                                                                                8

Abbildung 3: Google Trends: weltweites Interesse im zeitlichen Verlauf12

Bei Google Trends ist zu erkennen, dass zu Beginn am meisten nach Angular gesucht wurde. Sichtbar
ist auch, dass das Interesse bezüglich React steigt. Wenn der Suchbegriff vuejs zu vue abgeändert wird,
ist zu erkennen, dass Vue.js mehr Datenverkehr als React oder Angular bei Google erzielt. Die
Einbrüche in Dezember werden wahrscheinlich durch die Feiertage in der Weihnachtszeit verursacht.

An der GitHub-Statistik ist festzustellen, dass jedes der Frameworks regelmäßig gewartet wird. Die
Sterne stellen eine Art ‚Like‘ oder auch ‚Gefällt mir‘ dar und symbolisieren somit den Hype des
Frameworks. Weitergehend interessant ist auch die Anzahl der Issues. Diese werden genutzt um Bugs
zu tracken oder um Verbesserungen vorzuschlagen. Die Anzahl der Issues zu Angular ist größer als die
Summe der Issues der anderen Frameworks.

Abbildung 4: GitHub Vergleich13

12   https://trends.google.de/trends/explore?q=react,angular,vue,marko,svelte, 14.12.2018
13   https://www.npmtrends.com/react-vs-vue-vs-svelte-vs-marko-vs-@angular/core, 22.10.2018
                                                                                                     9

Bei der Developer Survey von Stack Overflow14 liegt React in der Rubrik „Most Loved, Dreaded, and
Wanted Frameworks, Libraries, and Tools“ mit 69,4% der Stimmen auf Platz 2. Angular kann man in
dieser Auflistung bei 54,6% finden. Bei Fragen und Antworten können auf dieser Plattform bei Angular
140000, bei React 112000, bei Vue.js 26000 und bei Svelte und Marko unter 100 Threads gefunden
werden. Aus Entwicklersicht ist es hilfreich, Lösungen auf Stack Overflow zu finden, allerdings ist eine
zu große Anzahl an Threads kein gutes Indiz, denn das könnte die Handhabung des Frameworks in
Frage stellen.

Zu jedem der oben genannten Frameworks ist ausreichend viel Dokumentationen, Beispiele, Design-
Konzepte und ein FAQ-Bereich auf GitHub bzw. auf den eigenen Seiten der Frameworks vorhanden.
Zusätzlich bieten Angular, React und Vue.js Dokumentation auf devdoc an.

Dokumentation, Beispiele oder Best Practices findet man in der Community auf den Blog Seiten
‚Medium‘ und ‚Hackernoon‘. Mittels Suchfilter von Google kann die Anzahl der Artikel zu den
jeweiligen Frameworks verglichen werden.

Abbildung 6: Google-Suchergebnisse für Blog-Seiten15

14https://insights.stackoverflow.com/survey/2018/, 07.11.2018
15Beispiellink:
https://www.google.de/search?source=hp&ei=PnD9W4TjM4exrgSAzbOACw&q=react+site%3Amedium.com&btnK=Google-
Suche&oq=react+site%3Amedium.com&gs_l=psy-ab.3...23604.29992..30205...0.0..0.107.1669.20j1......0....1..gws-
wiz.....0..0j0i131j0i22i30j0i19.36pzrBUnEh4, 27.11.2018
                                                                                                         10

Möglichkeiten zur Migration oder Neubau
Da Angular von Grund auf neu programmiert wurde, muss die Komplexität der Migration vorerst
analysiert werden. Grundsätzlich gilt, dass für die Migration auf Angular alle Controller und Directives,
die in AngularJS zur Veränderung des Verhaltens von DOM-Elementen genutzt werden, zu
Komponenten umgeschrieben werden müssen. Sämtlicher JavaScript-Code muss zu TypeScript-Code
umgewandelt werden und AngularJS-Syntax muss aus allen JavaScript- und HTML-Dateien entfernt
werden. Darüber hinaus müssen IIFEs mit Import/Export-Modulen ausgetauscht werden; Factories
und Services werden je nach Fall zu Klassen und mehr. Das liegt auch daran, dass Angular nicht mehr
dem Model-View-Controller-Strategiemuster folgt. Auf der Seite von Angular wird eine
Dokumentation zur Migration angeboten.16 Ein Lösungsansatz für die Migration zu React oder zu Vue.js
ist es Komponenten zu bauen, die iterativ in AngularJS importiert werden. Als Resultat wäre die finale
Migration einfacher. Mit diesem Konzept wäre es möglich alle Erweiterungen während der Migration
in das kommende Framework mit einzubauen.

Durch neue Designs und veränderte Prioritäten könnte bei einem Neubau die Lesbarkeit,
Verständlichkeit und Wartbarkeit verbessert werden. Des Weiteren ist es möglich die Applikation nach
dem Mobile-First-Ansatz zu entwickeln, da die Anzahl der mobilen Benutzer zunimmt. Durch den
Neubau könnten Bugs entstehen, die davor nicht vorhanden waren. Der größte Vorteil beim Neubau
ist die Möglichkeit den Code wiederverwendbar zu machen – für den Fall, dass das Framework erneut
gewechselt werden sollte. Hier bietet Svelte einen guten Lösungsweg an: alle geschriebenen
Komponenten werden in JavaScript-Code kompiliert. Der Vorteil dieser Komponenten ist es, dass sie
in jedem Framework eingesetzt werden können.

Perfomancestrategien und –vergleiche
Für eine Durchschnittsapplikation im Internet werden für die Desktopnutzung 420KB JavaScript
verschickt. 17 Für die IBE werden in der Liveumgebung 785KB JavaScript verschickt5 und durch
kontinuierliche Erweiterungen der IBE erhöht sich diese Zahl. In einigen Fällen kommen noch Third
Party Scripts und JavaScript durch den Header des Kunden hinzu. Ein weiterer Perfomancefaktor ist
die Anzahl der Elemente im DOM. Nach der Lighthouse Dokumentation von Google Inc.18 sollte ein
DOM weniger als 1500 Knoten haben. Auf der Hotelseite der IBE konnten mit der Codezeile
document.getElementsByTagName('*').length 3200 Knoten festgestellt werden. Es
sollte nicht vergessen werden, dass die Performance der Applikation ein Faktor für die Zugänglichkeit

16 https://angular.io/guide/upgrade, 27.11.2018
17 https://httparchive.org/reports/state-of-javascript, 29.11.2018
18 https://developers.google.com/web/tools/lighthouse/audits/dom-size, 29.11.2018

                                                                                                      11

sein kann.19 Um den Problematiken entgegenzuwirken, werden im Folgenden Performancestrategien
erläutert, die die Frameworks mitbringen.
Server Side Rendering
Bei Server Side Rendering wird die Applikation bereits auf dem Server ausgeführt: alle
Netzwerkanfragen werden vorabgerufen, daraus statische Dateien generiert und an den Benutzer
geschickt. Der geschaffene Vorteil ist, dass der Browser des Benutzers weniger JavaScript
herunterladen und ausführen muss, was dazu führt, dass die Seite schneller interaktiv ist. Ein weiterer
Vorteil ist SEO. Da Inhalte der Applikation nicht mittels JavaScript nachgeladen werden, kann die
Applikation von Webcrawler/Searchbots höher bewertet werden.
Dynamic Import
Mit Dynamic Import können Ressourcen erst bei Bedarf geladen werden. Falls ein Benutzter kurz vor
der Interaktion mit einer Komponente steht, könnte diese dynamisch geladen werden. Dadurch wird
die Bundle-Größe reduziert und Dienste wie Datenbanken werden nicht ungenutzt angefragt.

Tree Shaking
Durch die Analyse eines Bundlers können nicht genutzte Codestellen und nicht genutzte Imports aus
der Bundle-Datei entfernt werden. Dadurch kann der Benutzer schneller mit der Applikation
interagieren.

Polyfill Erkennung
Da es einige Browser gibt, die nicht mehr gewartet werden, können JavaScript-Spracherweiterungen
von Entwicklern nur genutzt werden, wenn die Entwickler diese Browser bewusst vernachlässigen,
zum Beispiel bei zu wenigen Benutzern, oder wenn der Code mittels eines Workarounds (Polyfill)
nachgereicht wird. Ein Polyfill könnte wie folgt aussehen:

if (!Array.prototype.find) {
    Object.defineProperty(Array.prototype, 'find', {…}
}

Mit diesem Konzept könnten, je nach Browser, mehrere Megabyte JavaScrip-Code an den Benutzer
geschickt werden. Um das zu verhindern, gibt es Services, die den Quellcode und den Browser
analysieren, um somit die benötigten Polyfills zu erkennen und diese an die betroffenen Browser
zuschicken. 20

19   https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4, 23.11.2018
20   https://polyfill.io, 12.12.2018
                                                                                                    12

Performancevergleiche
Performance ist schwer allgemein zu messen, da es von den DOM-Operationen der Applikation
abhängt. Deswegen folgt eine Statistik für das initiale Laden einer Applikation.

Abbildung 8: Startup Vergleich21

Erkennbar wird, dass sich die Performance für den Startup von AngularJS zu Angular nur leicht
verbessert hat. An Abbildung 8 kann die Zeit in Millisekunden für das Arbeiten der CPU, des Netzwerks,
das Zerlegen, das Kompilieren und das Ausführen abgelesen werden.

                                                                                                   13

Abbildung 9: Speicherverbrauch21

In Abbildung 9 variieren die Werte für flüchtigen Speicher von 2,2 bis 11,4 MB. Bei der Benutzung
mehrerer Apps könnte das den Speicher eines mobilen Gerätes schnell füllen. Auch Server Side
Rendering verschiedener Seiten für mehrere Kunden könnte eine Performance-Beeinträchtigung für
den/die Server darstellen. React und Vue.js nutzen ungefähr gleich viel Speicher, während Svelte etwa
die Hälfte an dessen nutzt.

In Abbildung 10 werden diverse DOM Operationen verglichen. Die meist genutzte Operation in der IBE
ist das Manipulieren und Austauschen (Entfernen und Hinzufügen) der Elemente in der View
Komponente durch AngularJS. In diesen Zeilen( ‚clear… ‘ und ‚swap… ‘) hat Angular schlechtere Werte
als die anderen Frameworks. Insgesamt hinterlassen Vue.js und Svelte den besten Eindruck.

21   https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html, 09.11.2018
                                                                                                             14

Abbildung 10: DOM Operationen21

                                  15

Die in Abbildung 11 gemessene Größe bezieht sich auf die simple Ausgabe von „Hello World“ – also
die Mindestgröße, die dem Benutzer zugeschickt werden muss, damit das Framework funktioniert.
Produktion bedeutet, dass das Framework den JavaScript Code mittels eines Bundlers wie webpack,
rollup    oder    parcel     zusammenführt    und   verkleinert.   Dabei   können     oben    genannten
Performancestrategien verwendet werden.

Abbildung 11: Lokaler Test der Frameworks15

Funktionalitäten der Frameworks und weitere Tools
Mittels React, Angular, Vue.js und Svelte können Web Components entwickelt werden. Eine weitere
Möglichkeit ist es Web Components in diesen Frameworks einzubinden. Web Components sind
wiederverwendbare und benutzerdefinierte HTML Elemente, die ihre Funktionalität und ihr Styling-
Verhalten einkapseln. Routing ist eine weitere Funktionalität und wird bis auf Marko von allen
Frameworks angeboten. Da Routing eine Voraussetzung der IBE ist, entfällt Marko aus der Auswahl.
Die verbleibenden Frameworks bieten Support für Server Side Rendering, allerdings wird auf
aufbauende Frameworks verwiesen, wie z.B. Next.js oder Gatsby für React, Angular Universal, Nuxt.js
für Vue.js oder bei Svelte Sapper (befindet sich noch in der Entwicklung). Ein zusätzlicher Vorteil dieser
Frameworks ist das vorkonfigurierte Setup für das Entwickeln von Code für Livesysteme. Eine PWA
kann nativ von React und Vue.js mit der Kommandozeile initialisiert werden. Bei Svelte funktioniert
das in Verbindung mit Sapper, aber bei Angular entfällt diese Möglichkeit. React, Angular und Vue.js
bieten TypeScript-Support an. Die internen Komponenten von Angular wurden in dieser Sprache
geschrieben; für Vue.js ist das für Version 3 geplant. Dynamische Imports und Tree Shaking werden in

                                                                                                       16

den Frameworks von webpack organisiert, allerdings wird Tree Shaking in Angular in einer kommenden
Version mit dem Ivy Render optimiert werden.

Entwicklung über Web hinaus
React Native erlaubt die Entwicklung von Applikationen für Android, iOS und UWP mit React. Bei React
Native wird nicht mit dem virtuellen DOM gearbeitet, sondern mit einem Prozess, welcher im
Hintergrund läuft und den JavaScript-Code für das Endgerät interpretiert. Um PWA oder Hybrid Apps
mittels Angular zu bauen, wird das Ionic Framework oder NativeScript genutzt. Vue.js hat auch die
Möglichkeit NativeScript, Quasar oder das sich aktuell noch in Entwicklung befindende Weex zu
benutzen. Es besteht auch die Möglichkeit VR-Projekte mit Angular und einer Bibliothek von
Drittanbieter zu entwickeln.

Hilfreiche Tools & Libraries
Jedes genannte Framework ünterstützt die Editoren/integrierten Entwicklungsumgebungen Visual
Studio Code, WebStorm/PhpStorm, Atom und Sublime Text. Bei diesen handelt es sich um die meist
benutzten Editoren für die Webentwicklung22. Beliebte Ergänzungen für React sind MobX und Redux.
Diese werden für das Managen von Zuständen genutzt. Bei Vue.js kann dafür Vuex genutzt werden
und für weitere Lösungsmöglichkeiten für Reaktivität kann RxJs bei Vue.js eingebunden werden.
Zusätzlich bietet Vue.js auch die Möglichkeit an JSX einzubinden. Mittels JSX kann geschriebener Code,
z.B. HTML, von Compilern optimiert werden. Außerdem werden alle Werte in JSX escaped bevor sie
gerendert werden – dadurch werden Cross-Site-Scripting Attacken verhindert. Eine weitere
Unterstützung zum Entwickeln sind Browser-Erweiterungen für React und Vue.js. Auf GitHub und npm
findet man beliebte Module für wiederverwendbare Komponenten, die meistens in Bootstrap, Bulma
oder Material Design gestylt sind. Insgesamt konnten 71800 Packages auf npm für React, 26300 für
Angular (mit AngularJS), 19800 für Vue.js und 200 für Svelte gefunden werden. 23 Die genannten
Frameworks unterstützen ebenso Internationalisierung (i18n), webpack, babel und eslint in den
neusten Versionen. Mittels babel ist es möglich modernen JavaScript oder TypesScript Code in
ECMAScript 2015+ Code zu transkompilieren. So kann sichergestellt werden, dass auch ältere Browser
die Applikation ausführen können. Mit dem Programmierwerkzeug eslint kann Quellcode auf
stilistische und syntaktische Fehler analysiert werden. Webpack kann genutzt werden, um Dateien
(meist JavaScript) zu transformieren, zu bündeln und Aufgaben – wie Tree Shaking und Dynamic Import
– zu erteilen.

22 https://2018.stateofjs.com/other-tools/#text_editors, https://www.makeuseof.com/tag/javascript-editors-make-coding-
easier/, 29.11.2018
23 https://www.npmjs.com/search?q=

                                                                                                                   17

In diesem Abschnitt wurde ersichtlich, dass Framework-Entwickler versuchen, die Laufzeit im Browser
zu minimieren, indem vieles schon vor oder während dem Build Prozess geschieht. Just-in-time-
Kompilation wird zu Ahead-of-time-Kompilation. Bestätigt wird das von der Community und den
zunehmenden Hilfestellungen von Bundler und weiterer Entwicklungswerkzeuge.

Abbildung 11: Twitter Post eines Entwicklers im React-Team24

Test-Frameworks
Mit der Bibliothek Enzyme werden in React Integrationsstests ermöglicht. Für UI-Tests ist Jest eine
gute Möglichkeit, da dieses Framework Tests mit Snapshots anbietet. Unit Tests werden mit React-unit
erstellt. In Angular können mittels Karma und Jasmine Unit- und Integrationstests erstellt werden.
Möglich ist das für Services und Komponenten. Bei Karma wird ein Webserver geschaffen auf dem der
Quellcode läuft und auf dem diverse Browser verbunden werden können. Die grafische Oberfläche
zeigt dann an, ob der Test erfolgreich oder erfolgslos war. Ein weiteres Tool zum Testen von Angular
Applikationen ist Protractor: damit können End-to-End-Tests erstellt und geprüft werden. Auch bei
Vue.js wird Karma und Mocha für das Testen von Units benutzt. Für Integrations und End-to-End-Tests
können Cypress oder Nightwatch genutzt werden.

Die Entwickler bei Traveltainment haben bereits durch AngularJS Test Erfahrungen in Protractor und
Karma sammeln können. Daher wird das Testen bei einer Angular-Applikation leichter fallen als bei
den anderen Frameworks. Bei Svelte eignet sich Cypress für Unit- und End-to-End-Tests.

24
     https://twitter.com/trueadm/status/944908776896978946, 29.11.2018
                                                                                                 18

Resultat
React hat den Vorteil, ein sehr großes Ecosystem mit vielen Unterstützern zu haben. Das Framework
bietet die Flexibilität, Module auszutauschen, sogar die UI Bibliothek, also den Kern von React, um zu
Preact oder Inferno o.ä. zu wechseln. Bei Angular hätte man den Vorteil, Komponenten von Amadeus
IT Group wiederverwenden zu können. Zudem haben viele Mitarbeiter von Traveltainment
Erfahrungen mit Angular. Wie auch React bietet Vue.js eine große Flexibilität durch die Anzahl der
Packages und Erweiterungen. Von Bedeutung ist auch seit zwei Jahren zunehmende Wachstum. Svelte
verfolgt mit dem Fokus eines Compilers einen sinnvollen Ansatz und erzielt damit gute Benchmark-
Werte und Bundle-Größen. Ein weiterer Punkt für Svelte ist, dass erstellte Komponenten in jedem
Framework genutzt werden können. Der Nachteil des Frameworks bleibt allerdings die geringe Anzahl
der Entwickler und die Tatsache, dass Angular, React, Vue.js oder andere Frameworks die Ideen von
Svelte aufnehmen und eventuell verbessern könnten, denn von einem Konzern unterstützte Open-
Source-Frameworks scheinen von der Community bevorzugt aufgenommen zu werden. Man erkennt
auch, dass die Frameworks viele Funktionalitäten teilen. Beispielweise wird die Bibliothek RxJs in
React, Angular und Vue.js zur Verfügung gestellt, JSX kann in React und Vue.js benutzt werden und
TypeScript in Angular, React und Vue.js. In der Performance gibt es keine zu großen Differenzen. Wie
in den Kriterien schon erwähnt, sollte das Hauptmerkmal die Einfachheit für den Entwickler sein.
Schließlich soll das Framework nicht nur den Code organisieren, sondern auch die Möglichkeit bieten,
Ideen simpel im Code ausdrücken zu können und dabei skalierbar zu sein. Das setzt ein sinnvolles
zugrundeliegendes Design und eine verständliche API voraus.

Nach der Evaluation des Verfassers wurde eine Applikation mittels React und Vue.js entworfen und
implementiert. Dabei wurde auf Templates, Data Binding, Routing, Ausführen von Funktionen vor dem
Routing, Data Fetching, das Auslesen und Schreiben von URL-Parametern und auf eine Art Decorator
eingegangen. Bei React konnten die Komponenten top-down entwickelt werden. Die eingesetzten
Technologien wurden nicht nach Auszeichnungssprache und Logik aufgeteilt, wie es üblicherweise und
auch bei Vue.js der Fall ist, sondern nach dem Anliegen. Wenn eine Komponente Logik enthält, kann
das leicht eingesehen und bearbeitet werden. Gerade durch JSX konnte die Auszeichnungssprache
einfach in JavaScript verwendet werden (Abbildung 13). Dadurch musste weniger Framework-
spezifische   Syntax   erlernt   werden.    Insgesamt    konnte    React   mit   dem     funktionalen
Programmierparadigma und dem gängigen und zukünftigen Support herausragen.

                                                                                                   19

Ausblick
React arbeitet mit Teams für Chrome und Webstandards zusammen. Momentan wird versucht, den
Prozess des Aktualisierens des DOMs mittels Web Worker nebenläufig zu machen.25 Des Weitern hat
der Ersteller von webpack ein babel Plug-In veröffentlicht, dass React-Komponenten zu DOM-
Anweisungen kompiliert (ähnlich wie Svelte). Dadurch könnte React interessanter werden.

Um die hier gebauten Applikationen weitergehend zu verbessern, sollten Tests hinzugefügt werden,
Best Practices implementiert und Entwicklungswerkzeuge detaillierter konfiguriert werden. Weitere
Web-Performance-Strategien sollten verfolgt werden und die Skalierbarkeit und Struktur des Projektes
sollten kritisch hinterfragt werden. Für das Aufsetzen einer neuen IBE müsste zusätzlich das
bestehende Whitelabel-Konstrukt angepasst werden.

25
     https://youtu.be/mDdgfyRB5kg?t=771, 02.12.2018
                                                                                                 20

Quellen
https://insights.stackoverflow.com/survey/2018/

https://javascriptreport.com/

https://www.npmtrends.com/

https://insights.stackoverflow.com/trends

https://2017.stateofjs.com/2017/front-end/worldwide/

https://stateofjs.com/

https://trends.google.de/trends/explore

https://github.com/krausest/js-framework-benchmark

https://de.wikipedia.org/wiki/Webframework

https://de.wikipedia.org/wiki/React

https://github.com/facebook/react

https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

https://angular.io/guide/architecture

https://en.wikipedia.org/wiki/Angular_(application_platform)

https://vuejs.org/v2/guide/

https://github.com/vuejs/vue

https://vuejs.org/v2/guide/comparison.html

https://www.ebayinc.com/stories/blogs/tech/the-future-of-marko/

https://markojs.com/

https://github.com/coatue-oss/react2angular

https://www.npmjs.com/

https://trends.google.de/trends/

https://httparchive.org/reports/state-of-javascript

                                                                     21

Appendix

Abbildung 12: Das Verzeichnis der Frameworks im Vergleich

Bei React wurden 207 Zeilen JavaScript und HTML geschrieben. Für die gleiche Applikationen in Vue.js
sind es 277 Zeilen. Für diese Applikation konnte bei React eine Bundle-Größe von 44KB und bei Vue.js
81KB gemessen werden.

                                                                                                 22

Abbildung 13: Komponenten im Vergleich

                                         23