2

We are following in a successful way the Atomic Design to organize our ReactJS components in our library. After some dozen components build, we start to have a fundamental doubt about how to organize the organisms.

Our goal is to build a rule of thumb so that we can build code management tools to properly handle components and provide a standard for our team to choose where to put a newly created component.

Here is the rules we are adopting:

Atoms: Are components that does not include any other component in the library. So, it shall not have any import from other atomic component.

Molecules: Are components that can only import atoms. So, if the component has an import NNN from '../atoms/...' it will be considered a molecule. Molecules cannot import components from itself (the molecule library), but only atoms.

At organism, we have the first fundamental doubt. I will describe it into 3 options:

Option A:

Organisms: These are components that can only import molecules. So only import NNN from '../molecules/...' will be allowed on organisms. If you have to import a molecule and an atom in the same component, it will be considered an organism.

Option B:

Organisms: These are components that can import molecules or molecules AND atoms only. So only import NNN from '../molecules/...' or import NNN from '../molecules/...' together with import NNN from '../../atoms/...' will be allowed on organisms.

Option C:

Organisms: These are components that can import molecules or molecules AND atoms or molecules AND atoms AND organisms only. So only import NNN from '../molecules/...' or import NNN from '../molecules/...' together with import NNN from '../../atoms/...' or import NNN from '../molecules/...' together with import NNN from '../../atoms/...' together with import NNN from '../../molecules/...' will be allowed on organisms.

Templates: These are components that can import all components from lower hierarchy together (atoms, molecules and organisms). If it imports a single organism, it is a template. Naturally what can be imported here depends on the organisms options decision above.

Pages: Can import everything as it goal is to put content on the the lower hierarchy elements.

The organisms decision will affect the depth of the hierarchy and also the library usage.

Seems that the Atomic Design Methodology shifts its concepts above organisms (with templates and pages), and so should be organism the higher aggregator of lower level components (Option C), but we can make a new level keeping all the aggregation into the templates level, so the templates will not be only page structures, but in fact component structures.

Does this make sense in terms of ReactJS library development and what option should best fit the development strategy?

James Z
  • 12,209
  • 10
  • 24
  • 44
Mendes
  • 17,489
  • 35
  • 150
  • 263
  • 1
    It will be easier to answer this question with a scheme that illustrate your main options. This link might help you https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f – Sylvain Martin Oct 18 '17 at 19:39

1 Answers1

0

This article explains the atomic design methodology perfectly:

http://atomicdesign.bradfrost.com/chapter-2/

To quote what you need:

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Generic Bot
  • 309
  • 1
  • 4
  • 8
pkestikar
  • 21
  • 3