Home Page Icon
Home Page
Table of Contents for
Cover
Close
Cover
by Micah Godbolt
Frontend Architecture for Design Systems
Preface
Conventions Used in This Book
Who This Book Is For
Using Code Examples
Safari® Books Online
How to Contact Us
I. Origins
1. The Discipline of Frontend Architecture
Adopting an Architectural Process
What’s the Catch?
2. Alpha Project
A Slow, Powerful Start
Armed and Dangerous
3. The Pillars of Frontend Architecture
Working with the Four Pillars
The Pillars
II. The Code Pillar
4. HTML
Markup of the Web’s Past
Procedural Markup: 100% Automation, 0% Control
Static Markup: 0% Automation, 100% Control
Striking a Balance Between Control and Automation
Modular Markup: 100% Automation, 100% Control
It All Leads to a Design System
The Many Faces of Modular CSS Methodologies
OOCSS Approach
SMACSS Approach
BEM Approach
Choosing What Is Right for You
5. CSS
Specificity Wars and the Pains of Inheritance
A Modern, Modular Approach
Other Principles to Help You Along the Way
Single Responsibility Principle
Single Source of Truth
Component Modifiers
Conclusion
6. JavaScript
Selecting Frameworks
Maintaining Clean JavaScript
Keeping Your Code Clean
Create Reusable Functions
Conclusion
7. Red Hat Code
Dependency Bloat
Location-Dependent Nightmare
Breaking the Design Down
Cataloging Components
The Road Runner Rules
Writing Your Own Rules
A Single Selector for Everything
Single Responsibility Principle
Single Source of Truth
Opt-in Modifiers
Opt-in Context
Semantic Grids
III. The Process Pillar
8. Workflow
The Old Development Workflow
The New Development Workflow
Requirements
Prototyping
Development
Frontend Workflow
Provisioning
Spinning Up Local
Story Writing
Development
Distribution
Committing Compiled Assets
Continuous Integration Server
Tagged Releases
Why Would You Ever Want to Do This?
Distribution Channels
9. Task Runners
Going All In with Task Runners
Diving in Deeper
Getting Task Runners into Your Project
Is There a Clear Winner?
10. Red Hat Process
Conquering the Last Mile
A Standard Set of Deliverables
Schema-Driven Design System
Moving to the Twig File
IV. The Testing Pillar
11. Unit Testing
The Unit
More Reuse
Better Testing
Test-Driven Development
A Test-Driven Example
How Much Coverage Is Enough?
Fixing the Gaps
Coverage from the Start
12. Performance Testing
Setting a Performance Budget
Competitive Baseline
Averaged Baseline
Raw Metrics
Page Weight
Number of HTTP Requests
Timing Metrics
Hybrid Metrics
PageSpeed Score
Speed Index
Setting Up Performance Tests
Grunt PageSpeed
Grunt Perfbudget
Conclusion
13. Visual Regression Testing
The Usual Suspects
Unknowing Developers
Inconsistent Designs
Waffling Decision Makers
A Tested Solution
The Many Faces of Visual Regression Testing
14. Red Hat Testing
Visual Regression in Action
The Testing Tools
Setting Up Grunt
Our Test File
Making a Comparison
Running the Entire Suite
What Do We Do with Failing Tests?
Moving from Failing to Passing
Making It Our Own
Place Baselines in Component Folder
Run Each Component Test Suite Individually
Test Portability
Conclusion
V. The Documentation Pillar
15. Style Guides
Hologram Configuration
Hologram Documentation Block
The Hologram Process
Hologram Conclusion
SassDoc
Installing SassDoc
Using SassDoc
Exploring SassDoc
Digging Deep into SassDoc
Internal Dependencies
Conclusion
16. Pattern Libraries
What Is Pattern Lab?
Getting Started with Pattern Lab
Pattern Lab in Action
Homepage Template
Our First Variables
Going Atomic
Running Off Atomic Power
17. Red Hat Documentation
Stage 1: A Static Style Guide
Stage 2: We Just Reinvented Pattern Lab
Stage 3: Splitting the Pattern Library from the Style Guide
Stage 4: Creating a Unified Rendering Engine
JSON Schemas
Stage 5: Automating the Creation of New Patterns
Creating Patterns
18. Conclusion
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Frontend Architecture for Design Systems
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset