Frontend Architecture for Design Systems

Chapter 3. The Pillars of Frontend Architecture

Every building needs a solid foundation, four walls, and a roof. These are nonnegotiable. The foundation holds the walls, the walls hold the roof, and the roof keeps you safe and dry. Any architect who failed to provide these essentials would certainly be considered a failure. As frontend architects, we are under a similar obligation any time we are involved in the creation of a new web property. We are tasked with being champions for the essential tools and processes required to make this website a success.

Working with the Four Pillars

Throughout the rest of this book, we will discuss what I call the four pillars of frontend architecture. These four groups of topics, technologies, and practices are the foundation of a scalable and sustainable design system. They set up a series of discussions that need to be had about the frontend of any new project. These conversations will help to set expectations in code quality, the time and effort needed to finish each user story, and the workflow process that will get all of this done in a timely manner.

These pillars in no way prescribe the only way to do something, or even the best way to do something. Each decision needs to be made in the context of the project that you are in. Sometimes the decision will be to not do anything! Projects of smaller scale, or those that are transient in nature, might not require the same level of foundation as a Fortune 500, customer-facing property meant ...