Application Architecture – Angular Components richtig nutzen Session Max Marschall @MaxOSchulte Developer / Consultant

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

What are Components?

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

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

Let’s Play a game 👨💻

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

👨💻

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

Hey, I need another dropdown for speakers. 1. Display fi rst and last name 2. Both names when closed 3. Do it FAST SURE?

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 🚨

Let me refactor that …

👨💻

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

Smart & Presentational

• 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

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

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

👨💻

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

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

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

• 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!

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