Application Architecture – Angular Components richtig nutzen | Magedeburg Dev-Days

Moderne Webtechnologien ermöglichen es uns, umfangreiche Geschäftsanwendungen zu schreiben, die leistungsfähig und einfach zu bedienen sind.
Mit der Zeit werden unsere Projekte und bestehenden Apps weiterentwickelt und mehr Features werden hinzugefügt.
Diese zusätzliche Komplexität summiert auf sich und macht die weitere Entwicklung der Anwendungen langsam und mühsam.

In dieser Session zeigt Max Schulte anhand von Beispielen aus echten Anwendungen und mittels live coding wie Sie Komponenten vorausschauend planen können. Um so durch architektonische Konzepte, wie Smart- & Presentational-Components, Ihre Anwendung wartbarer zu machen, schneller zu entwickeln und langfristig erweiterbar zu halten.

Transcript

1. Application Architecture – Angular Components richtig nutzen Session Max Marschall @MaxOSchulte Developer / Consultant
2. • Creating reusable frontend components • Focus on patterns, not implementation details • Scoped functionality • Clear visual understanding • Better Team-Work • Library creation Motivation
3. What are Components?
4. • Reusable building blocks • (One) Responsibility • De fi ned Inputs • De fi ned Outputs • Content-Projection • Documented & Testet What are Components?
5. Specialised in • Angular • Capacitor & Ionic • Babylon.js Consultant @ Thinktecture @MaxOSchulte Max Marschall
6. Let’s Play a game 👨💻
7. Hey, I need a dropdown for conference sessions. 1. Display title and duration 2. Only title is visible when closed SURE!
8. 👨💻
9. • Shows data • Has logic • Opening and closing • Holds state • Open or Closed Dropdown • Selected Item • List Data Session Dropdown 🚨
10. Hey, I need another dropdown for speakers. 1. Display fi rst and last name 2. Both names when closed 3. Do it FAST SURE?
11. Session Dropdown • Shows data • Has logic • Opening and closing • Holds state • Open or closed dropdown • Selected item • List data 🚨 Speaker Dropdown • Shows data • Has logic • Opening and closing • Holds state • Open or closed dropdown • Selected item • List data 🚨
12. Let me refactor that …
13. 👨💻
14. Session Dropdown ✅ • Holds list data Speaker Dropdown ✅ • Holds list data Dropdown ⚠ • Shows data • Has logic • Opening and closing • Holds state • Open or closed dropdown • Selected item • List Data ⚠ Way to much responsibilities
15. Smart & Presentational
16. • Open / Closed - Open for Extension Closed for Modi fi cation • IoC - Inversion of Control • DRY - Don’t Repeat Yourself • Extract and specify responsibilities and scopes Smart- & Presentational Pattern
17. Smart Components • Data and State • Very few to non UI logic • Connect one or more presentational components • React to presentational component outputs and events • Dependencies to different app wide services and states Smart- & Presentational Pattern
18. Presentational Components • UI • No dependencies • Communicate via Inputs and Events / Outputs • local UI-State • UI-Logic • Same Input -> Same UI Smart- & Presentational Pattern
19. 👨💻
20. Session Dropdown ✅ • Holds list data Speaker Dropdown ✅ • Holds list data Dropdown ✅ • (Has logic) • Opening and closing • Holds state • Open or closed dropdown Select ✅ • Holds selected state • Manages dropdown Item ❓ • ?
21. • Create small components and templates with clear responsibilities • Components are open for extension • High reusabillity • E.g. “action menus” and “user selects” What did we do?
22. • Upfront Workload • Hard to fi nd scopes and “cut” components • Feature-Creeps - YAGNI The drawbacks…
23. • Highly reusable • DRY, Inversion of Control • Create UI-Libraries using Storybook e.g. • Easy Onboarding / Testing / Extending 
 …. by using clear responsibilities and small scopes • Encourages team work • Encourages discussion • Consistent UI due to reuse The bene fi ts!
24. It's a wrap! • Try it! Apply the pattern in your code base • Use it! Create reusable UI-Component libraries • Be Prepared! Rethink new components before implementation Thank you for listening! :) • Slides & Repo: https://thinktecture.com/max-marschall • Contact: @MaxOSchulte, max.marschall@thinktecture.com