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 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.
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'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:
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.
Talk To Loop is a global platform (available in Zambia, Somalia, Indonesia and the Philippines) that enables people to share information and experiences about the humanitarian and development assistance they have received. In other words, it is an independent, unique tool for people using humanitarian aid to provide feedback on the services they receive.
When creating end-to-end global solutions, we often encounter challenges with product localisation. We need to ensure that the date and time format is appropriate. Display a currency that is convenient for the user and, most importantly, display content in a specific language. Of course, there are many ready-made solutions to the above problems. But what if we are dealing with a right-to-left written language? Let's see what challenges lie ahead.
As a modern Frontend Developer, you should have an eye for details, some architectural skills, and knowledge of how to design the application state. I will omit such skills as knowledge of CSS (style) or JS. For me, it’s a standard, so let’s focus on less obvious elements.