Atomic Design, a small walkthrough

This article reflects my humble opinion and perspective on Atomic Desing.

The atomic design is a methodology created by Brad Frost in 2013, and even now, we can still use its perspective in our modern world, even though things used to be left behind pretty fast in IT.

Atomic Design can be resumed in one single image.

After seeing this image you may think, “Oh It’s a copy past like any other article, skip.”, don’t give up yet.

In this article, I’ll make a super express overview with some add-ons on each step.

Atoms

The idea of having an Atom is like a little piece of Lego, alone you can do much, but still important to build the big thing.
Atoms will be the small unit of code, most likely the HTML tag itself, like an H1 or p.

The big deal here is if you test this layer you probably will have a decent coverage since the beginning, I know, no one like that much testing, but they are important, and testing the base of your code may save you in the future.

Molecules

Now we have a bunch of pieces of Lego, WITH TESTS, they alone don't look like much, but when combined they can become something we can start to call components.

A component can be an “input with a label and a button”, the idea is to fuse molecules keeping in mind the concept of reusability, Split your code into pieces that make sense to reuse, and you will probably revisit your molecule several times to update some parts to allow a new behavior to exist and here's the dangers lurks.

Be wise when creating Molecules, since these are the most reusable parts of your system, find the perfect balance between adapting an old molecule to create and splitting the responsibility among two or more Molecules, remember that creating multiple molecules to do almost the same job may be stupid but having a monster molecule withe 232353 props to handle all 64716741 behaviors you need may not be the best idea.

‍After creating our tests we can go on with the next step.

Organism

Now we arrive at the organisms, here we start getting serious.
Now is the time to create fusions of multiple molecules to achieve something bigger and better, in this “layer” we usually start using our APIs, so this means that in the Molecules and Atoms, we should not make requests API requests or handle states?

In order to be able to reuse the Molecules, reducing the responsibility of each one to just react to the received data may be a great idea, if we let the data fetching and global state handle the organisms, each organism will group some molecules, and create different responsibilities for the same Molecules.

Like an input Molecule, formed by a label Atom a button Atom, and an input Atom may be a form Organism or a search Organism, reuse wisely the Molecules you have created for multiple purposes is the key to success

Templates

Templates are almost like a cake pan, we sure know that a web platform has several screens that look the same.

Every page needs to have the same header, the same footer, and the same menu, and only the content will be changing “SPA resumed in 2 lines”.

We know that every system has its peculiarity and custom rules, but on a normal day, most of the screens carry the same layout and only a few changes in the middle.

The templates have the responsibility to carry the information of each possible layout of your platform, is almost like a cake pan, every pan has its shape, and like our templates will be no different.