Titelaufnahme

Titel
Angular 2 vs. React JS : JavaScipt Frontend Libraries im Vergleich
Weitere Titel
Angular 2 vs. React JS JavaScipt Frontend Libraries im Vergleich
VerfasserSellemond, Fabian
Betreuer / BetreuerinGöschka, Karl Michael
Erschienen2017
Datum der AbgabeJuni 2017
SpracheDeutsch
DokumenttypBachelorarbeit
Schlagwörter (DE)Angular / React / Spring-Boot / Frontend-Development / TypeScript / JavaScript / RESTful Web-Service / JSON / MySQL / Performance / Benchmarks
Schlagwörter (EN)Angular / React / Spring-Boot / Frontend-Development / TypeScript / JavaScript / RESTful Web-Service / JSON / MySQL / Performance / Benchmarks
Zugriffsbeschränkung
 _
Klassifikation
Zusammenfassung (Deutsch)

Die vorliegende Bachelor-Arbeit besch¨aftigt sich mit einem Performance-Vergleich zwei-

er popul¨arer Frameworks der Frontend-Entwicklung. Dabei wird die zweite Version des

beliebten Angular Frameworks von Google der JavaScript Library React aus dem Hau-

se Facebook gegen¨uber gestellt.

Zuerst wird anhand ausf¨uhrlicher Literatur-Recherche das Ph¨anomen des Web 2.0

beleuchtet. Der Begriff an sich, sowie technologische Weiterentwicklungen zu dessen

Vorg¨anger werden beschrieben. Dabei wird deutlich, dass die Benutzerfreundlichkeit

von Web-Applikationen - besonders im E-Commerce Bereich - einen großen Beitrag zu

der allgemeinen Reputation von Unternehmen, sowie der Kunden-Loyalit¨at beitragen

kann. Beide Frameworks schaffen bei dem Erreichen maximaler Usability Abhilfe.

Die Umsetzung moderner Web-Applikationen in Form von Single Page Applications

wird diskutiert, wobei zwischen unterschiedlichen Entwurfs-Paradigmen - wie Model-

View-Controller, Model-View-ViewModel und Virtual DOM - unterschieden wird. Be-

sonders die Methodik des Virtual DOMs, welches bei dem React-Framework zum Ein-

satz kommt, ist aufgrund des internen Differ-Algorithmus, bei dem zwei virtuelle Re-

pr¨asentationen des Document Object Models verglichen werden, sehr performancest-

ark.

Schließlich wird die Software, bestehend aus einem - nach den Representational State

Transfer Prinzipien umgesetzter - Web-Service und zwei Single Page Application Cli-

ents anhand ihrer Teil-Komponenten beschrieben und dessen Funktionalit¨aten pr¨as-

entiert. Das Web-Service liefert f¨ur die Benchmarks Dummy-Daten in JavaScript Ob-

ject Notation Format aus einer MySQL-Datenbank.

Im letzten Teil der Arbeit befinden sich statistische Erhebungen zu den durchgef¨uhrten

Benchmarks mit ausf¨uhrlichen Beschreibungen. Dabei zeigt sich, dass bei dem Einsatz

großer Daten-Mengen - zwischen f¨unf- und zehn-tausend Datens¨atze - die React Li-

brary von Facebook bei deren Verarbeitung in renderbare Inhalte besser abschließt als

sein Gegner. Somit vergr¨oßert sich der Performance-Abstand mit steigender Anzahl

von Daten zu Gunsten der React Library.

Zusammenfassung (Englisch)

The present bachelor thesis deals with a performance comparison of two popular frame-

works in the field of frontend-development. Therefore the second version of the popular

framework Angular from Google is confronted with the React library from Facebook.

Firstly, on the basis of extensive literature research, the phenomenon of Web 2.0 is

beeing illuminated. Its concept, as well as technological developments compared to its

predecessor are described.

It becomes clear, that the usability of a web-application - especially in the e-commerce

sector - can fundamentally contribute to the overall reputation of a company, as well

as its customers loyalty. Both frameworks produce relief when it comes to maximize

the usability. The implementation of modern web-applications in the form of single

page applications is discussed, using different design paradigms - such as model-view-

controller, model-view-viewModel and Virtual DOM. Especially the methodology of

the Virtual DOM, which is used within the React framework is very strong in its per-

formance, due to the internal differ algorithm, where two virtual representations of the

DOM are beeing compared.

Finally, the software, consisting of one web-service, which is built after the princip-

les of the representational state transfer programming pattern, and two single page

application clients is described based on its partial components and functionalities.

The web-service provides dummy data for the benchmakrs in JavaScript Object Nota-

tion format from a MySQL database.

In the last part of the thesis, statistical surveys and detailed results obtained from

the benchmarking are presented. It turns out that with the use of large amount of data

- between five- and ten- thousand data sets - the React framework from Facebook is

performing better when it comes to the processing of rare data into renderable content.

Thus, the performance gap icreases with the rising amount of data in favor of the React

library.