Power to the Patterns

Component libraries, pattern portfolios, styleguides…. whatever you want to call them, using a modular design and build approach to developing sites and web apps is fast becoming an accepted best practice. But working in this way often comes with its own share of difficulties and pain points, particularly when it comes to integrating component libraries with production code.

In this talk Mark will look at some common issues that can crop up, how they might be avoided, and introduce a tool that they have been using internally at Clearleft to help mitigate some of these problems.

Transcript

1. POWER TO THE PATTERNS Creating component libraries that work from prototype to production Mark Perkins, Clearleft
2. @ALLMARKEDUP
3. STYLEGUIDES ATOMS PATTERNS COLLECTIONS COMPONENT LIBRARIES MOLECULES MODULES BLOCKS BITS VARIANTS ORGANISMS MODIFIERS PAGES AAAAAAARRGGHHH
4. STYLEGUIDES ATOMS PATTERNS COLLECTIONS COMPONENT LIBRARIES MOLECULES MODULES BLOCKS BITS VARIANTS ORGANISMS MODIFIERS PAGES AAAAAAARRGGHHH
7. WHAT IS A (WEB) COMPONENT LIBRARY?
11. “A place where I can preview individual pieces of my site/app and see the code that is used to create them.” — some people
12. “A bunch of files.” — other people
15. COMPONENT: A generic term to describe a piece of the website UI. It can refer to a single static HTML element, a whole page or (more commonly) something in between. At it's bare minimum it will consist of just a piece of markup, however more complex components can also potentially include styles, behaviour, tests, documentation and more. COMPONENT LIBRARY: A collection of components, organised in a meaningful manner.
16. CURRENT TOOLS & TECHNIQUES
17. SAAS APPLICATIONS
23. STYLESHEET PARSERS
26. STATIC SITE GENERATORS
31. BESPOKE SOLUTIONS
35. LIVING STYLEGUIDES COMPONENT LIBRARIES
36. ⌘C ⌘V
39. COMPONENT REPOSITORY “A bunch of files.”
40. NATIVE COMPONENT RENDERER <%= render partial:’govuk_component/beta_notice' %> <%= ui_component(“forms/search”, { label: “Search", autocomplete: true }) %>
41. ASSET LOADER <link rel=“stylesheet” href=“/css/main.css”> {{ loadCSS(‘main.css’) }}
42. COMPONENT BROWSER APP
43. OTHER FORMATS
44. PRODUCTION APPLICATION
45. WHY IS THIS SO HARD TO DO RIGHT?
46. WHY IS THIS SO HARD TO DO RIGHT? •Poor planning
47. WHY IS THIS SO HARD TO DO RIGHT? •Poor planning •Silo’d front-end & backend teams
48. WHY IS THIS SO HARD TO DO RIGHT? •Poor planning •Silo’d front-end & backend teams •Language/tooling mismatch
49. WHY IS THIS SO HARD TO DO RIGHT? •Poor planning •Silo’d front-end & backend teams •Language/tooling mismatch
50. SO YOU WANT TO BUILD A COMPONENT LIBRARY
51. WHAT? WHY? WHO?
52. ORGANISING AND NAMING STUFF
53. DOCUMENTATION
54. PREVIEW UI
55. WORKFLOW AND INTEGRATION
56. (MY) GOLDEN RULES
57. (MY) GOLDEN RULES •Filesystem-first development
58. (MY) GOLDEN RULES •Filesystem-first development •Build your components like your application
59. (MY) GOLDEN RULES •Filesystem-first development •Build your components like your application •Decouple finding/rendering logic from your application and preview UI
60. (MY) GOLDEN RULES •Filesystem-first development •Build your components like your application •Decouple finding/rendering logic from your application and preview UI •Beware opinionated tooling
61. (MY) GOLDEN RULES •Filesystem-first development •Build your components like your application •Decouple finding/rendering logic from your application and preview UI •Beware opinionated tooling •Integration is hard, plan for it first.
62. (MY) GOLDEN RULES •Filesystem-first development •Build your components like your application •Decouple finding/rendering logic from your application and preview UI •Beware opinionated tooling •Integration is hard, plan for it first.
63. INTRODUCING FRACTAL
64. “A tool to help you build, document and integrate component/pattern libraries into your web projects.”
66. • Written in Node JS
67. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory
68. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components
69. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components • Template language and build-tool agnostic
70. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components • Template language and build-tool agnostic • Supports component-level and system-level documentation generation
71. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components • Template language and build-tool agnostic • Supports component-level and system-level documentation generation • Flexible preview data definition
72. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components • Template language and build-tool agnostic • Supports component-level and system-level documentation generation • Flexible preview data definition • Plugins for web UI generation, bespoke workflow commands, etc
73. • Written in Node JS • Parses a directory of components and configuration data, stores a representation in memory • Provides an API that plugins, tools and sites can use to find, access and render the components • Template language and build-tool agnostic • Supports component-level and system-level documentation generation • Flexible preview data definition • Plugins for web UI generation, bespoke workflow commands, etc • Use via the CLI or as a NPM module in your app
74. OTHER TOOLS
75. OTHER TOOLS
76. OTHER TOOLS
77. OTHER TOOLS
78. OTHER TOOLS
79. FRACTAL
80. FRACTAL
81. FRACTAL WEB UI PLUGIN
82. FRACTAL JSON API PLUGIN WEB UI PLUGIN
83. FRACTAL JSON API PLUGIN WEB UI PLUGIN
84. DEMO TIME!
85. WORK IN PROGRESS!
86. WORK IN PROGRESS! Documentation and info:
87. WORK IN PROGRESS! Documentation and info: http://github.com/frctl/fractal
88. WORK IN PROGRESS! Documentation and info: http://github.com/frctl/fractal
89. THANKS :-) mark@clearleft.com @allmarkedup