Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites

by Micah Godbolt

Overview

Imagine what a large-scale web project would look like if frontend development were not treated as an add-on, but as an equal partner with backend development and content strategy. This practical book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level.

Using real-world examples, case studies, and practical tips and tricks throughout, author Micah Godbolt introduces you to the four pillars of frontend architecture. He also provides compelling arguments for developers who want to embrace the mantle of frontend architect and fight to make it a first-class citizen in their next project.

The four pillars include:

• Code: how to approach the HTML, CSS, and JavaScript of a design system
• Process: tools and processes for creating an efficient and error-proof workflow
• Testing: creating a stable foundation on which to build your site
• Documentation: tools for writing documentation while the work is in progress

Product Details

ISBN-13:	9781491926789
Publisher:	O'Reilly Media, Incorporated
Publication date:	02/20/2016
Pages:	195
Product dimensions:	6.00(w) x 8.90(h) x 0.60(d)

About the Author

Micah Godbolt, frontend architect, author, podcaster, trainer and speaker at worldwide open source events, is often found promoting frontend architecture, Sass, visual regression testing, and schema-based design at his blog, https://micah.codes. A Pacific Northwest native, he currently lives outside of Portland with his wife and two children.

Table of Contents

Preface vii

Part I Origins

1 The Discipline of Frontend Architecture 9

Adopting an Architectural Process 11

2 Alpha Project 13

A Slow, Powerful Start 13

Armed and Dangerous 15

3 The Pillars of Frontend Architecture 17

Working with the Four Pillars 17

The Pillars 18

Part II The Code Pillar

4 HTML 23

Markup of the Web's Past 23

Striking a Balance Between Control and Automation 25

It All Leads to a Design System 27

The Many Faces of Modular CSS Methodologies 27

Choosing What Is Right for You 31

5 CSS 33

Specificity Wars and the Pains of Inheritance 35

A Modern, Modular Approach 37

Other Principles to Help You Along the Way 39

Conclusion 44

6 JavaScript 45

Selecting Frameworks 45

Maintaining Clean JavaScript 46

Conclusion 49

7 Red Hat Code 51

Dependency Bloat 51

Location-Dependent Nightmare 52

Breaking the Design Down 53

Cataloging Components 54

The Road Runner Rules 55

Writing Your Own Rules 56

A Single Selector for Everything 57

Semantic Grids 65

Part III The Process Pillar

8 Workflow 71

The Old Development Workflow 71

The New Development Workflow 72

Frontend Workflow 73

Development 76

Distribution 78

Committing Compiled Assets 78

Continuous Integration Server 79

Distribution Channels 81

9 Task Runners 83

Going All In with Task Runners 84

Getting Task Runners into Your Project 86

Is There a Clear Winner? 88

10 Red Hat Process 89

Conquering the Last Mile 90

Schema-Driven Design System 91

Part IV The Testing Pillar

11 Unit Testing 105

The Unit 106

Test-Driven Development 107

A Test-Driven Example 107

How Much Coverage Is Enough? 109

12 Performance Testing 111

Setting a Performance Budget 111

Raw Metrics 113

Timing Metrics 115

Hybrid Metrics 116

Setting Up Performance Tests 117

Conclusion 119

13 Visual Regression Testing 121

The Usual Suspects 121

A Tested Solution 123

The Many Faces of Visual Regression Testing 124

14 Red Hat Testing 127

Visual Regression in Action 127

Conclusion 136

Part V The Documentation Pillar

15 Style Guides 141

Hologram Configuration 142

SassDoc 146

Conclusion 153

16 Pattern Libraries 155

What Is Pattern Lab? 155

Pattern Lab in Action 157

Homepage Template 160

Our First Variables 161

Going Atomic 161

Running Off Atomic Power 162

17 Red Hat Documentation 165

Stage 1 A Static Style Guide 165

Stage 2 We Just Reinvented Pattern Lab 168

Stage 3 Splitting the Pattern Library from the Style Guide 171

Stage 4 Creating a Unified Rendering Engine 172

Stage 5 Automating the Creation of New Patterns 175

18 Conclusion 177

Index 179