Introduction to Atomic Design.

Defining atomic design in Angular contexts

Folder structure of an atomic design in Angular

Angular developers often adopt the container-presenter or smart-dumb to talk about components. Is a plain simple way to talk about dependencies and how components communicate with each other but lacks detail about the UI.

The concept of dumb component can be anything from a buttom to a layout. The atomic design complements the definition, by giving detailed information about the UI structure and relationships.

Atoms & Molecules — Dumb components

They are simple, reusable, and easy to test pieces of code. They both receive @Input and can emit @Ouput. The perfect candidates for UI libraries.

• Atoms: The smallest unit possible, reused all over the place. Normally a single HTML element with basic styling.
• Molecules: A single group of atoms.

Organisms & templates — Simplifying smart components

In terms of reducing smart components complexity, templates help reducing the HTML boilerplate, and organisms their typescript counterpart.

In my experience leading projects, I found that while these two are keys for app scalability and team performance, they are also rarely seen.

And this is due to temporality. When we initially design a complex smart component, we do it as a whole. We create the full page by slowly adding small chunks. And all of a sudden, a smart component can easily grow up to 500 lines of ts, and close to 1K of HTML-CSS, becoming a mud pool where every step is harder to take than the previous. Even if the logic is simple, the length of the file makes it hard to maintain.

Templates and organisms can help reduce the noise, and keep the code structured and ready to scale. It will be easier to recognize and reuse the pieces of code in future similar-looking features.

#javascript #angular #web-development #developer #programming