Refine
Year of publication
- 2022 (6) (remove)
Document Type
- Bachelor Thesis (5)
- Master's Thesis (1)
Has Fulltext
- yes (6)
Is part of the Bibliography
- no (6)
Keywords
- Webentwicklung (6) (remove)
Institute
Open Access
- Closed (3)
- Closed Access (2)
- Diamond (1)
- Open Access (1)
Server Side Rendering (SSR), Single Page Application (SPA), and Static Site Generation (SSG) are the three most popular ways of making modern Web applications today. If we go deep into these processes, this can be helpful for the developers and clients. Developers benefit since they do not need to learn other programming languages and can instead utilize their own experience to build different kinds of Web applications; for example, a developer can use only JavaScript in the three approaches. On the other hand, clients can give their users a better experience.
This Master Thesis’s purpose was to compare these processes with a demo application for each and give users a solid understanding of which process they should follow. We discussed the step-by-step process of making three applications in the above mentioned categories. Then we compared those based on criteria such as performance, security, Search Engine Optimization, developer preference, learning curve, content and purpose of the Web, user interface, and user experience. It also talked about the technologies such as JavaScript, React, Node.js, and Next.js, and why and where to use them. The goals we specified before the program creation were fulfilled and can be validated by comparing the solutions we gave for user problems, which was the application’s primary purpose.
Das Unternehmen adam medien produziert für kleine und mittelständische Unternehmen Telefonansagen wie Begrüßungsansagen, Warteschleifen oder Ansagen zu Anrufen außerhalb der Geschäftszeiten. Zu seinem Service gehört es die Texte die Kunden zu erstellen, zu optimieren und eventuell zu übersetzen. Bisher wird dieser Teil des Workflows durch eine eigene Webseite realisiert, in welche eine externe Webseite integriert ist.
Um den Kunden eine bessere Lösung mit mehr Funktionen im firmeneigenen Design und der Corporate Identity bieten zu können, soll ein eigene Webanwendung entwickelt werden. Dadurch entsteht eine Unabhängigkeit von Google, Google Tabellen und dessen Updates. Zusätzlich möchte man den Kunden einen besseren Datenschutz bieten, da man selbst die Kontrolle über alle Daten besitzt und diese nicht an Google abgibt.
Die Webanwendung soll die Telefonansagetexte anzeigen und Kunden sowie Mitarbeitenden die Möglichkeit bieten diese anzupassen. Das Ziel dieser Arbeit ist es, einen Prototyp zu konzipieren und zu implementieren, welcher den Arbeitsablauf der Agentur bei der Erstellung der Telefonansagetexte auf eigenen Webseiten unterstützt.
Diese Thesis umfasst mit dem hybriden Rendering, Headless CMS und Progressive Web Apps drei moderne technologische Ansätze aus dem Bereich der Webentwicklung. Ziel der vorliegenden Arbeit ist es dabei, auf Basis eines Einblicks in die Grundlagen des modernen Web Developments zunächst die drei Konzepte einzeln zu betrachten, zu analysieren, Vor- und Nachteile herauszustellen und deren technologische Möglichkeiten zu erklären, um schließlich auch das Zusammenspiel dieser, derzeit relevanten Entwicklungsansätze im Hinblick auf die zugrunde liegende Forschungsfrage zu untersuchen: Ist es möglich verschiedene, aktuelle Trends der Webentwicklung sinnvoll miteinander zu kombinieren und so auf Basis eines Headless CMS, einem Frontendframework für verschiedene Renderingmethoden und der Idee der Progressive Web Apps eine performante und benutzerfreundliche protoytpsiche Web-applikation zu implementieren? Um dies zu überprüfen, wurde auf den zuvor erarbeiteten theoretischen Grundlagen mit MovieRec eine WebApp als interaktives Filmportal konzipiert und schlussendlich mit einem entsprechenden Technologiestack implementiert. Diese Schritte sowie die Umsetzung der Kernfunktionen der Anwendung wurden dabei anhand von Codeausschnitten erklärt.
Diese Bachelorarbeit befasst sich mit dem Thema Headless CMS. Zunächst wird ein theoretischer Überblick über das Themengebiet gegeben, indem die Funktionsweise von Headless CMS und genutzten Technologien sowie die Unterschiede zu traditionellen WCMS erläutert werden. Zusätzlich werden in diesem Zusammenhang vor allem auch die Vor- und Nachteile dieser Systeme sowie deren sinnvolle Einsatzgebiete beleuchtet. Des Weiteren werden drei ausgewählte Systeme (Decoupled Drupal, Contentful und Strapi) analysiert und verglichen. Im praktischen Teil der Arbeit wurde ein Prototyp eines rechtlichen Informationsportals implementiert, das die Inhalte über eine Schnittstelle von einem Headless CMS abfragt.
This thesis evaluates and compares current Full-Stack JavaScript Technologies. Through extensive research on the state of the art of JavaScript and its related frameworks, different aspects of FullStack Development are analysed to judge the popularity of technologies.
The language JavaScript and the idea of Full-Stack Development are presented with the functionality of different frameworks. The JavaScript runtime Node.js was examined and marked as the most influential JavaScript technology, which opened up many opportunities.
As technology stacks MERN, MEAN and MEVN were investigated, featuring the base technologies Node.js, MongoDB and Express.js. It was discovered that front-end frameworks have the most influence on which variant of Full-Stack can be chosen. Comparison criteria between the technology stacks were the learning curve, the maintainability, modularity and media integration. These criteria were extracted from research and a questionnaire conducted with students of the University of Applied Sciences Offenburg.
For the purposes of testing and experiencing a Full-Stack JavaScript application, the game RemArrow, based on the 1979s game Simon, was designed and implemented. The comparison with predefined criteria shows the result that the MERN stack with React.js is the best to learn and promises the most potential. Arising JavaScript technologies and their popularity are very dependent on the industry and skill set of the developer.
In conclusion, it can be established that the concept of Full-Stack Development is currently very interesting and more than just a trend. It has potential of becoming a new kind of web development, and part of the curriculum taught at universities. Expert knowledge is needed but there is a high demand and much potential for Full-Stack JavaScript Developers.
Zu Beginn dieser Arbeit wurde das Problem beschrieben, dass das Ersetzen von einzelnen Modulen innerhalb TYPO3s durch React bisher nicht möglich war. Dadurch ergab sich die Aufgabe eine Lösung zu finden, mit der die Vorteile von React in TYPO3 eingebracht werden können, möglichst ohne große Veränderungen und Aufwände zu betreiben. Als zusätzliche Anforderung wurde definiert, dass React in TypeScript geschrieben werden soll.
Um dem Leser dieser Arbeit die Möglichkeit zu geben, den angefertigten Code verstehen und interpretieren zu können, wurden zunächst Grundlagen in TypeScript, React und TYPO3 geschaffen. Daraufhin wurde der Ist-Stand beschrieben, welcher ein simples TYPO3-Plugin beschreibt. Dies wurde für die grundsätzliche Umwandlung in React möglichst simpel gehalten, war dennoch mit einigen Grundsätzen wie AJAX und Rerendering ausgestattet, um gewisse Vorteile und Problematiken bei der Umsetzung aufzeigen zu können. Daraus ergab sich ein Soll-Stand, welcher zugleich weitere Anforderungen an die spätere Lösung definierte.
Um ein mögliches Lösungskonzept erarbeiten zu können wurden im Kapitel „Stand der Technik“ 2 verwandte Arbeiten und Möglichkeiten vorgestellt. Daraufhin wurden die beiden zu entwickelnden Plugins beschrieben, zunächst das Dummy-TYPO3-Plugin, gefolgt vom in React entwickelten Äquivalent.
In Kapitel 8 wurde ein Konzept erstellt und daraufhin die Umsetzung Schritt für Schritt durchgeführt. Dabei konnte erfolgreich React in TYPO3 aufgesetzt und zur Entwicklung genutzt werden. Das Dummy-Plugin konnte ohne größere Probleme umgesetzt werden und zeigte somit eine mögliche Lösung für die Umwandlung von TYPO3 zu React auf. Um diese Lösung zu validieren, wurde im Folgekapitel das ProofOfConcept entwickelt. Dabei handelte es sich um ein produktiv eingesetztes Projekt, welches auf einer älteren Version basiert und verschiedene Anforderungen mitbrachte. Dies wurde nach Vorstellung des Projektes und Lösungskonzept Schritt für Schritt umgesetzt.