Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (14)
Komponentenarchitektur
- 1. Komponenten Architektur Eine Einführung by Benedikt Kusemann @kadrei
- 2. KOMPONENTENBauen wir ein HTML-Element 1
- 4. KOMPONENTEN - YOUR EVERYDAY WEB CSS HTML JS ASSETS CSS MODULES lokal angewendetes CSS WEB COMPONENTS
- 6. LET’S MAKE A TODO APP!
- 7. <todos /> DIE BAUSTEINE EINER TODO APP
- 8. <list items=”...”> ... </list> 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