Redhat.com: An Architectural Case Study

9,042 views

Published on

Red Hat needed a new pattern library that would be flexible enough to integrate into our current Drupal 7 site, yet powerful enough to build future D7, D8 and other Red Hat branded sites. This pattern library would create a consistent, brand approved, look across all of our web properties, and become a common UI development platform for Designers, UX, Devs and Project managers.

In this case study we’ll explain our architectural approach to deliver dozens of tightly packaged components to Redhat.com and other web properties through a variety of distribution methods.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
9,042
On SlideShare
0
From Embeds
0
Number of Embeds
7,021
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Redhat.com: An Architectural Case Study

  1. 1. Redhat.com: An Architectural Case Study Ryan Wilson Micah Godbolt Shawn Iwinski
  2. 2. redhat.com UX DEV QA BA Height of Development 4 large groups of people creating one website…
  3. 3. • 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
  4. 4. Front-end Styleguide Driven Development Our solution Back-end
  5. 5. • A sprint ahead • Better handoffs to our Devs • Improved maintainability UX Styleguide Driven Development Creating a relevant design system Build Process and Pattern Library
  6. 6. DEV Styleguide Driven Development Creating a relevant design system • Faster UX hand-off to a backend developer • Implementation Instructions Improved Implementation
  7. 7. QA Styleguide Driven Development Creating a relevant design system • A target to test against • Cross browser testing sooner • Earlier exposure to patterns Visual Guidelines
  8. 8. BA Styleguide Driven Development Creating a relevant design system • Able to review features before dev implements • Full page prototypes in the browser Reliable Reference
  9. 9. “[The Styleguide] helped conversations with product owner and clarified implementation approach” - Jose Maturino, Business Analyst Styleguide Driven Development Now we’re getting comments like this! “WebUX was pretty easy to develop on for a newbie” - Andrew Riley, Drupal Developer
  10. 10. Styleguide Driven Development The effect of our solution ● Always up-to-date representation of our UI ● Easily maintainable ● Improved unit testing ● Better communication between designers, developers and customers.
  11. 11. Micah Godbolt Phase2
  12. 12. BREAKING THINGS DOWN The Chemistry of a Living Design System
  13. 13. ROAD RUNNER RULES Rules 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.
  14. 14. SINGLE SELECTOR APPROACH OOCSS is an Anti-pattern?
  15. 15. SINGLE SELECTOR APPROACH Single Responsibility Principle
  16. 16. SINGLE SELECTOR APPROACH Single Responsibility Principle
  17. 17. SINGLE SELECTOR APPROACH Single Source of Truth
  18. 18. OPT-IN MODIFIERS I’m Nothing Without Class
  19. 19. OPT-IN CONTEXTS Nothing Taken Out of Context
  20. 20. SEMANTIC GRID
  21. 21. NON SEMANTIC GRID
  22. 22. SEMANTIC GRID
  23. 23. FLEXBOX ENHANCED GRID A Magical Combination
  24. 24. MODULAR DESIGN Layouts and Components
  25. 25. RAPID PROTOTYPING
  26. 26. RAPID PROTOTYPING The Old System Themeing Development Design WireframeRequirements
  27. 27. RAPID PROTOTYPING The New System DevelopmentPrototypeRequirements
  28. 28. Shawn Iwinski Red Hat
  29. 29. WebUX Drupal Integration Current implementation ● Red Hat internal “contrib” module ● Bower ● Per component theming / templates ● Drupal sharable component definitions ● Views UI integration
  30. 30. WebUX Drupal Integration Issues Current implementation ● Duplication ● WebUX changes
  31. 31. WebUX Drupal Integration TNG ● WebUX: JSON schema defined components ● WebUX: Twig templates The Next Generation
  32. 32. ● UX defined ● Drupal module ● WebUX updates WebUX Drupal Integration Benefits ● Faster feature development ● Increased code quality
  33. 33. Ryan Wilson www.drupal.org/u/ryanwilson Micah Godbolt www.drupal.org/u/micahgodbolt @micahgodbolt Shawn Iwinski www.drupal.org/u/siwinski www.linkedin.com/in/siwinski plus.google.com/+ShawnIwinski github.com/siwinski
  34. 34. WHAT DID YOU THINK? EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE THANK YOU!

×