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
   

   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