Vergleich von JavaScript Frameworks / Runtime Compiler für eine Internet Booking Engine
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
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
Sie können auch lesen