ATOMIC Design Pattern with React..!

Atomic Design Pattern!

When we start building applications using react mostly it is essential to build the application with higher maintainability. As the complexity is growing it is essential fact to use a better architectural pattern to deal with its components. So the Atomic design pattern is very useful and crucial for our applications which are developed through React. Well it handles the readability, scalability, and flexibility of the application code in a better way.!

There are five distinct levels in the atomic design pattern. Yeah, it’s gonna memorize your chemistry class in the past..!

1.Atoms

2.Molecules

3.Organisms

4.Templates

5.Pages

As we go up in this structure the components get more complex. Pages are built from Templates, and Templates are built from Organisms, and so on.! So the basic building box of the hierarchy is the Atom, well the pattern takes its name..! Well, Let’s hop into responsibilities of each separate stage..!

• Atom: “ Basic tags and other design elements that can’t be broken down any further”

Atoms are the basic building blocks, Which could be a button, label, input component etc which are useful in an entire project.

• Molecule: “A group of atoms joined together to form a relatively simple module”

Molecules are groups of atoms bonded together to form a new component, They form simple UI components functioning together as a unit. As an example, we can take a search component which is made up of combining a Button(Search Button), Input field, and a label. Here the Button, Input field, and the label are separate atoms that are grouped here to form a single Molecule.

• Organism: “Group of molecules (and possibly atoms) joined together to form a distinct section of an interface”

Organisms can use one or many molecules or atoms. Usually, organisms function on their own, without relying on other elements on the page. As an example let’s take a navigation bar. Here we can embed a search Molecule (We discussed in the previous paragraph) and navigation menu buttons (Atoms)

• Template: “Age-level documents that provide context for these relatively abstract molecules and organisms, and focus on content structure”

Templates are built by combining organisms, molecules, and atoms. By the way, templates are pages without the real content (More likely to be a wireframe). They combine other components to get a proper website layout. Upon the template, the real content of the web app can be rendered.!

• Page: “Specific instances of a template. Replaces content structure with real representative content”

A page shows what a UI looks like with real content in a place where the areas were described by the Templates. Simply the Page is the final output of the page that we need to be rendered for the user.

The atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

When getting started with the atomic design is very straightforward, Starting with a UI kit is a great way to start as many of the already included atomic elements are going to be our foundational elements of the project. The practice of building the atoms into the pages can behave different arrangements is totally up to the developer as he/she follows the basics of the atomic design pattern..!