Smart and Dumb Components in Angular

This lightning talk is about Smart and Dumb Components approach

Presented at Angular Sydney 13 Jan 2021

Transcript

1. kuncevic.dev Smart and Dumb Components by ALIAKSEI KUNCEVIČ talk #38 v 1.0 (01/13/2021)
2. kuncevic.dev ALIAKSEI KUNCEVIČ GDE | Mentor https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic
3. kuncevic.dev @kuncevic COMMUNITY 📢 TEACHING 󰞹 PODCAST 🎙 OSS 🤓 💻
4. kuncevic.dev @kuncevic NGXS Core Team
5. kuncevic.dev @kuncevic CREATOR 💡 Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com
6. kuncevic.dev App Module Feature Modules Components Services Pipes etc Angular App
7. kuncevic.dev Components Component-based Architecture Root Component
8. kuncevic.dev Benefits ✅ Isolation ✅ Encapsulation ✅ Composition
9. kuncevic.dev Smaller Code Units ↓ Testability ↓ Maintainability ↓ Less bugs
10. kuncevic.dev Best Practices
11. kuncevic.dev Smart vs Dumb
12. kuncevic.dev What are Smart and Dumb Components?
13. kuncevic.dev 🤓 Smart 🤪 Dumb 1 😜 Dumb 2 🙃 Dumb N Smart and Dumb data 2 data N data 1
14. 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
15. kuncevic.dev DEMO
16. kuncevic.dev AKA Container and Presentational
17. kuncevic.dev Th nk you! @kuncevic