Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Max Schulte

May 10, 2023
Tweet

More Decks by Max Schulte

Other Decks in Programming

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, [email protected]

    View Slide