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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. .figure.-left

    View full-size slide

  9. ^6.6.0 ^6.5.0 ^5.0.0

    View full-size slide

  10. 6.6.2 6.6.2 5.3.4

    View full-size slide

  11. PROCESS
    PROCESS
    YOUR OWN TOOLKIT
    YOUR OWN TOOLKIT
    THE FUTURE
    THE FUTURE

    View full-size slide

  12. PROCESS
    PROCESS

    View full-size slide

  13. PROCESS
    Make development easier.

    View full-size slide

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

    View full-size slide

  15. PROCESS
    Make design easier.

    View full-size slide

  16. PROCESS
    Mocks suck.

    View full-size slide

  17. PROCESS
    Make talking about
    design easier.

    View full-size slide

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

    View full-size slide

  19. PROCESS
    Make on boarding easier.

    View full-size slide

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

    View full-size slide

  21. YOUR OWN
    TOOLKIT
    YOUR OWN
    TOOLKIT

    View full-size slide

  22. YOUR OWN
    TOOLKIT
    Build your own
    Bootstrap.

    View full-size slide

  23. YOUR OWN
    TOOLKIT
    Your Project
    Complexity
    Project Size

    View full-size slide

  24. YOUR OWN
    TOOLKIT
    Handle complexity
    over time.

    View full-size slide

  25. YOUR OWN
    TOOLKIT
    DRY
    SOLID
    KISS
    YAGNI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. SOLID
    DRY
    SOLID
    KISS
    YAGNI

    View full-size slide

  29. DRY
    SOLID
    KISS
    YAGNI
    Single Responsibility
    Principle

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  34. {…}



    {…}



    {…}


    View full-size slide


  35. {…figures}

    View full-size slide


  36. {…figures}

    View full-size slide

  37. 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 full-size slide

  38. YOUR OWN
    TOOLKIT
    SINGLE RESPONSIBILITY PRINCIPLE
    Compose.
    3

    View full-size slide

  39. YOUR OWN
    TOOLKIT









    View full-size slide

  40. Build less, but
    better things.

    View full-size slide

  41. THE FUTURE
    THE FUTURE

    View full-size slide

  42. THE FUTURE
    IS NOW
    THE FUTURE
    IS NOW

    View full-size slide

  43. THE FUTURE
    IS NOW
    React

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

  46. THE FUTURE
    IS NOW

    View full-size slide

  47. THE FUTURE
    IS NOW





    Hello, Full-Stack Engineers!



    Hello, Full-Stack Engineers!

    View full-size slide

  48. THE FUTURE
    IS NOW





    Hello, Full-Stack Engineers!


    ⚠ Required ‘image’ was not supplied in Figure.

    Hello, Full-Stack Engineers!

    View full-size slide

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

    View full-size slide

  50. THE FUTURE
    IS NOW

    View full-size slide

  51. THE FUTURE
    IS NOW

    View full-size slide

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

    View full-size slide

  53. THE FUTURE
    IS NOW

    Example Button

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

    View full-size slide

  54. THE FUTURE
    IS NOW

    Example Button

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

    View full-size slide

  55. THE FUTURE
    IS NOW

    Example Button

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

    View full-size slide

  56. THE FUTURE
    IS NOW
    ⚠ Warning

    Example Button

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

    View full-size slide

  57. THE FUTURE
    IS NOW

    Example Button


    Example Button

    View full-size slide

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

    View full-size slide

  59. THE FUTURE
    IS NOW

    View full-size slide

  60. THE FUTURE
    IS NOW
    Web Components

    View full-size slide

  61. 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 full-size slide

  62. THE FUTURE
    IS NOW

    Example Button


    Example Button

    View full-size slide

  63. THE FUTURE
    IS NOW
    Web Components

    View full-size slide

  64. THE FUTURE
    IS NOW
    polymer-project.org

    View full-size slide

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

    View full-size slide

  66. Build less, but
    better things.

    View full-size slide

  67. Build things that help
    you build things.

    View full-size slide

  68. David Furnes
    @dfurnes

    View full-size slide