Atomic Design

Introduction

I'm going to talk about atomic design, what i've learned after reading documentation about it and Brad Frost Book, where he explained how to actually structured your application. I could have some bad practices and errors so i open to have feedback and see different point of views.

What's Atomic Design?

When we talk about Atomic design, we are talking about a way to structure our components in order to be reusable and well written in order for other developers to understand it.

How is it structured?

Atomic design is structured just like in chemistry, atoms, molecules, organisms, templates and pages.
Atoms basically being the smaller portion of it, where we place things like buttons,text,etc. Basically anything small enough to be reusable everywhere and it would just have a div tag maybe.
Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties, and become more tangible and operational than atoms.
Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.
Templates are page-level objects that place components into a layout and articulate the design's underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template.
Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.

Why would you want to use atomic design?

There is a couple reasons but i would say that the main one is to keep your code clean and reusable, this would always be applied if the code you are writing is clean.

What you should take in consideration when creating new components?

You should always think, is it an atom? a molecule? an organism?, there are a few clues to figure out what are you doing. Let me elaborate: If you are not using any atoms and just using a small piece of tags let's say, you are maybe creating a new atom. If you are using multiple atoms you are creating a molecules and go on.
In order to be reusable you should always take in consideration what you are adding to the component, try to no put business logic on it unless it's 100% necessary but always give it another point of view to know if you can reduce the code or take out the business logic.

Recommendations

You should always discuss with your team new big changes and if you are creating a new molecule or organism you will always be tempted to add unnecessary logic so i would recommend to discuss it with your colleagues and try to figure out the best solution.

Here i will leave you the atomic design manual.Here
Cheers, Lautaro.