Taking Your Pattern Library to the Next Level

468f2c6b3ec4879a3481ba0dab36d8ea?s=47 David Furnes
November 04, 2015

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.

468f2c6b3ec4879a3481ba0dab36d8ea?s=128

David Furnes

November 04, 2015
Tweet

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
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  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.
  20. None
  21. None
  22. None
  23. .figure.-left

  24. None
  25. None
  26. 6.6.2

  27. ^6.6.0 ^6.5.0 ^5.0.0

  28. 6.6.2 6.6.2 5.3.4

  29. None
  30. None
  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/

  35. None
  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.
  43. None
  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

  57. None
  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

  65. None
  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.

  71. None
  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

  96. None
  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