Rigid Atomic: Scalable Structure for SPA Components
A variation on the Atomic Design Methodology with clearer distinctions and improved maintainability
In my years as a Front-End Developer, and eventually, as a Front-End Lead, I’ve also been an apostle of the Atomic Design Principles as defined by Brad Frost.
The idea is that any UI Component should be classified into one of 5 categories: Atoms, Molecules, Organisms, Templates, and Pages. As the name suggests, the inspiration comes from the world of chemistry, with atoms consisting of the smallest indivisible UI Components with a single responsibility (a label or a simple button could be one) and the pages containing the whole definition for a page.
Throughout my years of implementing various systems (some quite massive in scale) and mentoring juniors in using this methodology I’ve encountered three core problems that often resulted in chaotic codebases that eventually fail to follow the principles:
- The distinction between molecules, organisms, and templates is vague and can often be difficult, with each developer creating their own instinct for categorization that does not necessarily match that of the team;
- The level at which components are granted interaction privileges with the…
