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

Smart and Dumb Components in Angular

Smart and Dumb Components in Angular

This lightning talk is about Smart and Dumb Components approach

Presented at Angular Sydney 13 Jan 2021

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

January 13, 2021
Tweet

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