book

Frontend Architecture for Design Systems

by Micah Godbolt

January 2016

Intermediate to advanced

198 pages

3h 55m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Conventions Used in This BookWho This Book Is ForUsing Code ExamplesSafari® Books OnlineHow to Contact Us
Adopting an Architectural ProcessWhat’s the Catch?
A Slow, Powerful StartArmed and Dangerous
Working with the Four PillarsThe Pillars
Markup of the Web’s PastProcedural Markup: 100% Automation, 0% ControlStatic Markup: 0% Automation, 100% ControlStriking a Balance Between Control and AutomationModular Markup: 100% Automation, 100% ControlIt All Leads to a Design SystemThe Many Faces of Modular CSS MethodologiesOOCSS ApproachSMACSS ApproachBEM ApproachChoosing What Is Right for You
Specificity Wars and the Pains of InheritanceA Modern, Modular ApproachOther Principles to Help You Along the WaySingle Responsibility PrincipleSingle Source of TruthComponent ModifiersConclusion
Selecting FrameworksMaintaining Clean JavaScriptKeeping Your Code CleanCreate Reusable FunctionsConclusion
Dependency BloatLocation-Dependent NightmareBreaking the Design DownCataloging ComponentsThe Road Runner RulesWriting Your Own RulesA Single Selector for EverythingSingle Responsibility PrincipleSingle Source of TruthOpt-in ModifiersOpt-in ContextSemantic Grids

The Old Development WorkflowThe New Development WorkflowRequirementsPrototypingDevelopmentFrontend WorkflowProvisioningSpinning Up LocalStory WritingDevelopmentDistributionCommitting Compiled AssetsContinuous Integration ServerTagged ReleasesWhy Would You Ever Want to Do This?Distribution Channels
Going All In with Task RunnersDiving in DeeperGetting Task Runners into Your ProjectIs There a Clear Winner?
Conquering the Last MileA Standard Set of DeliverablesSchema-Driven Design SystemMoving to the Twig File
The UnitMore ReuseBetter TestingTest-Driven DevelopmentA Test-Driven ExampleHow Much Coverage Is Enough?Fixing the GapsCoverage from the Start
Setting a Performance BudgetCompetitive BaselineAveraged BaselineRaw MetricsPage WeightNumber of HTTP RequestsTiming MetricsHybrid MetricsPageSpeed ScoreSpeed IndexSetting Up Performance TestsGrunt PageSpeedGrunt PerfbudgetConclusion
The Usual SuspectsUnknowing DevelopersInconsistent DesignsWaffling Decision MakersA Tested SolutionThe Many Faces of Visual Regression Testing
Visual Regression in ActionThe Testing ToolsSetting Up GruntOur Test FileMaking a ComparisonRunning the Entire SuiteWhat Do We Do with Failing Tests?Moving from Failing to PassingMaking It Our OwnPlace Baselines in Component FolderRun Each Component Test Suite IndividuallyTest PortabilityConclusion
Hologram ConfigurationHologram Documentation BlockThe Hologram ProcessHologram ConclusionSassDocInstalling SassDocUsing SassDocExploring SassDocDigging Deep into SassDocInternal DependenciesConclusion
What Is Pattern Lab?Getting Started with Pattern LabPattern Lab in ActionHomepage TemplateOur First VariablesGoing AtomicRunning Off Atomic Power
Stage 1: A Static Style GuideStage 2: We Just Reinvented Pattern LabStage 3: Splitting the Pattern Library from the Style GuideStage 4: Creating a Unified Rendering EngineJSON SchemasStage 5: Automating the Creation of New PatternsCreating Patterns

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