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. 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.
  2. Static Style Guides Built with (or generated) static HTML. They

    are standalone representations of modules that are build separately from your applications.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. Challenges Application The entire team must be on board on

    writing patterns, following code standards, and maintaining the patterns.
  8. 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.
  9. Module Anatomy Focus on implementing modules as a “single source

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

    1. Responsive 2. Accessible 3. Versioned 4. Managed Dependencies Module
  11. Creating Pages 1. Elements (base elements, like Normalize) 2. Modules

    (combination of elements) 3. Theme (look and feel specific to an application)
  12. 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)
  13. 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)