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

Transcript

1. Maintainable Pattern Libraries @bermonpainter | Web Unleashed
2. Patterns The foundation of repeatable interactions that when combined create rich and complex systems.
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.
18. Living Style Guides Generated HTML, typically created from parsing documentation created as comments in CSS files.
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.