Taking Your Pattern Library to the Next Level

From Future of Web Design 2015, NYC.

In this session, David will explore ways to take your pattern library to the next level. He'll discuss how to use your style guide as an effective communications tool, manage complexity as your website and design grows more complex, and improve your website architecture with upcoming technologies like React and Web Components.

Transcript

1. TAKING YOUR PATTERN LIBRARY TO THE NEXT LEVEL David Furnes @dfurnes TAKING YOUR PATTERN LIBRARY TO THE NEXT LEVEL Image Credit: NASA your pattern library
14. It’s a _______________ __________: built using ___, distributed as an _________, documented using ___, and published on ___________.
15. It’s a library of interface components: built using ___, distributed as an _________, documented using ___, and published on ___________.
16. It’s a library of interface components: built using Sass, distributed as an _________, documented using ___, and published on ___________.
17. It’s a library of interface components: built using Sass, distributed as an npm module, documented using ___, and published on ___________.
18. It’s a library of interface components: built using Sass, distributed as an npm module, documented using KSS, and published on ___________.
19. It’s a library of interface components: built using Sass, distributed as an npm module, documented using KSS, and published on GitHub Pages.
23. .figure.-left
26. 6.6.2
27. ^6.6.0 ^6.5.0 ^5.0.0
28. 6.6.2 6.6.2 5.3.4
31. PROCESS PROCESS YOUR OWN TOOLKIT YOUR OWN TOOLKIT THE FUTURE THE FUTURE
32. PROCESS PROCESS
33. PROCESS Make development easier.
34. PNC Bank buttons, courtesy of Brad Frost http://bradfrost.com/blog/post/interface-inventory/
36. PROCESS Make design easier.
37. PROCESS Mocks suck.
38. PROCESS
39. PROCESS Make talking about design easier.
40. PROCESS It’s like an API for your style sheets.
41. PROCESS Make on boarding easier.
42. Your pattern library is a tool for building a healthy process.
44. YOUR OWN TOOLKIT YOUR OWN TOOLKIT
45. YOUR OWN TOOLKIT Build your own Bootstrap.
46. YOUR OWN TOOLKIT Your Project Complexity Project Size
47. YOUR OWN TOOLKIT Handle complexity over time.
48. YOUR OWN TOOLKIT DRY SOLID KISS YAGNI
49. DRY SOLID KISS YAGNI Don’t repeat yourself.
50. DRY SOLID KISS YAGNI You Ain’t Gonna Need It
51. SOLID DRY SOLID KISS YAGNI
52. DRY SOLID KISS YAGNI Single Responsibility Principle
53. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE "The single responsibility principle states that every class should have a single responsibility, and that responsibility should be entirely encapsulated by the class.”
54. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE Identify responsibility. 1
55. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE Identify responsibility. 1 The media object is responsible for layout.
56. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE Separate responsibilities. 2
58. <Button> <Button> <Button>
59. <Figure> {…} <Button> </Figure> <Figure> {…} <Button> </Figure> <Figure> {…} <Button> </Figure>
60. <Gallery> {…figures} </Gallery>
61. <Gallery> {…figures} </Gallery>
62. <Revealer> <Gallery>…</Gallery> </Revealer>
63. YOUR OWN TOOLKIT <Revealer start=6> <Gallery columns=3> <Figure img=“gtfo.jpg”> <a href=“#”>GTFO</a> <p>Get the filter out! Clean up cigarette butt litter.</p> <Button>Prove It</Button> </Figure> <Figure img=“the-sexiest-words.jpg”> <a href=“#”>#TheSexiestWords</a> <p>Share the hottest ways to ask for consent without killing the mood.</p> <Button>Prove It</Button> </Figure> <!-- … --> </Gallery> </Revealer>
64. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE Compose. 3
66. <Tile /> <Tile /> <Tile /> <Tile /> <Tile />
67. <Gallery> {…tiles} </Gallery>
68. <Revealer> <Gallery>…</Gallery> </Revealer>
69. YOUR OWN TOOLKIT <Revealer start=5> <Gallery mosaic=true columns=4 featured=true> <Tile title=“GTFO” description=“…” img=“gtfo.jpg” staffPick=true /> <Tile title=“…” description=“…” img=“elephants.jpg” /> <Tile title=“…” description=“…” img=“deer.jpg” /> <Tile title=“…” description=“…” img=“kitten.jpg” /> <Tile title=“…” description=“…” img=“turtle.jpg” /> </Gallery> </Revealer>
70. Build less, but better things.
72. THE FUTURE THE FUTURE
73. THE FUTURE IS NOW THE FUTURE IS NOW
74. THE FUTURE IS NOW React
75. THE FUTURE IS NOW "React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy." – “Why React”, http://facebook.github.io/react/docs/why-react.html
76. THE FUTURE IS NOW Build components, not pages.
77. THE FUTURE IS NOW
78. THE FUTURE IS NOW <article class=“figure —left”> <div class=“figure__media”> <img src=“img.png"/> </div> <div class=“figure__body”> Hello, Full-Stack Engineers! </div> </article> <Figure layout=‘left’ image=‘img.png’> Hello, Full-Stack Engineers! </Figure>
79. THE FUTURE IS NOW <article class=“figure —left”> <div class=“figure__media”> <img src=“”/> </div> <div class=“figure__body”> Hello, Full-Stack Engineers! </div> </article> ⚠ Required ‘image’ was not supplied in Figure. <Figure layout=‘left’ image=‘ ’> Hello, Full-Stack Engineers! </Figure>
80. THE FUTURE IS NOW Modules w/ dependencies Compiled bundles Webpack MODULE BUNDLER
81. THE FUTURE IS NOW
82. THE FUTURE IS NOW
83. THE FUTURE IS NOW Build documentation into your components.
84. THE FUTURE IS NOW <Button kind=“primary”> Example Button </Button> Button.propTypes = { kind: PropTypes.oneOf(Object.keys(styles)) };
85. THE FUTURE IS NOW <Button kind=“primary”> Example Button </Button> Button.propTypes = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
86. THE FUTURE IS NOW <Button kind=“secondary”> Example Button </Button> Button.propTypes = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
87. THE FUTURE IS NOW ⚠ Warning <Button kind=“big”> Example Button </Button> Button.propTypes = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
88. THE FUTURE IS NOW <button class=“button_base_4f53 button_primary_32e”> Example Button </button> <Button kind=“primary”> Example Button </Button>
89. THE FUTURE IS NOW http://dfurn.es/css-modules
90. THE FUTURE IS NOW
91. THE FUTURE IS NOW Web Components
92. THE FUTURE IS NOW <template id=“button-template”> <style> ds-button { border-radius: 4px; padding: 12px; } .primary { background: #23b7fb; font-size: 24px; } .secondary { background: #444; font-size: 18px; } </style> <content></content> </template> <script> document.registerElement('ds-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’, createdCallback: { value: function() { var t = document.querySelector(‘#button-template’); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } } }); </script>
93. THE FUTURE IS NOW <button is=“ds-button” class=“primary”> Example Button </button> <button is=“ds-button” class=“secondary”> Example Button </button>
94. THE FUTURE IS NOW Web Components
95. THE FUTURE IS NOW polymer-project.org
97. Your pattern library is a tool for building a healthy process.
98. Build less, but better things.
99. Build things that help you build things.
100. David Furnes @dfurnes