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

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)

    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