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

Taking Your Pattern Library to the Next Level

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.

David Furnes

November 04, 2015
Tweet

More Decks by David Furnes

Other Decks in Programming

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

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. It’s a _______________
    __________: built using ___,
    distributed as an _________,
    documented using ___, and
    published on ___________.

    View Slide

  15. It’s a library of interface
    components: built using ___,
    distributed as an _________,
    documented using ___, and
    published on ___________.

    View Slide

  16. It’s a library of interface
    components: built using Sass,
    distributed as an _________,
    documented using ___, and
    published on ___________.

    View Slide

  17. It’s a library of interface
    components: built using Sass,
    distributed as an npm module,
    documented using ___, and
    published on ___________.

    View Slide

  18. It’s a library of interface
    components: built using Sass,
    distributed as an npm module,
    documented using KSS, and
    published on ___________.

    View Slide

  19. It’s a library of interface
    components: built using Sass,
    distributed as an npm module,
    documented using KSS, and
    published on GitHub Pages.

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. .figure.-left

    View Slide

  24. View Slide

  25. View Slide

  26. 6.6.2

    View Slide

  27. ^6.6.0 ^6.5.0 ^5.0.0

    View Slide

  28. 6.6.2 6.6.2 5.3.4

    View Slide

  29. View Slide

  30. View Slide

  31. PROCESS
    PROCESS
    YOUR OWN TOOLKIT
    YOUR OWN TOOLKIT
    THE FUTURE
    THE FUTURE

    View Slide

  32. PROCESS
    PROCESS

    View Slide

  33. PROCESS
    Make development easier.

    View Slide

  34. PNC Bank buttons, courtesy of Brad Frost
    http://bradfrost.com/blog/post/interface-inventory/

    View Slide

  35. View Slide

  36. PROCESS
    Make design easier.

    View Slide

  37. PROCESS
    Mocks suck.

    View Slide

  38. PROCESS

    View Slide

  39. PROCESS
    Make talking about
    design easier.

    View Slide

  40. PROCESS
    It’s like an API for
    your style sheets.

    View Slide

  41. PROCESS
    Make on boarding easier.

    View Slide

  42. Your pattern library is
    a tool for building
    a healthy process.

    View Slide

  43. View Slide

  44. YOUR OWN
    TOOLKIT
    YOUR OWN
    TOOLKIT

    View Slide

  45. YOUR OWN
    TOOLKIT
    Build your own
    Bootstrap.

    View Slide

  46. YOUR OWN
    TOOLKIT
    Your Project
    Complexity
    Project Size

    View Slide

  47. YOUR OWN
    TOOLKIT
    Handle complexity
    over time.

    View Slide

  48. YOUR OWN
    TOOLKIT
    DRY
    SOLID
    KISS
    YAGNI

    View Slide

  49. DRY
    SOLID
    KISS
    YAGNI
    Don’t repeat yourself.

    View Slide

  50. DRY
    SOLID
    KISS
    YAGNI
    You Ain’t Gonna Need It

    View Slide

  51. SOLID
    DRY
    SOLID
    KISS
    YAGNI

    View Slide

  52. DRY
    SOLID
    KISS
    YAGNI
    Single Responsibility
    Principle

    View Slide

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

    View Slide

  54. YOUR OWN
    TOOLKIT
    SINGLE RESPONSIBILITY PRINCIPLE
    Identify responsibility.
    1

    View Slide

  55. YOUR OWN
    TOOLKIT
    SINGLE RESPONSIBILITY PRINCIPLE
    Identify responsibility.
    1
    The media object is
    responsible for
    layout.

    View Slide

  56. YOUR OWN
    TOOLKIT
    SINGLE RESPONSIBILITY PRINCIPLE
    Separate responsibilities.
    2

    View Slide

  57. View Slide



  58. View Slide


  59. {…}



    {…}



    {…}


    View Slide


  60. {…figures}

    View Slide


  61. {…figures}

    View Slide




  62. View Slide

  63. YOUR OWN
    TOOLKIT



    GTFO
    Get the filter out! Clean up cigarette butt litter.
    Prove It


    #TheSexiestWords
    Share the hottest ways to ask for consent without
    killing the mood.
    Prove It




    View Slide

  64. YOUR OWN
    TOOLKIT
    SINGLE RESPONSIBILITY PRINCIPLE
    Compose.
    3

    View Slide

  65. View Slide





  66. View Slide


  67. {…tiles}

    View Slide




  68. View Slide

  69. YOUR OWN
    TOOLKIT









    View Slide

  70. Build less, but
    better things.

    View Slide

  71. View Slide

  72. THE FUTURE
    THE FUTURE

    View Slide

  73. THE FUTURE
    IS NOW
    THE FUTURE
    IS NOW

    View Slide

  74. THE FUTURE
    IS NOW
    React

    View Slide

  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

    View Slide

  76. THE FUTURE
    IS NOW
    Build components,
    not pages.

    View Slide

  77. THE FUTURE
    IS NOW

    View Slide

  78. THE FUTURE
    IS NOW





    Hello, Full-Stack Engineers!



    Hello, Full-Stack Engineers!

    View Slide

  79. THE FUTURE
    IS NOW





    Hello, Full-Stack Engineers!


    ⚠ Required ‘image’ was not supplied in Figure.

    Hello, Full-Stack Engineers!

    View Slide

  80. THE FUTURE
    IS NOW
    Modules w/
    dependencies
    Compiled bundles
    Webpack
    MODULE BUNDLER

    View Slide

  81. THE FUTURE
    IS NOW

    View Slide

  82. THE FUTURE
    IS NOW

    View Slide

  83. THE FUTURE
    IS NOW
    Build documentation into
    your components.

    View Slide

  84. THE FUTURE
    IS NOW

    Example Button

    Button.propTypes = {
    kind: PropTypes.oneOf(Object.keys(styles))
    };

    View Slide

  85. THE FUTURE
    IS NOW

    Example Button

    Button.propTypes = {
    kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’])
    };

    View Slide

  86. THE FUTURE
    IS NOW

    Example Button

    Button.propTypes = {
    kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’])
    };

    View Slide

  87. THE FUTURE
    IS NOW
    ⚠ Warning

    Example Button

    Button.propTypes = {
    kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’])
    };

    View Slide

  88. THE FUTURE
    IS NOW

    Example Button


    Example Button

    View Slide

  89. THE FUTURE
    IS NOW
    http://dfurn.es/css-modules

    View Slide

  90. THE FUTURE
    IS NOW

    View Slide

  91. THE FUTURE
    IS NOW
    Web Components

    View Slide

  92. THE FUTURE
    IS NOW

    <br/>ds-button { border-radius: 4px; padding: 12px; }<br/>.primary { background: #23b7fb; font-size: 24px; }<br/>.secondary { background: #444; font-size: 18px; }<br/>


    <br/>document.registerElement('ds-button', {<br/>prototype: Object.create(HTMLButtonElement.prototype),<br/>extends: ‘button’,<br/>createdCallback: {<br/>value: function() {<br/>var t = document.querySelector(‘#button-template’);<br/>var clone = document.importNode(t.content, true);<br/>this.createShadowRoot().appendChild(clone);<br/>}<br/>}<br/>});<br/>

    View Slide

  93. THE FUTURE
    IS NOW

    Example Button


    Example Button

    View Slide

  94. THE FUTURE
    IS NOW
    Web Components

    View Slide

  95. THE FUTURE
    IS NOW
    polymer-project.org

    View Slide

  96. View Slide

  97. Your pattern library is
    a tool for building
    a healthy process.

    View Slide

  98. Build less, but
    better things.

    View Slide

  99. Build things that help
    you build things.

    View Slide

  100. David Furnes
    @dfurnes

    View Slide