Atomic Design System In Context

Brad Frost created a design system for thinking about developing for the web as a front-end specialist. Atomic Design System is essentially boiled down into 5 separate categories:

1. Atoms (Elements)
   These are the smallest functional elements of a page, such as text labels, buttons, inputs or other HTML elements that can't further be broken down.
2. Molecules (Components)
   Simple compositions or groups of atoms that comprise a single unit. This may be an input box with a search button next to it and a label above it. Within Brad's book he mentions these should follow the "S" in "SOLID" from Robert C. Martin's Principles of Object Oriented Design which stands for Single Responsibility Principle. By this Brad implies that the molecule must only do one specific thing, not necessarily that it has only one reason to change. Brad refers to molecules near the end as "simple, functional, reusable components."
3. Organisms (Widgets)
   Comprised of potentially multiple molecules or atoms and molecules in conjunction to form a cohesive purpose. Here Brad specifically refers to organisms as "components" numerous times as well. In comparison, these may be more sophisticated components compared to molecules.
4. Templates
   Templates are simply a collection of elements, components and widgets that when together build an entire page and lays it out without actual data. You can think of these as a Class in object oriented design.
5. Pages
   Pages are instanced Templates, or Templates with actual data.

The actual benefit of the design system is in it's name. Atomic Design System helps by putting an emphasis on breaking things down into their most atomic units and creating categories of complexity that are well-named to be able to refer to them.

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

Even though the design system is not a linear process, most criticisms of the design system still arise due to this organization and the confusion of where something might be a molecule (component) or organism (widget.) Within this page, I even pair Organism (Widgets) and Molecule (component) with other names to help disambiguiate things. Nomenclature is a difficult thing to reconcile when certain words may naturally have different relative meanings based on expertise, culture etc. anyways.

My Criticism

There is, however no particular value in Templates as a category in atomic design. If I had to find a use, it might more specifically correlate with partials in an HTML pre-processor language like EJS, pug (jade), jinja, erb, mustache, etc. Abstracting this category provides no direct value as it's merely an implementation detail.

In Conclusion

It doesn't matter if a few molecules (components) get categorized as organisms (widgets) or vice versa if they're hard to specifically identify. The process of thinking about their categorization, complexity, and composition, the attempt to mentally and technically construct boundaries and the fact you have words to express these boundaries and categorizations to fellow team members is what's important.