Sharing React Components: From Atoms and Molecules to Pages

Sharing components of all scales to optimize frontend collaboration.

Image by Elchinator from Pixabay

Atomic Design

The terms “atoms”, “molecules” and “pages” come from Brad Frost's seminal work “ Atomic Design ”. In his book, he encourages us to think of our user interface as a hierarchical structure made of independent modules, arranged by role and structure — from the simplest component, the atom, to an entire page.

Atomic components are components that cannot be broken down into smaller pieces (and if they do, they become completely useless). For example, button elements, inputs, labels, etc. Molecules are relatively simple groups of UI elements functioning together as a single unit. For example, a form label, search input, and a button that forms a search form molecule. As mentioned earlier, this hierarchy continues all the way to full pages.

Complexity and Reusability

The “Atomic Design” hierarchy correlates with levels of abstraction and reusability. A full-page, for example, is a very concrete entity. It is not reusable and will not appear more than once in an app. Simpler components, atoms, molecules, and even organisms, may very well appear numerous times in a single app.

This continuum of reusability is tremendously important for organizations looking to build and maintain a design system or a component library.

Sharing Components as a Means for Collaboration between Independent Teams

We traditionally share simple components, atoms and molecules, to maintain a consistent UI but there’s no good reason why we shouldn’t use similar methodologies to enable collaboration between independent teams. We can enable a new style of collaboration, similar in many ways to micro frontends, to enable teams to independently deliver large component compositions — organisms, templates, and even pages.

Enough talking, let’s code!

For this demonstration, I will be using Bit ( Github ). Bit is a tool that enables you to isolate components and compositions from any codebase and share them to a component collection in bit.dev .

As a short POC, I will isolate and share components of different scales. I will then install an organism, the toDoList in a new React project.

To follow this POC, clone this repo:

$ git clone https://github.com/giteden/react-demo-app.git
$ cd react-demo-app
$ yarn

Export Components

Install Bit CLI:

$ yarn global add bit-bin

Log in:

$  bit login

Initialize a workspace:

$ bit init --package-manager yarn

Track all the app’s components (located in the ‘components’ library):

$ bit add src/components/*

My repo is no longer versioned solely as meaningless code. It now has an additional semantic layer where code is versioned as components.

Let’s check if there are any dependency graph issues that need to be resolved:

$ bit statusnew components
(use "bit tag --all [version]" to lock a version with all your changes)> button ... ok
     > h1 ... ok
     > list ... ok
     > removable-list-item ... ok
     > text-input ... ok
     > to-do-list ... ok

All good :)

Configure a compiler for the shared components so that they could be used in other environments (with different build configurations).

$ bit import bit.envs/compilers/react --compilerthe following component environments were installed
- bit.envs/compilers/[email protected]

Tag the components to build them in an isolated environment and lock changes to version.

$ bit tag --all 1.0.06 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)new components
(first version for components)
     > [email protected]
     > [email protected]
     > [email protected]
     > [email protected]
     > [email protected]
     > [email protected]

Export the tracked components:

$ bit export <username>.basic-todo-app

For example:

$ bit export eden.basic-todo-app

The components are now available in my (or yours) basic-demo-app collection in bit.dev .

Install a Component in a New Project

Let’s install the entire to-do-list in a new project:

$ npx create-react-app new-project
$ cd new-project
$ yarn add @bit/eden.basic-todo-app.to-do-list

Let’s add the package to our app:

import React from 'react';
import './App.css';
import ToDoList from '@bit/eden.basic-todo-app.to-do-list';function App() {
  return (      <div className="App">
         <h1>New Project</h1>
<ToDoList />
      </div>    )
}export default App;

A ToDoList organism installed in a new project

Conclusion

That was a very basic POC but you can easily imagine how using the same methodology will enable multiple teams to deliver features independently, with a single team composing it all into one complete app (using $ bit list --outdated the composing team is able to identify components that have newer versions)