$30 off During Our Annual Pro Sale. View Details »

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

Aliaksei Kuncevič

January 13, 2021
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

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