ThemenvorschlŠge Seminar WiSe 2019/2020

 

Thema

WebAssembly (WASM)

Identifier

Kaul-1

Beschreibung

WebAssembly (WASM) ist eine neue Mšglichkeit der Performanz-Steigerung von Webanwendungen, da der AusfŸhrungscode sehr maschinennah ist. WebAssembly wird bereits von vielen Browsern unterstŸtzt und in vielen Anwendungen eingesetzt.

Ziel

WebAssembly (WASM) soll systematisch dargestellt und seine Anwendungen und sein Potenzial im WWW kritisch analysiert werden. Daraus sind die Konsequenzen fŸr Architekturen herzuleiten.

Einstiegsquellen

á       WebAssembly.org (2019): https://webassembly.org .

á       Mozilla (2019): WebAssembly, https://developer.mozilla.org/en-US/docs/WebAssembly .

á       Musch, Marius and Wressnegger, Christian and Johns, Martin and Rieck, Konrad (2019): New Kid on the Web: A Study on the Prevalence of WebAssembly in the Wild, Springer, https://link.springer.com/chapter/10.1007/978-3-030-22038-9_2 .

á       Fras, Krystian and Nowak, Ziemowit (2020): WebAssembly –Hope for Fast Acceleration of Web Applications Using JavaScript, Springer, https://link.springer.com/chapter/10.1007/978-3-030-30440-9_26

á      Andreas Rossberg, Ben L. Titzer, Andreas Haas, Derek L. Schuff, Dan Gohman, Luke Wagner, Alon Zakai, J. F. Bastien, and Michael Holman. 2018. Bringing the web up to speed with WebAssembly. Commun. ACM 61, 12 (November 2018), 107-115. DOI: https://doi.org/10.1145/3282510, https://dl.acm.org/citation.cfm?id=3282510 .

á       Hunseop Jeong ; Jinwoo Jeong ; Sangyong Park ; Kwanghyuk Kim (2018): WATT : A novel web-based toolkit to generate WebAssembly-based libraries and applications, https://ieeexplore.ieee.org/document/8326230 .

á       Surma (2019a): Compiling C to WebAssembly without Emscripten, https://dassur.ma/things/c-to-webassembly/ .

á       Surma (2019b): Raw WebAssembly, https://dassur.ma/things/raw-wasm/ .

 

 

Thema

Progressive Web App (PWA)

Identifier

Kaul-2

Beschreibung

Die WWW-Plattform ist durch den Erfolg von AppStores ins Hintertreffen geraten. Mit dem neuen Ansatz der Progressive Web Apps (PWAs) wird versucht, das Web zu einer relevanten Plattform auch fŸr Apps zu machen. 

Ziel

Aufgabe ist die wissenschaftliche Aufbereitung des Themas, die Diskussion von Vor- und Nachteilen, des Potenzials von PWA-Technologie und wann sich PWAs lohnen. Welche Architekturen ergeben sich aus der PWA-Technologie?

Einstiegsquellen

á       KŸnneth, T. (2019): Wann sich Progressive Web Apps lohnen; in: IT heute, Strategische Linien der Informationstechnik, iX Spezial 2019, Heise-Verlag, S. 76 – 81.

á       Hajian, M. (2019): Progressive Web Apps with Angular; Springer; https://link.springer.com/book/10.1007/978-1-4842-4448-7 .

á       Sheppard, D. (2017): ãBeginning Progressive Web App DevelopmentÒ, Springer-Verlag, https://link.springer.com/book/10.1007/978-1-4842-3090-9 .

á       Google (2017): Progressive Web App Training; https://developers.google.com/web/ilt/pwa/ .

á       Google (2017b): Codelab: Your First Progressive Web App; https://codelabs.developers.google.com/codelabs/your-first-pwapp/index.html .

á       Google (2015): Keynote by Darin Fisher, VP of Chrome (Chrome Dev Summit 2015). Online verfügbar unter https://www.youtube.com/watch?v=m2a9hlUFRhg&list=PLNYkxOF6rcICcHeQY02XvoGL34rZFWZn&index=2 , zuletzt aktualisiert am 17.11.2015.

á       Google (2016a): Progressive Web Apps, A new way to deliver amazing user experiences on the web, https://developers.google.com/web/progressive-web-apps/ .

á       Google (2016b): PWA Checklist, https://developers.google.com/web/progressive-web-apps/checklist .

á       Google (2016c): Lighthouse, an open-source, automated tool for improving the quality of web pages, https://developers.google.com/web/tools/lighthouse/ .

á       Google (2016d): Playlist Progressive Web App Summit 2016; https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb .

á       PWA (2016): Progressive Web Apps, Beispiel-Sammlung von PWAs nach verschiedenen Kategorien geordnet, https://pwa.rocks/ .

á       Kokke, T. (2017): The PWA Resource list;  https://www.timmykokke.com/2017/06/the-pwa-resource-list/ .

á       Liebel, C. (2017): Progressive Web Apps; Artikel-Serie in 4 Teilen, Heise-Verlag; https://heise.de/-3733624 .  

á       Udacity (2016): Intro to Progressive Web Apps; sponsored by  Google; Web Apps for the Next Billion Users; free course; https://www.udacity.com/course/intro-to-progressive-web-apps--ud811 .

á       Microsoft (2016):  PWA Builder, http://www.pwabuilder.com/ .

á       Krywosa, J. (2017): Safari, iOS, and Progressive Web Apps: What You Should Know; https://dockyard.com/blog/2017/07/13/safari-ios-and-progressive-web-apps .

 

 

Thema

Echtzeit-Kollaboration in Web Apps

Identifier

Kaul-3

Beschreibung

Das WWW wird zunehmend fŸr Echtzeit-Kollaboration genutzt. Die technischen Grundlagen hierfŸr sollen recherchiert, sortiert und systematisch gegliedert dokumentiert werden.

Ziel

Einstieg und †berblick Ÿber heute verfŸgbare technische Mšglichkeiten, um Echtzeit-Kollaboration in Web Apps zu implementieren. Daraus sind die Konsequenzen fŸr Architekturen herzuleiten.

Einstiegsquellen

á       Wang, V. et. al. (2013): The Definitive Guide to HTML5 WebSocket, https://link.springer.com/book/10.1007/978-1-4302-4741-8

á       Moroney, L.: The Definitive Guide to Firebase, https://link.springer.com/book/10.1007/978-1-4842-2943-9 .

á       Real-Time Databases, https://link.springer.com/chapter/10.1007/978-3-030-10555-6_3

á       Websocket-Evented Real-Time Online Coding Collaborator, https://link.springer.com/chapter/10.1007/978-981-13-1921-1_33

á       Rai, Rohit (2013): Socket.IO. Real-time Web Application Development. Birmingham, Packt Publishing.

á      RethinkDB (2019): The open-source database for the realtime web, https://rethinkdb.com .

á       Offutt, J., Thummala, S. (2019): Testing concurrent user behavior of synchronous web applications with Petri nets, Springer, https://link.springer.com/article/10.1007/s10270-018-0655-8 .

 

 

Thema

GraphQL

Identifier

Kaul-4

Beschreibung

GraphQL ist ein Facebook Open Source-Projekt und eine Datenanfragesprache, mit der der Datenbedarf einer Anwendung sehr kompakt spezifiziert und die Client-Server-Kommunikation drastisch reduziert werden kann.

Ziel

Ziel ist die wissenschaftlich strukturierte Beschreibung von GraphQL. Vor- und Nachteile sollen beschrieben und das Potenzial von GraphQL analysiert werden. Daraus sind die Konsequenzen fŸr Architekturen herzuleiten.

Einstiegsquellen

á       Freeman, A. (2019): Pro React, Springer, https://link.springer.com/book/10.1007/978-1-4842-4451-7 .

á       Frisendal, T. (2018): Visual Design of GraphQL Data, Springer, https://link.springer.com/book/10.1007/978-1-4842-3904-9 .

á       The GraphQL Foundation (2019): https://graphql.org .

á       Rodriguez-Echeverria, R., C‡novas Izquierdo, J.L., Cabot, J. (2018): Towards a UML and IFML Mapping to GraphQL, Springer, https://link.springer.com/chapter/10.1007/978-3-319-74433-9_13 .

á       Vogel, M., Weber, S., Zirpins, C.: Experiences on Migrating RESTful Web Services to GraphQL, Springer, https://link.springer.com/chapter/10.1007/978-3-319-91764-1_23 .

á       Lewowski, T. (2019): Creating Evolving Project Data Sets in Software Engineering, Springer, https://link.springer.com/chapter/10.1007/978-3-030-26574-8_1 .

 

 

Thema

Lernkomponenten im Digital Makerspace

Identifier

Kaul-5

Beschreibung

Webkomponenten sind ein neuer Standard des WWW, mit dem die SprachmŠchtigkeit von HTML-Webseiten erweitert werden kann. Implementiert man Lernkomponenten als Webkomponenten, so wird das Web zum Baukasten fŸr interaktives Lehr- und Lernmaterial (iOER), um offenes computerunterstŸtztes kooperatives Lernen (CSCL) im Web zu unterstŸtzen. Mit dem Digital Makerspace wurde eine Plattform entwickelt, die Programmierern ebenso wie Nicht-Programmierern die Suche, Gestaltung, Anpassung und Anwendung solcher Komponenten erlaubt. Die einheitliche Architektur der Komponenten erlaubt die Komposition von Komponenten zu grš§eren Apps.  

Ziel

Ziel ist die wissenschaftlich strukturierte Beschreibung von Webkomponenten im WWW und Lernkomponenten im Digital Makerspace. Leitideen, Prinzipien und Erfolgsfaktoren sollen beschrieben und das Potenzial des Digital Makerspace analysiert werden. Konsequenzen fŸr Architekturen von E-Learning-Plattformen sind daraus abzuleiten.

Einstiegsquellen

á       Web Components (2019), https://www.webcomponents.org/introduction .

á       W3C Standard Specification (2019): https://w3c.github.io/webcomponents/

á       Strazzullo, F. (2019): Frameworkless Front-End Development, Springer, https://link.springer.com/book/10.1007/978-1-4842-4967-3 .

á      Kaul, M. (2020): Student Activation in iOER Maker Spaces, in: Auer, M. E. and Tsiatsos, T. (eds.): The Challenges of the Digital Transformation in Education, Springer, https://link.springer.com/chapter/10.1007/978-3-030-11932-4_4 .

á      Kaul, M. (2019): Digital Makerspace, Abschlussbericht Digital Fellowship, Stifterverband, https://kaul.inf.h-brs.de/download/DMS_Endbericht.pdf .

á       Kaul, M.; Kless, A.; Bonne, T.; Rieke, A. (2017): Game Changer for Online Learning Driven by Advances in Web Technology, https://eric.ed.gov/?id=ED579383 .

á       Shank, J. D. (2014): Interactive Open Educational Resources: A Guide to Finding, Choosing, and Using WhatÕs Out There to Transform College Teaching. San Francisco, CA: Jossey-Bass, 2014. 176 pp. Paperback: ISBN: 978-1-118-27745-4.

á       Haake, J. et. al. (2012): CSCL-Kompendium 2.0: Lehr- und Handbuch zum computerunterstŸtzten kooperativen Lernen, Oldenbourg Wissenschaftsverlag.

 

 

Thema

Open Web Components

Identifier

Kaul-6

Beschreibung

Viele Web-Komponenten basieren auf Frameworks, die zunŠchst geladen werden mŸssen, bevor die Komponenten selbst gerendert werden kšnnen. Au§erdem passen Komponenten verschiedener Frameworks nicht zusammen. Daher wurde "Open Web Components" entwickelt, welches nur die nativen Funktionen des Browsers voraussetzt, also kein Framework. Diese Komponenten sind Ÿberall einsetzbar und vielseitig interoperabel.

Ziel

Ziel ist die wissenschaftlich strukturierte Beschreibung von Open Web Components inkl. developing, linting, testing, tooling, demoing, publishing and automating. Leitideen, Prinzipien und Erfolgsfaktoren sollen beschrieben und das Potenzial von Open Web Components analysiert werden. Daraus sind die Konsequenzen fŸr Architekturen herzuleiten.

Einstiegsquellen

á       Strazzullo, F. (2019): Frameworkless Front-End Development, Springer, https://link.springer.com/book/10.1007/978-1-4842-4967-3 .

á       Web Components, https://www.webcomponents.org/introduction .

á       W3C Spec (2019): https://w3c.github.io/webcomponents/

á       WHATWG Spec (2019): https://html.spec.whatwg.org/multipage/custom-elements.html

á       https://open-wc.org

á       https://developer.mozilla.org/en-US/docs/Web/Web_Components

á       https://angular.io/guide/elements

á       https://weightless.dev

á       https://lwc.dev Lightning Web Components ( Salesforce )

á       https://bulib.github.io/bulib-wc

á       https://github.com/elmsln/lrnwebcomponents/

á       https://wiredjs.com/

á       The State of Web Components https://dev.to/melcor76/the-state-of-web-components-ab3

á       https://dev.to/open-wc/developing-without-a-build-1-introduction-26ao

á       https://dev.to/open-wc/developing-without-a-build-2-es-dev-server-1cf5

á      Kaul, M. (2020): Student Activation in iOER Maker Spaces, in: Auer, M. E. and Tsiatsos, T. (eds.): The Challenges of the Digital Transformation in Education, Springer, https://link.springer.com/chapter/10.1007/978-3-030-11932-4_4 .

 

Thema

Multi-Threaded Web Apps

Identifier

Kaul-7

Beschreibung

Browser sind grundsŠtzlich single-threaded. Web Apps haben daher normalerweise keine NebenlŠufigkeiten. Das erschwert komplexe Daten-Verarbeitung im Browser, wenn man ruckelfreie OberflŠchen verlangt. Web Worker sind eine Browser API, die die Auslagerung rechenintensiver Prozesse aus dem Haupt-Thread erlaubt.  

Ziel

Ziel ist die wissenschaftlich strukturierte Beschreibung von Web Worker und nebenlŠufiger Datenverarbeitung im Browser. Leitideen, Prinzipien, Patterns und Libraries fŸr den Einsatz von Web Worker, deren Kommunikation, Testung und Debugging sollen beschrieben und das Potenzial von Web Worker anhand von Beispielen analysiert werden. Daraus sind die Konsequenzen fŸr Architekturen von Web Apps (Surma 2019a,b,c) herzuleiten.

Einstiegsquellen

á       Mozilla (2019): Web Worker API, https://developer.mozilla.org/de/docs/Web/API/Web_Workers_API

á       Willis, T. (2019): Weaving Webs of Workers,  https://www.youtube.com/watch?v=JBnNp8MpRSM und https://noti.st/trentmwillis/RxTcdy

á       Willis, T. (2018): Lumen: Custom, Self-Service Dashboarding For Netflix, https://medium.com/netflix-techblog/lumen-custom-self-service-dashboarding-for-netflix-8c56b541548c

á       Bidelman, E. (2010): Web Worker-Grundlagen, https://www.html5rocks.com/de/tutorials/workers/basics/

á       Catuhe, D. (2013): Using Web Workers to Improve Image Manipulation Performance, https://www.sitepoint.com/using-web-workers-to-improve-image-manipulation-performance/

á       Surma (2019a): When should you be using Web Workers?,  https://dassur.ma/things/when-workers/

á       Surma (2019b): Is postMessage slow?, https://dassur.ma/things/is-postmessage-slow/ .

á       Surma (2019c): React + Redux + Comlink = Off-main-thread, https://dassur.ma/things/react-redux-comlink/ .

á       https://github.com/GoogleChromeLabs/comlink

á       https://github.com/WebReflection/workway

á       https://github.com/developit/workerize

 

Thema

Echtzeitkommunikation im Web mit WebRTC

Identifier

Kaul-8

Beschreibung

WebRTC (Web Real-Time Communication, deutsch ãWeb-EchtzeitkommunikationÒ) ist ein offener Browser-Standard, der P2P-Echtzeitkommunikation direkt von Browser zu Browser ohne den Umweg Ÿber einen Server ermšglicht. Damit kšnnen Anwendungen wie Telefonie, Videokonferenz, Dateitransfer bzw. DatenŸbertragung, Chat und Desktopsharing als Web App erstellt werden.

Ziel

Ziel ist die wissenschaftlich strukturierte Beschreibung von WebRTC, dessen Standard, Architektur, Leitideen, Prinzipien, Patterns und Libraries. Das Potenzial von WebRTC soll anhand von Beispielen analysiert werden. Daraus sind die Konsequenzen fŸr Architekturen fŸr WebApps mit P2P-Echtzeitkommunikation abzuleiten.

Einstiegsquellen

á       WebRTC.org https://webrtc.org .

á       Corre, K. et. al. (2017): A WebRTC Extension to Allow Identity Negotiation at Runtime, Springer, https://link.springer.com/chapter/10.1007/978-3-319-60131-1_27 .

á       Xhafa, F. et. al. (2019): Supporting Online/Offline Collaborative Work with WebRTC Application Migration, Springer, https://link.springer.com/chapter/10.1007/978-3-319-93554-6_8 .

á       Amaral, V. (2014):Exploring WebRTC Technology for Enhanced Real-Time Services, Springer, https://link.springer.com/chapter/10.1007/978-3-319-05948-8_5 .

á       Pjanic, E., et. al. (2018): A Customizable Embedded WebRTC Communication System, Springer, https://link.springer.com/chapter/10.1007/978-3-319-71321-2_71 .

á       Edan, N.M., et. al. (2019): WebNSM: A Novel Scalable WebRTC Signalling Mechanism for One-to-Many Bi-directional Video Conferencing, Springer, https://link.springer.com/chapter/10.1007/978-3-030-01177-2_40 .

á       Build Your Own Video Chat with Vue, WebRTC, SocketIO, Node & Redis, https://levelup.gitconnected.com/build-your-own-video-chat-with-vue-webrtc-socketio-node-redis-eb51b78f9f55 .

á       Surma (2019): https://dassur.ma/things/comlink-webrtc/  .