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
   

   View Slide

2. • Creating reusable frontend components
   
   
   • Focus on patterns, not implementation details
   
   
   • Scoped functionality
   
   
   • Clear visual understanding
   
   
   • Better Team-Work
   
   
   • Library creation
   Motivation
   

   View Slide

3. What are Components?
   

   View Slide

4. • Reusable building blocks
   
   
   • (One) Responsibility
   
   
   • De
   fi
   ned Inputs
   
   
   • De
   fi
   ned Outputs
   
   
   • Content-Projection
   
   
   • Documented & Testet
   What are Components?
   

   View Slide

5. Specialised in
   
   
   • Angular
   
   
   • Capacitor & Ionic
   
   
   • Babylon.js
   
   
   Consultant @ Thinktecture
   
   
   @MaxOSchulte
   Max Marschall
   

   View Slide

6. Let’s Play a game 👨💻
   

   View Slide

7. Hey, I need a dropdown for conference sessions.
   
   
   1. Display title and duration
   
   
   2. Only title is visible when closed
   SURE!
   

   View Slide

8. 👨💻
   

   View Slide

9. • Shows data
   
   
   • Has logic
   
   
   • Opening and closing
   
   
   • Holds state
   
   
   • Open or Closed Dropdown
   
   
   • Selected Item
   
   
   • List Data
   Session Dropdown
   🚨
   

   View Slide

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?
    

    View Slide

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
    🚨
    

    View Slide

12. Let me refactor that …
    

    View Slide

13. 👨💻
    

    View Slide

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
    

    View Slide

15. Smart & Presentational
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Presentational Components
    
    
    • UI
    
    
    • No dependencies
    
    
    • Communicate via Inputs and Events / Outputs
    
    
    • local UI-State
    
    
    • UI-Logic
    
    
    • Same Input -> Same UI
    Smart- & Presentational Pattern
    

    View Slide

19. 👨💻
    

    View Slide

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 ❓
    
    
    • ?
    

    View Slide

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?
    

    View Slide

22. • Upfront Workload
    
    
    • Hard to
    fi
    nd scopes and “cut” components
    
    
    • Feature-Creeps - YAGNI
    The drawbacks…
    

    View Slide

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!
    

    View Slide

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
    

    View Slide