Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maintainable Pattern Libraries

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

Bermon Painter

September 16, 2015
Tweet

More Decks by Bermon Painter

Other Decks in Technology

Transcript

  1. Maintainable
    Pattern
    Libraries
    @bermonpainter | Web Unleashed

    View full-size slide

  2. Patterns
    The foundation of repeatable interactions that when
    combined create rich and complex systems.

    View full-size slide

  3. 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.

    View full-size slide

  4. Benefits
    1. Collaboration

    View full-size slide

  5. Benefits
    1. Collaboration
    2. Language

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Static Style Guides
    Built with (or generated) static HTML. They are standalone
    representations of modules that are build separately from
    your applications.

    View full-size slide

  11. Living Style Guides
    Generated HTML, typically created from parsing
    documentation created as comments in CSS files.

    View full-size slide

  12. 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.

    View full-size slide

  13. 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.

    View full-size slide

  14. 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.

    View full-size slide

  15. 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

    View full-size slide

  16. Challenges
    Application
    The entire team must be on board on writing patterns,
    following code standards, and maintaining the patterns.

    View full-size slide

  17. 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.

    View full-size slide

  18. Module Anatomy
    Focus on implementing modules as a “single source of
    truth” to be used across multiple application, without
    relying on copy/paste.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. API: Source of Truth

    View full-size slide

  24. PATTERN
    API
    PATTERN
    LIBRARY
    APP DATA

    View full-size slide

  25. Calling the API

    View full-size slide

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

    View full-size slide


  27. Home
    Services
    Contact

    View full-size slide

  28. Creating Pages
    1. Elements (base elements, like Normalize)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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)

    View full-size slide

  32. 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)

    View full-size slide