Better structure your project using the concept of smart and dumb components.

When working with the Angular project, we are often faced with the challenge of how to create the best structure for components and services. We focus on making sure that our application is divided into modules, and components into smaller components, and that all communication is done with the help of services. In contrast, we have a way to structure our components even better. This is the idea of Smart and Dumb Components.

The core idea of smart and dumb components

The components we create should be divided into those that contain presentation logic and those that simply accept data and propagate user events higher up. A dumb component cannot exist without a parent component. Dumb components focus on styling, it allows the smart component to focus on functionality. Their communication should only take place with the help of the @Input and @Output decorators. As in the diagram below.

What is a smart component?

We can call a component Smart, when it stores data, manipulates data, contains dependencies (i.e. services) or when decides how to modify the data based on user interaction and other conditionals.

We can see the following in the above code:

• it contains dependencies (i.e. BlogService)
• retrieves data (via ActivatedRoute)
• modifies the article property

When we talk about Dumb Component?

It's simple. It's a component whose job is merely to display data and emit user interaction to the component above. It does not manipulate data, it does not link to any services. They should not contain other components

As we can see, the component only contains properties that receive data or send events:

• Property clicked$ sends an event to the parent component that the user clicked on the header using the @Output() decorator for this.
• Properties title and description through the use of the @Input() decorator accept data from the parent component.

Why should we use concepts of dumb and smart components? Let's sum up.

Dumb components are easy to modify and easy to style, we can reuse them wherever we want and they are very readable. They should be used wherever you can. When we focus on styling the dumb components, we can focus on the logic of functionality in the smart components. This leaves our code cleaner and more acceptable to other developers.

‍

Hubert Wróblewski