Source
Book cube
Review based on post by Alexander Polomodov
Frontend Architecture for Design Systems
Authors: Micah Godbolt
Publisher: O'Reilly Media, Inc.
Length: 198 pages
Micah Godbolt on the 4 pillars of frontend architecture: code, processes, testing, documentation. Schema-driven design system from Red Hat.
OriginalFour pillars of frontend architecture
Code
Sweet trio: HTML, CSS, JavaScript. Code structuring and application of principles (SRP) in a front-end context.
Processes
Tools and processes for creating effective workflow. CI/CD and asset assembly.
Testing
Creating a sustainable solution: unit tests, performance tests, visual regression testing.
Documentation
Organize components in a modular design system for reuse.
The Role of the Frontend Architect
"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"
The author identifies three components of the role:
- Design — designing a system in which all front-end developers will work
- Planning — planning and determination of technical solutions
- Oversight — constant monitoring and adjustment."Frontend architecture is never a 'set it and forget it' proposition"
Key idea: "Without the early input of a frontend architect, projects run the risk of having to choose between reworking designs, platform, or infrastructure and telling the frontend developers to make do"
Schema-Driven Design System (Red Hat)
The chapter on the Red Hat process reveals schema-driven design system, which became the basis for a scalable design system:
| Component | Purpose |
|---|---|
| JSON Schema | Component Diagram - Contract for Data Structure |
| Template File | Component template (markup) |
| Sass Partial | Component Styles |
| Visual Regression Tests | Tests for visual regression |
| Testing Data | Test data for component verification |
| Documentation | Component documentation |
| Documentation Data | Data for examples in documentation |
From practice: This "schema-driven design system" approach works much better than alternatives, especially for large projects with many developers.
Testing
The testing portion of the book covers three key areas:
Unit Tests
Testing individual functions and components in isolation
Performance Tests
Performance and loading time monitoring
Visual Regression
Compare screenshots to identify visual changes
Key Findings
Framework-agnostic
The book is not promoting a specific library—the principles apply to any stack.
SRP on the frontend
The Single Responsibility Principle works for CSS as well - well stated in the context of styles.
Schema-driven approach
Contracts via JSON Schema provide predictability and scalability.
Constant supervision
Architecture requires constant attention and adjustments.
Limitations of the book
The book does a good job of covering the approach to front display rendering, but falls short of talking about the architecture of the entire application. If you are making an isomorphic application while simultaneously being responsible for the backend (even a fairly thin one), this book alone will not be enough for you.
What to study next in front-end architecture
Micro Frontends in Action
Practice of frontend decomposition into autonomous product modules and migration strategies from the monolith.
Building Micro-Frontends
Luca Mezzalira's approach to scaling frontend teams across domain boundaries and independent delivery.
The Art of Micro Frontends
An enterprise look at orchestration, governance and developer experience in micro-frontend platforms.
React.js: The Documentary
The history of React and its path to the industry standard.
Angular: The Documentary
How Angular went from a local prototype to a platform.
Vite: The Documentary
The story of a tool that accelerated front-end development.
Ember.js: The Documentary
History of the Ember framework and its architectural solutions.
Where to find the book
O'Reilly
Original edition in English
Translation
No official translation into Russian has been published