Frontend Architecture for Design Systems

Chapter 1. The Discipline of Frontend Architecture

Frontend architecture is a collection of tools and processes that aims to improve the quality of frontend code while creating a more efficient and sustainable workflow.

When I think about the role of a frontend architect, I always think about the characteristics that it shares with that of a traditional architect.

An architect is defined as someone who designs, plans, and oversees the construction of buildings. This is exactly what a frontend architect does, except that the end product is a website. And just as an architect spends more time drafting up schematics than pouring concrete, the frontend architect is more concerned with building tools and processes than writing production code.

Let’s dive into this definition and explore what our role would be as frontend architects.

Design

Think about a building with no clear architecture. The important decisions were all left up to the builders doing the work. One wall built was with stone, another with brick, a third with wood, and the fourth omitted because it was trendy.

The overall look and feel of the website is still squarely in the hands of skilled designers, but the frontend architect crafts the frontend approach and design system philosophy. By designing a system all frontend developers are going to work within, the architect sets a clear vision of what the end product, the code, will look like.

Once a frontend architect sets the vision, the project has a standard against ...