Refine
Document Type
- Bachelor Thesis (13)
Language
- German (13) (remove)
Has Fulltext
- yes (13)
Is part of the Bibliography
- no (13)
Keywords
- Webentwicklung (13) (remove)
Institute
Open Access
- Closed Access (8)
- Closed (4)
- Open Access (1)
JavaScript-Frameworks (JSF) sind im Bereich der Webentwicklung seit längerem prominent. Jährlich werden neue JSF entwickelt, um spezifische Probleme zu lösen. In den letzten Jahren hat sich der Trend entwickelt, bei der Wahl des JSF verstärkt auch auf die Performanz der entwickelten Webseite zu achten. Dabei wird versucht, den Anteil an JavaScript auf der Webseite zu reduzieren oder ganz zu eliminieren. Besonders neu ist der Ansatz der "Island Architecture", die erstmals 2019 vorgeschlagen wurde. In dieser Thesis soll die Performanz der meistbenutzten und des performantesten JSF mit dem JSF "Astro" verglichen werden, welches die "Island Architecture" von sich aus unterstützt. Der Schwerpunkt liegt beim Vergleichen der Webseitenperformanz, jedoch werden auch Effizienz und Einfachheit während der Entwicklung untersucht. Das Ziel dieser Arbeit ist es, potenzielle Frameworks zu untersuchen, die die Effizienz und Produktivität für den Nutzer und während der Entwicklung steigern können.
Im Rahmen der Bachelorarbeit zum Thema „Vergleich von REST und GraphQL als moderne Web-APIs und Implementierung eines PIM-Systems“ werden zwei moderne Ansätze zum Erstellen von Web-APIs untersucht und verglichen. Ziel der Arbeit ist es, passende Anwendungsfälle für die Verwendung von REST und GraphQL zu definieren. Im praktischen Teil der Arbeit wurde eine Prototyp eines Product-Information-Management-Systems mit einer GraphQL-Schnittstelle implementiert.
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.
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.
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.
Mit der kontinuierlichen Weiterentwicklung des World Wide Web, der steigenden Anforderungen an beispielsweise Ladege-schwindigkeit (in Millisekunden!) und Nutzungserlebnis und der Einführung moderner Jamstack-Frameworks mit verschiedenen Rendering-Methoden, wird der Prozess bei der Entwicklung von Webanwendungen immer komplexer.
Das Ziel der vorliegenden Arbeit ist es, die Funktionsweise der einzelnen Rendering-Methoden von Webanwendungen und de-ren Vor- und Nachteile zu untersuchen, um anschließend mit dem gewonnenen Wissen entscheiden zu können, welcher Ansatz für bestimmte Projekttypen der richtige ist. Dazu wird die folgende Forschungsfrage gestellt:
Wie kann unter Verwendung neuster Webtechnologien und Ansätze eine performante, nutzungsfreundliche und für Suchmaschinen optimierte Webanwendung erstellt werden, die den heutigen Standards (Core Web Vitals) gerecht wird?
Um die Forschungsfrage zu beantworten, wurde zunächst die Webanwendung selbst und nachfolgend der Stand der Technik bei der Entwicklung von Webanwendungen erläutert. Um ver-schiedene Ansätze und Funktionsweisen bei der Entwicklung einer Webanwendung beurteilen zu können, wurden diese ge-genübergestellt, auf Anwendbarkeit geprüft und die für den Rahmen dieser Arbeit geeigneten Technologien ausgewählt.
Die erarbeiteten theoretischen Grundlagen dienen zur Konzeption und Umsetzung einer interaktiven, multimedialen Präsentations- und Kollaborationsplattform mit dem Namen Collab. Hierbei ist es Benutzer:innen möglich sich über Dienstanbieter:innen und deren Leistungen zu informieren oder sich selbst als Dienstanbieter:in zu registrieren. Zudem können registrierte Personen eigene Projekte erstellen oder an existierenden Projekten teilnehmen, um diese zusammen in Form einer Kollaboration umzusetzen.
Bereichsübergreifender Einsatz von JavaScript – Aktueller Stand und exemplarische Implementierung
(2021)
Nahezu alle Websites nutzen die Programmiersprache JavaScript zur Darstellung von interaktiven Inhalten und zur Bereitstellung von komplexen Funktionalitäten. Seit ihren Anfängen im Jahr 1995 hat sich die Sprache nicht nur zum Standard in der Webentwicklung etabliert, sondern auch zu einer leistungsfähigen Mehrzweckprogrammiersprache weiterentwickelt.
Diese Arbeit befasst sich mit einer ausführlichen Darstellung der aktuellen Möglichkeiten, welche Ansätze sich durch die Weiterentwicklung JavaScripts zu einer Mehrzweckprogrammiersprache ergeben und wie sich diese heute umsetzen lassen. Anhand des intelligenten Schlüsselkastens „Smart Vault“ wird verdeutlicht, wie dieses Vorgehen praktisch realisiert und die Vorteile einer einzigen Programmiersprache angewendet werden können.
Es hat sich herausgestellt, dass sich JavaScript für Anwendungen unterschiedlicher Bereiche einsetzen lässt und darüber hinaus ein hohes Potenzial für weitere Entwicklungen, Verbesserungen und zusätzliche Einsatzgebiete besitzt. Es lassen sich nicht nur Websites, Web Server und Desktop Apps, sondern auch Mikrocontroller im Internet of Things konfigurieren und miteinander nutzen, ohne eine weitere Programmiersprache zu benötigen. Zahlreiche Bibliotheken und Frameworks machen es möglich, dass die Sprache verschiedene Anwendungen über ihre Einsatzgebiete hinweg miteinander verbindet.
Die vorliegende Bachelorarbeit beschäftigt sich damit, welche Schritte für die Entwicklung einer Progressive Web App nötig sind, damit für eine Performance und User Experience gesorgt werden kann, die der einer nativen Anwendungen gleichkommt. Zu diesem Zweck werden der Service Worker, das Web-App-Manifest, HTTPS-Verschlüsslung sowie die App-Shell-Architektur vorgestellt, die die zentralen Techniken von Progressive Web Apps ausmachen. Mit deren Implementierung können Features genutzt werden, die bisher nur nativen Apps vorbehalten waren, wie Offline-Funktionalität, Push-Notifications, „Add-to-Homescreen“ und „Background-Sync“. Der Fokus der Arbeit liegt darauf, diese Features in einer Progressive Web App umzusetzen, indem zunächst eine herkömmliche responsive Website implementiert wird, der nach und nach PWA-Features hinzugefügt werden. Anhand der dafür aufgewendeten Konzeption und Implementierung wird untersucht, welche Unterschiede sich durch eine Migration zu einer PWA bezüglich der Performance und Usability ergeben.