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)
   

   View Slide

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

   View Slide

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

   View Slide

4. kuncevic.dev
   @kuncevic
   NGXS Core Team
   

   View Slide

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

   View Slide

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

   View Slide

7. kuncevic.dev
   Components
   Component-based Architecture
   Root Component
   

   View Slide

8. kuncevic.dev
   Benefits
   ✅ Isolation
   ✅ Encapsulation
   ✅ Composition
   

   View Slide

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

   View Slide

10. kuncevic.dev
    Best Practices
    

    View Slide

11. kuncevic.dev
    Smart vs Dumb
    

    View Slide

12. kuncevic.dev
    
    What are Smart and Dumb
    Components?
    

    View Slide

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

    View Slide

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
    

    View Slide

15. kuncevic.dev
    DEMO
    

    View Slide

16. kuncevic.dev
    AKA Container and Presentational
    

    View Slide

17. kuncevic.dev
    Th nk you!
    @kuncevic
    

    View Slide