Smart and Dumb Components in Angular

Slide 1

Slide 1 text

kuncevic.dev Smart and Dumb Components by ALIAKSEI KUNCEVIČ talk #38 v 1.0 (01/13/2021)

Slide 2

Slide 2 text

kuncevic.dev ALIAKSEI KUNCEVIČ GDE | Mentor https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic

Slide 3

Slide 3 text

kuncevic.dev @kuncevic COMMUNITY 📢 TEACHING 󰞹 PODCAST 🎙 OSS 🤓 💻

Slide 4

Slide 4 text

kuncevic.dev @kuncevic NGXS Core Team

Slide 5

Slide 5 text

kuncevic.dev @kuncevic CREATOR 💡 Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 6

Slide 6 text

kuncevic.dev App Module Feature Modules Components Services Pipes etc Angular App

Slide 7

Slide 7 text

kuncevic.dev Components Component-based Architecture Root Component

Slide 8

Slide 8 text

kuncevic.dev Beneﬁts ✅ Isolation ✅ Encapsulation ✅ Composition

Slide 9

Slide 9 text

kuncevic.dev Smaller Code Units ↓ Testability ↓ Maintainability ↓ Less bugs

Slide 10

Slide 10 text

kuncevic.dev Best Practices

Slide 11

Slide 11 text

kuncevic.dev Smart vs Dumb

Slide 12

Slide 12 text

kuncevic.dev What are Smart and Dumb Components?

Slide 13

Slide 13 text

kuncevic.dev 🤓 Smart 🤪 Dumb 1 😜 Dumb 2 🙃 Dumb N Smart and Dumb data 2 data N data 1

Slide 14

Slide 14 text

kuncevic.dev Smart vs Dumb Smart Component Dumb Compoent Provide data to components Look and feel (html+css) Wraps components Displays data via @input Tightly coupled to the app Less coupled, reusable