Frontend Architecture for Design Systems

Frontend Architecture for Design Systems

by Micah Godbolt
Released January 2016
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491926734

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Publisher resources

View/Submit Errata

Table of contents

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

Product information

  • Title: Frontend Architecture for Design Systems
  • Author(s): Micah Godbolt
  • Release date: January 2016
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491926734