Simplifying Developer Experience with Atomic Design — Part 1

by Sambhav Jain

So, what is Atomic Design? Hmmm!!. Another design pattern is trending. !!FOMO alert!!. Why the hell do we need it? What problem does it solve? Is it over-engineering, or is it a boon for developers? And a million other questions arise like a flash in our minds.

And since we love Joey.

In this two-part series, we will discuss Atomic Design w.r.t React, and I’ll try to answer all these questions. Stay Tuned.

Design System: Need of the hour

So why do we need a design pattern, if any? Unlike any other library or framework, react doesn’t enforce one to have a specific architecture pattern. This opens a vast scope of optimisations and developer-friendly systems. We can create our custom set-up according to our use case.

As simple as it sounds, at the same time, React’s flexibility can introduce a huge mess in a large-scale application with various teams working on a different set of business aspects. Now, since each team has its own set of developers, designers, and product managers, they can have a different architecture setup as well, which creates havoc over a period of time.

To solve this problem, we introduce the Design System:

Design System is not just a style guide; it’s a UI Kit. Component System plus a style guide.

1. Consistency: Having a design system promotes consistency across all our products and has direct business impacts.
2. Maturity: As your product looks consistent, it brings maturity to the table and creates a reliable impact on customers. Like Google, it has its specific theme across all its products.

Improves Delivery Time : With a ready-made design system, you can save up to 70% of the team’s time during the product development process. This increases the quality and quantity of the delivered functionality. -Mikhail Nikipelov

When to go for a Design System ?

Design system is considered best for large scale applications having large team handling different business verticals. Since, design system requires a lot of time and effort initially from designers, pm’s, and devs which only a sufficient size of team can afford.

Atomic Design

https://medium.com/the-andela-way/https-medium-com-edwinkato-atomic-design-bc3c77a5cb1a

We’re not designing pages, we’re designing systems of components. — Stephen Hay.

By this quote, let’s begin what is Atomic Design.

Simply put, Breaking your web page into atoms, molecules, organisms and templates is Atomic Design.

Having an atomic design pattern in your react application, can drastically reduce your development time of new product features, improve readability, maintainability and simplify developer life. Let’s dive deeper into it.

Atoms

Atoms are the smallest entity in your user interface. Buttons, text, icons, labels, etc are considered as atoms.

Molecules

Molecules are combination of two or more individual atoms. TextInput (Input + Text), List Item are such examples.

Organisms

Organisms are combination of several atoms and molecules together. Header (Heading, Search Bar, List of Items) is considered as an Organism.

Organisms acts as individual owners of their features or in software principals, they also follow Single Responsibility Rule.

Templates

Templates are wire frames of the layout containing organisms, molecules and atoms collectively to create a UI layer.

Pages -powerhouse of the web page

Data injection happens through pages into templates or you can say containers in which all the business logic is written.

In pages you can call all the apis, translate data and store it in redux or pass it in templates as props.

Data flow via Pages to Components layer

Advantages

1. Improves readability: you can literally read your code by just looking into the template and the component structure is so simple.
2. Maintainability: Improved readability is directly proportional to maintenance of the application.
3. Reusability: Since components are divided into atoms and molecules, creating organisms are literally just combining these into how the user interface looks and each combination can have its own set of feature and uniqueness. This is the beauty of this design.
4. Scalability: Adding a feature or a change in a component can be a project specific or it can be a centralised one, in which changing in the library version and just an update is required for a repository.

Disadvantages

There’s a lot of talk about advantages of atomic design and its usability. Discussing its disadvantages is again necessary for an informed decision, before adopting to it.

1. Maintenance: Creating a design system or component library is a cumbersome process. Requires lot of effort and time which can impact business, if not managed judiciously.

Prop Drilling: This is a very crucial problem to understand and must know. Developers often come across this problem, without even knowing it. While adopting an Atomic design pattern, devs usually pass a large no of props from a parent component to the child component, and in between there are a lot of components which doesn’t need those props, which indeed creates unnecessary renders impacting the browser performance. To avoid this use React’s context API and pass props judiciously and follow best practices.

Conclusion

In this fast moving technology, frontend engineering is not behind and has achieved a lot in the last years. Every 6 months there is something new in frontend. Knowing when to adapt what, is important for your business, after all we are improving tech to impact business not the other way around, right ?

Atomic design is surely trending and FOMO is in every developer’s mind, but asking out the right questions to the team is important if it fits your use case or not? Whether you can afford that time? What’s the priority right now. And if the answer is positive, go ahead and START SMALL.

By starting small, what I meant is to create a roadmap and first make some atoms and a few molecules before creating all the way. Because trust me you’re gonna have several iterations coming your way, so you don’t want to create complex organisms before having a decent understanding of creating reusable components.

On the last note, don’t rush think, discuss and start small.

Please comment your thoughts and opinions on this, would love to discuss and hear your thoughts. Also, soon there will be a 2nd part post this, where we will identify how to break up the web page into this pattern.