Maintainable Pattern Libraries

7559f6cff1f5efc2d210965febd4d71c?s=47 Bermon Painter
September 16, 2015

Maintainable Pattern Libraries

A style guide is a great collaboration tool to bridge communication gaps between business stakeholders, designers, and developers. Static or living style guides are a great place to start but become increasingly difficult to maintain because style guide generators are dependent on parsing comments in CSS in order to generate HTML patterns and documentation. In short, there is no single source of truth for the HTML leading to maintainability problems. In this session we will discover creating a truly reusable module through the creation of a pattern API.

FIVE THINGS AUDIENCE MEMBERS WILL LEARN

• Modular template patterns
• Dependency management and versioning per module
• Turning modules into the “single source of truth” through a module API
• How to call the API to create a style guide
• How to call the API to create templates and pages within an application

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

September 16, 2015
Tweet

Transcript

  1. Maintainable Pattern Libraries @bermonpainter | Web Unleashed

  2. Patterns The foundation of repeatable interactions that when combined create

    rich and complex systems.
  3. None
  4. Benefits A useful tool to use when breaking down a

    user interface into it’s most modular pieces, instead of thinking about things as a series of disconnected pages.
  5. Benefits 1. Collaboration

  6. Benefits 1. Collaboration 2. Language

  7. Benefits 1. Collaboration 2. Language 3. Consistency

  8. Benefits 1. Collaboration 2. Language 3. Consistency 4. Efficiency

  9. Benefits 1. Collaboration 2. Language 3. Consistency 4. Efficiency 5.

    Speed
  10. Benefits 1. Collaboration 2. Language 3. Consistency 4. Efficiency 5.

    Speed 6. Maintainability
  11. Static Style Guides Built with (or generated) static HTML. They

    are standalone representations of modules that are build separately from your applications.
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Living Style Guides Generated HTML, typically created from parsing documentation

    created as comments in CSS files.
  19. None
  20. None
  21. None
  22. None
  23. Challenges You’ve implemented a living style guide. Now what? It’s

    difficult it is to get buy-in, train teams, maintain the codebase between the pattern library and one or more applications, deal with technical debt, etc.
  24. Challenges Adoption If the people that manage the money don’t

    see or understand the value in a pattern library, the won’t dedicate the time, resources, and budget to maintain one.
  25. Challenges Governance Loose collaboration will fail. The must be a

    framework that clearly defines roles, responsibilities, and who have the authority to make decisions and provide a clear direction to the team.
  26. Challenges Governance 1. Strategy: who determines the overall strategy 2.

    Policy: who determines what the team must and must not do 3. Standards: who decides the nature of the pattern library
  27. Challenges Application The entire team must be on board on

    writing patterns, following code standards, and maintaining the patterns.
  28. Challenges Duplication of HTML With a static or living style

    guide and application you have 2x the maintenance. Each additional application increases the amount of work it takes to maintain and increases technical debt.
  29. Module Anatomy Focus on implementing modules as a “single source

    of truth” to be used across multiple application, without relying on copy/paste.
  30. .css Function & Unit Tests .html .js .coffee .sass .slim

    1. Responsive 2. Accessible 3. Versioned 4. Managed Dependencies Module
  31. .css Function & Unit Tests .html .js .coffee .sass .slim

    Pattern Library
  32. .css Function & Unit Tests .html .js .coffee .sass .slim

    Pattern Library Application
  33. .css Function & Unit Tests .html .js .coffee .sass .slim

    Pattern Library Applications
  34. API: Source of Truth

  35. PATTERN API PATTERN LIBRARY APP DATA

  36. Calling the API

  37. = module(“navigation/horizontal”, “api/primary-nav-links”, { label: primary-nav-links.href, link: primary-nav-links.href });

  38. <ul id=“primary-nav” class=“horizontal-list> <li class=“horizontal-list-item”><a href=“/home”>Home</a></li> <li class=“horizontal-list-item”><a href=“/services”>Services</a></li> <li

    class=“horizontal-list-item”><a href=“/contact”>Contact</a></li> </ul>
  39. Creating Pages 1. Elements (base elements, like Normalize)

  40. Creating Pages 1. Elements (base elements, like Normalize) 2. Modules

    (combination of elements)
  41. Creating Pages 1. Elements (base elements, like Normalize) 2. Modules

    (combination of elements) 3. Theme (look and feel specific to an application)
  42. Creating Pages 1. Elements (base elements, like Normalize) 2. Modules

    (combination of elements) 3. Theme (look and feel specific to an application) 4. Layout (combination of elements, modules, theme)
  43. Creating Pages 1. Elements (base elements, like Normalize) 2. Modules

    (combination of elements) 3. Theme (look and feel specific to an application) 4. Layout (combination of elements, modules, theme) 5. Page (generated output served to the client)
  44. Conclusion

  45. Fin.