Component-Based Design

Page-Based Design

Pages Provide Context

Thanks to Dmitry Alexandrov for sharing this image

Problems with this Approach

Component-Based Design

Influences:

• React

• Atomic Design

• BEM

• Lewis+Humphreys' Article

Component-Based Design

Component-Based Design

Advantages

 • clearly articulating behavior and functionality

• consistent, predictable UI
• less duplicated work for design and dev
• fewer tickets coming back from QA
• continual communication between teams
• teams learn from each other

Bringing It Home

  • Start small
  • Document style guidelines
  • Build an elements guide
  • Use documentation tools

 

Resources RE

• React-Styleguidist
• Storybook
• Style Guide Guide
• Styled-Components
• BEM
• Atomic Design
• Component-Based Design
• Building your own npm module

• Component Library Starter