O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Komponentenarchitektur

346 visualizações

Publicada em

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

Publicada em: Software
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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

×