Das Dokument bietet eine Einführung in die Komponentenarchitektur für Webanwendungen, illustriert am Beispiel einer To-Do-App mit HTML, CSS und JavaScript. Es beschreibt die Struktur von UI- und Container-Komponenten sowie deren Vor- und Nachteile, betont die Bedeutung definierter Schnittstellen und die Vermeidung globaler Seiteneffekte. Abschließend wird auf die interne Erweiterbarkeit eingegangen, die Komponenten bieten, während sie gleichzeitig die Komplexität größerer Anwendungen verwalten.

1. Komponenten Architektur
Eine Einführung
by Benedikt Kusemann
@kadrei

2. KOMPONENTENBauen wir ein HTML-Element
1

3. WAS WÄRE WENN?
<slideshow
sources=”...”
/>

4. KOMPONENTEN - YOUR EVERYDAY WEB
CSS
HTML
JS
ASSETS
CSS MODULES
lokal angewendetes CSS
WEB
COMPONENTS

5. Architektur
Container und UI-Komponenten 2

6. LET’S MAKE A TODO APP!

7. <todos />
DIE BAUSTEINE EINER TODO APP

8. <list items=”...”>
...
</list>
DIE BAUSTEINE EINER TODO APP

9. <todo-item
item=”...”
onClick=”...”
/>
DIE BAUSTEINE EINER TODO APP

10. <todo-add
onSubmit=”...”
/>
DIE BAUSTEINE EINER TODO APP

11. <todos>
<todo-add onSubmit=”...” />
<list items=”...” >
<todo-item item=”...” onClick=”...” />
</list>
</todos>
DIE BAUSTEINE EINER TODO APP
TODO App Architektur
- Baumstruktur

12. <todos>
<todo-add onSubmit=”...” />
<list items=”...” >
<todo-item item=”...” onClick=”...” />
</list>
</todos>
DIE BAUSTEINE EINER TODO APP
UI
- Repräsentiert einen State
- Verändert State nicht (pure)
- Weitergabe von Events

13. <todos>
<todo-add onSubmit=”...” />
<list items=”...” >
<todo-item item=”...” onClick=”...” />
</list>
</todos>
DIE BAUSTEINE EINER TODO APP
Container
- Stateful
- Weitergabe von Daten
- State-Änderungen durch Events

14. <todos items=”...” />
Oder:
<todos id=”...” />
EINBINDEN DER TODO KOMPONENTE

15. VOR & NACHTEILE
Sowie Frameworks 3

16. KOMPONENTEN - VOR & NACHTEILE
Fokussiert
Komponenten sind spezialisiert.
Eine Fokussierung kann sowohl auf
UI als auch Funktionalität
bestehen.
Kombinierbar
Über fest definierte Schnittstellen
sind Komponenten einfach zu
kombinieren
Strukturiert
Die Baumstruktur ähnelt der
bekannten DOM-Struktur, ist aber
weitaus übersichtlicher. Bei
größeren Applikationen neigt die
Struktur aber schnell zu wachsen.
Bündelung
Alle Ressourcen sind in der
Komponente verpackt und gelten
lokal. Dadurch werden globale
Seiteneffekte verhindert.
Interne Erweiterbarkeit
Während eine Applikation einfach
erweiterbar bleibt sind einzelne
Komponenten ohne interne
Veränderungen nur schwer
erweiterbar.

17. FRAMEWORKS

18. DANKE!
Fragen?
@kadrei / benedikt.kusemann@gmail.com