Redhat.com: An Architectural Case Study

Ryan WilsonMicah GodboltShawn Iwinski

redhat.com

UX

DEV

QA

BA

Height of Development4 large groups of people creating one website…

• Manual processes

• Lack of reusability

• Inconsistent designs

UX

• Waiting on UX for markup, css, and js

DEV

• Test after dev implementation

• No target to test against

QA

• Review after implementation

• Refer to outdated artifacts

BA

We all faced challenges

Front-end

Styleguide Driven DevelopmentOur solution

Back-end

• A sprint ahead

• Better handoffs to our Devs

• Improved maintainability

UX

Styleguide Driven DevelopmentCreating a relevant design system

Build Process and Pattern Library

DEV

Styleguide Driven DevelopmentCreating a relevant design system

• Faster UX hand-off to a backend developer

• Implementation Instructions

Improved Implementation

QA

Styleguide Driven DevelopmentCreating a relevant design system

• A target to test against

• Cross browser testing sooner

• Earlier exposure to patterns

Visual Guidelines

BA

Styleguide Driven DevelopmentCreating a relevant design system

• Able to review features before dev implements

• Full page prototypes in the browser

Reliable Reference

“[The Styleguide] helped conversations with product owner and clarified implementation approach”- Jose Maturino, Business Analyst

Styleguide Driven DevelopmentNow we’re getting comments like this!

“WebUX was pretty easy to develop on for a newbie”- Andrew Riley, Drupal Developer

Styleguide Driven DevelopmentThe effect of our solution

● Always up-to-date representation of our UI

● Easily maintainable

● Improved unit testing

● Better communication between designers, developers and customers.

Micah GodboltPhase2

BREAKING THINGS DOWNThe Chemistry of a Living Design System

ROAD RUNNER RULESRules to live and die by

Immutable rules focused on things we always, never or only do.

● A Layout never affect components

● A Component never does the layout’s job (Background, width, gutters)

● Elements only have a single class, all styles come from that class.

SINGLE SELECTOR APPROACHOOCSS is an Anti-pattern?

SINGLE SELECTOR APPROACHSingle Responsibility Principle

SINGLE SELECTOR APPROACHSingle Responsibility Principle

SINGLE SELECTOR APPROACHSingle Source of Truth

OPT-IN MODIFIERSI’m Nothing Without Class

OPT-IN CONTEXTSNothing Taken Out of Context

SEMANTIC GRID

NON SEMANTIC GRID

SEMANTIC GRID

FLEXBOX ENHANCED GRIDA Magical Combination

MODULAR DESIGNLayouts and Components

RAPID PROTOTYPING

RAPID PROTOTYPINGThe Old System

Themeing

Development

Design

WireframeRequirements

RAPID PROTOTYPINGThe New System

DevelopmentPrototypeRequirements

Shawn IwinskiRed Hat

WebUX Drupal IntegrationCurrent implementation

● Red Hat internal “contrib” module

● Bower

● Per component theming / templates

● Drupal sharable component definitions

● Views UI integration

WebUX Drupal Integration IssuesCurrent implementation

● Duplication

● WebUX changes

WebUX Drupal Integration TNG

● WebUX: JSON schema defined components

● WebUX: Twig templates

The Next Generation

● UX defined

● Drupal module

● WebUX updates

WebUX Drupal Integration Benefits

● Faster featuredevelopment

● Increased code quality

Ryan Wilsonwww.drupal.org/u/ryanwilson

Micah Godboltwww.drupal.org/u/micahgodbolt@micahgodbolt

Shawn Iwinskiwww.drupal.org/u/siwinskiwww.linkedin.com/in/siwinskiplus.google.com/+ShawnIwinskigithub.com/siwinski

WHAT DID YOU THINK?EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE

THANK YOU!