Frontend ohne Framework – nativ, nicht naiv!

Code-Beispiele zum Vortrag

Was gibt's hier?

Lauffähige Code-Beispiele für WebComponents. Konkret:

1. Ein kleines naives Beispiel. Zeigt das grundlegende Prinzip.
2. Dasselbe Beispiel mit Shadow DOM.
3. Dasselbe Beispiel mit lit.
4. Ein komplexeres Beispiel. Zeigt die Kommunikation mehrerer Komponenten miteinander.
5. Dasselbe Beispiel mit produktiv tauglichem Setup: Dependency Injection, Backend, ... Gibt einen Eindruck, wie sich das Entwickeln einer Web-Applikation anfühlen könnte.

Setup und Start

• Ggf. Node.js installieren
• Erstmals npm install ausführen
• lokalen Webserver starten mit npm run watch
• Die laufenden Beispiele betrachten unter http://localhost:8082/

Links

• WebComponents: https://www.webcomponents.org/introduction
• lit: https://lit.dev/docs
• tsyringe (Dependency Injection): https://github.com/microsoft/tsyringe
• fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

---

Jan Müller, Christoph Renner
andrena objects ag