Micah Godbolt [Micah Godbolt] - Frontend Architecture for Design Systems

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.

Lets dive into this definition and explore what our role would be as frontend architects.

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 which to test code. Without a design for the finished product, how could we determine whether or not our code actually has met that standard? A carefully designed system will have checks and balances ensuring that all code contributed to that system adds perceivable value, rather than just adding lines of bloat.

With a clear design in mind, the planning stage involves mapping out the development workflow. What steps will a developer take to write a line of code and see that code through to production? In the simplest case, this plan involves FTPing into a server, editing a file, and hitting Save. For most projects, it will involve some combination of version control, task runners, CSS processors, documentation tools, test suites, and server automation.

The goal of the frontend architect is to design a well-oiled machine that provides quick and painless setup; offers useful feedback in the form of linting, tests, and documentation; and reduces much of the human error that occurs when we perform repetitive tasks.

Frontend architecture is never a set it and forget it proposition. No design or plan is ever perfect or complete. Clients needs (as well as the needs of developers) will change and evolve over time, and a process that was working well in one phase of the project might need to be revisited later to improve efficiency or reduce errors.

A key talent of a frontend architect is the ability to continually make those adjustments. Modern build tools make it very easy to change workflows and distribute those changes out to each team member.

Some people have asked if becoming a frontend architect means a role in management, and never writing a line of code again. I can personally attest that not only do I write more code as an architect, but I get to write in a greater variety of languages, and for a larger number of tools. Its not that I write less code, but simply that the audience of my code has changed. A frontend developers audience is the end user, whereas a frontend architects audience is the developers themselves.