Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Komponentenarchitektur

320 views

Published on

Meine Präsentation zur Komponentenarchitektur vom 21.11.2016 am Webmontag in Gießen

Published in: Software
  • Login to see the comments

  • Be the first to like this

Komponentenarchitektur

  1. 1. Komponenten Architektur Eine Einführung by Benedikt Kusemann @kadrei
  2. 2. KOMPONENTENBauen wir ein HTML-Element 1
  3. 3. WAS WÄRE WENN? <slideshow sources=”...” />
  4. 4. KOMPONENTEN - YOUR EVERYDAY WEB CSS HTML JS ASSETS CSS MODULES lokal angewendetes CSS WEB COMPONENTS
  5. 5. Architektur Container und UI-Komponenten 2
  6. 6. LET’S MAKE A TODO APP!
  7. 7. <todos /> DIE BAUSTEINE EINER TODO APP
  8. 8. <list items=”...”> ... </list> DIE BAUSTEINE EINER TODO APP
  9. 9. <todo-item item=”...” onClick=”...” /> DIE BAUSTEINE EINER TODO APP
  10. 10. <todo-add onSubmit=”...” /> DIE BAUSTEINE EINER TODO APP
  11. 11. <todos> <todo-add onSubmit=”...” /> <list items=”...” > <todo-item item=”...” onClick=”...” /> </list> </todos> DIE BAUSTEINE EINER TODO APP TODO App Architektur - Baumstruktur
  12. 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. 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. 14. <todos items=”...” /> Oder: <todos id=”...” /> EINBINDEN DER TODO KOMPONENTE
  15. 15. VOR & NACHTEILE Sowie Frameworks 3
  16. 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. 17. FRAMEWORKS
  18. 18. DANKE! Fragen? @kadrei / benedikt.kusemann@gmail.com

×