Angular Clean Architecture

Introduction to Atomic Design

Fer Ayguavives
Webtips

--

Angular Clean Arquitecture

Can you read just at-a-glance what do you have in the shared module? And tell without opening other file, which components have dependencies or rely on other components?
Regardless of the answer, I invite you to grab a cup of coffee and join me in this dive in the Brad Frost 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…

--

--

Fer Ayguavives
Webtips

Coffee lover. Psychologist. Nerdy Front-End Developer since the 56-Kbps days. Javascript & Angular enthusiast. | Writer at Angular Playground