Atomic Drupal Development: Building Pieces Before Pages

Many designers are praising the benefits of Atomic Design. Rather than designing pages, Atomic Design focuses on designing systems of individual, reusable components. Designers aren’t – or at least shouldn’t be – the only ones thinking this way. From content strategy to QA, the entire team must be on the same atomic page.

Development is one area of a project that stands to benefit the most from this change in thought. Organizing a codebase by individual components keeps developers out of each other’s hair, reducing the code and effort overlap that often occurs when building by page or section. It also makes the codebase much easier to understand and maintain. Developers will know where to find code and how to fix, alter, or extend it, regardless of the original author. After enforcing coding standards, only git’s history will know who wrote what. This all saves time and money.

Because there are many ways to do anything in Drupal, building every component with the same approach is crucial. This session will outline how to build components "the Drupal way". It will cover:

• what components are and how to identify them in design deliverables
• best practices for every step involved with building a component
• view modes, hook_theme(), render arrays, templates, preprocess functions, etc.
• how to organize components within a maintainable codebase