Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What are Components?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Let’s Play a game 👨💻

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

👨💻

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 🚨

Slide 12

Slide 12 text

Let me refactor that …

Slide 13

Slide 13 text

👨💻

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Smart & Presentational

Slide 16

Slide 16 text

• 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

👨💻

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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]