Zusammenfassung Bachelor Thesis mit dem Thema: Der Ursprung der Arbeit basiert auf den unterschiedlichen Meinungen hinsichtlich der Nutzung von Angular (ab Version 2.x) und React (ab Version 16.x) zur Erstellung eines webbasierten Frondendes. Diese unterschiedlichen Ansichten gehen über das Unternehmensumfeld hinaus.
08.10.19 von Manuela Mehlbreuer
Am 01.10.2016 habe ich mein duales Studium bei Syntegris begonnen und fühlte mich von Beginn an gut aufgehoben. Nach drei Jahren des Lernens und Weiterentwickelns durfte ich mein Studium endlich mit einer Bachelorarbeit abschließen. Im Folgenden werde ich mein Thema, dessen Ursprung und Zielsetzung kurz präsentieren. Kommen wir aber zunächst zu meinem Titel: „Erstellung einer Entscheidungshilfe zur Anwendung von Angular und React für die Entwicklung eines webbasierten User Interfaces für die Darstellung von Zustandsinformationen einer Laufzeitumgebung“.
Bevor ich den Kern meiner Arbeit vorstelle, möchte ich kurz auf die Grundlagen der behandelten Thematik eingehen.
In der heutigen Zeit werden immer mehr Webanwendungen als sogenannte Single-Page-Anwendungen (Abk. SPA) umgesetzt. Im Gegenteil zu konventionellen Webanwendungen findet bei dieser Art und Weise eine Verlagerung der Logik in den Browser statt. Genauer gesagt enthält der Server einer konventionellen Webanwendung neben den eigentlichen (darzustellenden) Daten auch den Aufbau der Benutzeroberfläche (Logik ≈ was wird wo wann angezeigt). Dies hat zur Folge, dass die Seite aufgrund von Interaktionen mit einem Nutzer stetig neu geladen werden muss. Bei SPAs hingegen wird der Aufbau der Benutzeroberfläche nur einmal geladen und anschließend in den Browser verlagert. Im Anschluss müssen nur noch die benötigten Daten selbst und nicht mehr die gesamte Logik der Benutzeroberfläche geladen werden.
Angular und React sind für die Entwicklung von Single-Page-Anwendungen weit verbreitet. Obwohl die Lebenszeit vieler JavaScript basierten Produkte nur von kurzer Dauer ist, haben sie sich als „Big Player“ herauskristallisiert. Darüber hinaus ist nicht zu erwarten, dass ihr Einfluss in absehbarer Zeit stark abnehmen wird. Diese Gegebenheit bildete das Fundament weiterer Untersuchungen, da aufkommende Trends für ein Dienstleistungsunternehmen wie Syntegris von signifikantem Interesse sind.
Jetzt habe ich die ganze Zeit von Angular und React geredet, aber was ist das eigentlich genau?Formularende
Angular ist ein von Google unterstütztes JavaScript-Framework. Ein Framework ist eine Art Grundgerüst, welches den Rahmen der Anwendung festlegt. Im Grunde genommen kann es als eine Art Baukasten verstanden werden, das alle Bausteine enthält, die notwendig sind, um eine Anwendung aufzubauen. Durch diese mitgelieferten Bausteine wird eine bestimmte Struktur vorgegeben, an der sich ein Entwickler orientieren muss.
Obwohl Angular ein JavaScript basiertes Framework ist, wird als Programmiersprache hauptsächlich TypeScript verwendet. Die Nutzung von TypeScript ist nur möglich, da es eine Obermenge von JavaScript ist. Stellen wir uns einmal Deutschland und die deutsche Sprache vor. Neben Hochdeutsch haben sich viele unterschiedliche Dialekte, wie bspw. Bayrisch entwickelt. Bayrisch ist demnach eine Abwandlung des Hochdeutschen, kann aber ohne größere Probleme zurück ins Hochdeutsche „übersetzt“ werden. Ähnlich verhält es sich mit TypeScript-Code, welcher ohne größeren Aufwand in gültigen JavaScript-Code übersetzt werden kann.
Einen Gegensatz zu Angular bildet JavaScript-Softwarebibliothek React. Eine Bibliothek stellt im Normalfall eine Sammlung von Klassen und Funktionen bereit, die jedoch häufig nicht ausreichen um eine kleine Anwendung zu erstellen. Aus diesem Grund müssen weitere externe Bibliotheken eingebunden werden. Diese Art und Weise lässt einem Entwickler mehr Freiheiten, da er selber entscheiden kann, welche Bibliotheken für welche Funktionalitäten genutzt werden sollen. React wird unter anderem von Facebook verwendet und ist eine Technologie zur Erstellung zusammengesetzter Benutzeroberflächen. Als Programmiersprache wird hauptsächlich JSX verwendet, die das Schreiben von HTML-ähnlichen Syntax in den JavaScript-Code ermöglicht. Stellen wir uns vor wir wollten einen Schrank aufbauen. Dazu haben wir eine Anleitung mit Bildern und eine mit reinem Text zur Verfügung. Beide Möglichkeiten führen zum Ziel, jedoch ist durch die Zuhilfenahme von Bildern das Endergebnis greifbarer und die notwendigen Arbeitsschritte können schneller durchgeführt werden. Ähnlich verhält es sich mit JSX und JavaScript. Der Vorteil von JSX im Vergleich zu reinem JavaScript besteht darin, dass die visualisierte Struktur des Codes leichter nachzuvollziehen ist und mit weniger Code beschrieben werden kann. Demnach ermöglicht diese Gegebenheit eine effektivere und effizientere Arbeitsweise, als es mit JavaScript möglich wäre.
Den eigentlichen Kern meiner Arbeit bildete ein Vergleich beider Produkte. Die Einschätzung derselben wurde auf Basis öffentlich zugänglicher Informationen und zweier Anwendungen durchgeführt. Diese Anwendungen wurden eigens für die Evaluation beider Lösungen entwickelt und dienten darüber hinaus dem besseren Verständnis beider Möglichkeiten. Die zu untersuchenden Kriterien wurden in Anlehnung an die Software-Qualitätseigenschaften der ISO Norm 25010 herausgearbeitet. Diese Norm kann als eine Art „Checkliste“ verstanden werden, die die wichtigsten Aspekte der Qualitätsmerkmale einer Software abdeckt. Die untersuchten Kriterien ersteckten sich von der Performance über die Benutzerfreundlichkeit und die Kompatibilität bis hin zu der Wartbarkeit der beiden Produkte. Die eigentliche Bewertung der Kriterien erfolgte unter Zuhilfenahme der Nutzwertanalyse. Sie ist ein Instrument der Entscheidungsfindung. Da eine Beschreibung ihrer einzelnen Arbeitsschritte den Rahmen dieser kurzen Präsentation sprengen würde, wird im Folgenden lediglich das Ergebnis dieser Analysemethode vorgestellt.
Mit der Arbeit konnte gezeigt werden, dass beide Lösungen für die Erstellung von SPAs eingesetzt werden können, Angular jedoch signifikante Vorteile gegenüber React aufweisen konnte. Angular konnte vor allem aufgrund seiner Verständlichkeit und Strukturvorgaben punkten. Hierdurch bildete sich eine Art Leitlinie, an der sich während der gesamten Entwicklung orientiert werden konnte. Darüber hinaus wies die offizielle Webseite Angulars deutlich bessere Dokumentationen und Hilfestellungen auf als die Webseite Reacts. Die Wartbarkeit beider Lösungen wurde für sehr gut befunden, da beide Produkte unter anderem einen modularen Aufbau unterstützen. Ferner konnten hinsichtlich der Performance keine eindeutigen Werte ermittelt werden, da die entwickelten Anwendungen nur geringen Umfangs waren und eine umfangreichere Analyse den Rahmen der Arbeit gesprengt hätte.
Die gesamte Arbeit verfolgte das Ziel, eine Entscheidungshilfe zur Anwendung von Angular und React zu erstellen. Da im Rahmen dieser Arbeit kein allgemeiner Vergleich beider Produkte möglich war konnte keine konkrete Handlungsempfehlung zur Wahl einer Lösung gegeben werden. Aus diesem Grund gab das letzte Kapitel meiner Arbeit einen kurzen Ausblick welche weiteren Themenfelder auf Basis der gewonnenen Ergebnisse zu untersuchen sind. Weitere zu untersuchende Themenfelder wären beispielsweise die Sicherheit beider Produkte, die Kompatibilität zu gängigen Browsern oder auch eine umfangreichere Performance beider Lösungen.
Obgleich im Rahmen der Bachelorarbeit kein allgemeiner Vergleich und somit auch kein endgültiges Ergebnis herausgearbeitet werden konnte, bildet sie die Grundlage für weitere kritische Evaluationen, die für die Schaffung einer konkreten Handlungsempfehlung erweiternd zu untersuchen sind.
Zusammenfassend kann ich sagen, dass ich, auch wenn ich mit meiner Bachelorarbeit nicht die Welt verändert habe, meinen Beitrag dazu leisten konnte, dass sich Syntegris auch im Bereich der SPA-Entwicklung stetig weiterentwickelt.