Containers & Components
Öner Zafer
Best way of doing it! According to me 😄
It can be summarized as separating the data operations from UI operations.
It requires at least 2 components. One is the responsible component for the service calls and the other one is responsible for rendering the HTML
aka smart & dump component
What is that for?
- Separation of concerns
- Reusability
- Composability
- Maintainability
- Easy to test
COOL!
It's easier if we see some code!
Let's try to implement a simple list of video items which has an image and a title and a link to be opened on button clicked.
Something like this
We need to implement
- VideoListContainer
- VideoListComponent
and maybe
- VideoItemComponent
VideoListContainer
VideoListComponent
VideoItemComponent
Did we achieve it?
Separation of concerns
Reusability
Composability
Maintainability
Easy to test
We built something like this:
But we need...
Let's make it better
- VideoListContainer
- ListComponent
- ListItemComponent
- VideoItemComponent
VideoListContainer
ListComponent & ListItemComponent
VideoItemComponent
What we have done?
- Created even smaller, dumber components
- Empowered the composability more
- Managed to have even easier testability
- Removed event propagation overhead
Let's discuss