Flexible Design Systems

Design Systems are the language that binds UX and Engineering together at scale. The nuances in their delivery are many spanning multiple disciplines and workflows from maintaining living documentation to deployment & rollback across many consuming products. This talk will explore what Design Systems are, how they can be built, documented and delivered at scale. It will cover topics such as:

* What makes a good Component example?
* How can I coordinate deployment of a Design System across multiple product teams?

It will compare & contrast choices in answering these questions along with demos of how Charlie's team at GoDaddy delivers Design Systems at scale across dozens of product teams and nearly 19 million customers using React, Storybook, and more.

Transcript

1. Delivering Flexible 
 Design Systems
2. WARNING: THIS TALK CONTAINS MOVING & FLASHING IMAGES. IF YOU ARE SENSITIVE TO THESE IN ANY WAY PLEASE BE ADVISED.
4. Who am I? Just
6. SENIOR DIR., UX PLATFORM GoDaddy ON THE INTERNET THEY CALL ME @INDEXZERO BOARD MEMBER, OPENJS FOUNDATION
8. UX Platform? …?
10. cross cutting All of our technology user experience A BIT MORE THAN JUST OUR DESIGN SYSTEM
12. UXCore2 Our design system ABOUT 50 COMPONENTS REACT BASED OVER 100 CONTRIBUTORS STARTED IN LATE 2015 DEPLOYED WORLDWIDE ~40% OF FRONT END ENGINEERS
13. LET’S BREAKDOWN THE PROBLEM
14. Delivering Flexible 
 Design Systems Design Systems Flexible Delivering
15. Delivering Flexible 
 Design Systems Design Systems
16. ELEMENTS of a DESIGN SYSTEM
18. ‘sub-atomic’ First off the atomic design of COLOR PALETTE, TYPOGRAPHY, SPACING, “VOICE”
20. COMPONENTS ATOMS & MOLECULES OF ATOMIC DESIGN Lots of
22. LIVING DOCUMENTATION all disciplines for ENGINEERS TECHNICAL WRITERS DESIGNERS CONTRIBUTORS
23. CONSIDER EVEN A SIMPLE BUTTON COMPONENT
24. CONSIDER EVEN A SIMPLE BUTTON COMPONENT
25. CONSIDER EVEN A SIMPLE BUTTON COMPONENT
26. ‘intuitive familiar’ equals Raskin, ‘94
27. WORKFLOWS
29. governance of system extensibility The
30. Delivering Flexible 
 Design Systems Design Systems Flexible Delivering
31. Delivering Flexible 
 Design Systems Flexible
32. RESPONSIVE DESIGN Assuming of course …yeah? Not up for debate, right?
33. CONSIDER A DROPDOWN ON WEB & MOBILE (REACT NATIVE)
35. FEATURES HOW MANY IS “TOO MANY”?
36. STYLES
37. STYLES CSS? INLINE STYLES? DO YOU NEED BOTH?
43. are you one brand? many? or
44. λ-CALCULUS OF COLOR SELECTION
45. λ-CALCULUS OF COLOR SELECTION
46. λ-CALCULUS OF COLOR SELECTION
47. λ-CALCULUS OF COLOR SELECTION WHAT IF A BRAND WANTS TO USE “SECONDARY” FOR “PRIMARY” BUTTON? MORE BUTTON-SPECIFIC VARIABLES FOR REBINDING In λ-calculus this is an “α-conversion”
48. Delivering Flexible 
 Design Systems Design Systems Flexible Delivering
49. Delivering Flexible 
 Design Systems Delivering
51. STAGES of DELIVERY
52. DEVELOP & PUBLISH & PROMOTE & MAINTAIN & ROLLOUT
54. DEVELOP WHERE WORKFLOW IS KING
56. EASY Make it contributors for any new
58. ENTRY POINT Treat every a FIRST INTERACTION as though IT COULD BE
60. small module the
61. small module the most easily is understood
63. monorepo Using a
64. monorepo Using a YOUR PACKAGES/**/README.MD STILL MATTERS! diligence requires AND –– npm home your-package
65. Use Storybook (cross platform is still a little rough)
66. Use Storybook (cross platform is still a little rough) storybook Just use color me seriously impressed
67. HAVE an EXAMPLE STRUCTURE
69. imagine Now 25+ examples
71. EXACTLY WHAT’S A BETTER APPROACH?
74. AS SIMPLE possible with as CLEAR REQUIRE / IMPORT USAGE DESIGN DOCUMENTATION PLATFORM SPECIFIC EXAMPLES ZERO CONFIG, SANE DEFAULTS
76. DOCZ is solving SIMILAR CHALLENGES
77. storybook but is DEVELOPMENT-FOCUSED MORE FLEXIBLE …NOT A FULL SOLUTION
79. npm install @exemplar/storybook-react https://github.com/godaddy/exemplar
80. EXEMPLAR evolving to is USE STORYBOOK PRESETS SUPPORT DESIGN DOCS (MDX) API DOCS (REACT-DOCGEN) SUPPORT MULTIPLE TOOLS (DOCZ)
82. PUBLISH WHAT COULD GO WRONG?
84. PRODUCTION begins at PUBLISH TIME
86. can break publishing NPM INSTALL & UNIT TESTS UPSTREAM BUILD TOOLCHAINS REACT NATIVE APPS MISCONFIGURED CONSUMERS
89. PROMOTE ... CONTINUOUS DEPLOYMENT AND THE NATURE OF DESIGN SYSTEMS
91. too many unknowns there are simply …WHEN OPERATING AT LARGE ENOUGH SCALE ANYWAY
93. Let’s ROLLOUT TO PRODUCTION!
94. WARNING: CONSUMER BUNDLES SHOULD NOT INCLUDE YOUR DESIGN SYSTEM OR DEPENDENCIES THAT CHANGE INFREQUENTLY PLEASE BE ADVISED.
96. vendor bundle USE A
97. vendor bundle USE A VENDOR.MIN.JS REACT REACT-DOM REACT-INTL DESIGN-SYSTEM.MIN.JS BUTTON DROPDOWN …ETC. APPLICATION.MIN.JS
98. There should only be one true version
99. There should only be one true version design system of your in production
100. Your computer npm publish your design system npm
101. Your computer npm publish your design system all your users any install version they want npm
102. Your computer npm publish your design system all your users any install version they want npm get different versions!
103. consistent delivery ENFORCE or face peril
105. centralized deployment benefits of FIX BUGS FASTER ACROSS SITES EASILY REBRAND YOUR SYSTEM ROLLBACK ANY BREAKS QUICKLY BETTER INSIGHTS INTO USAGE
106. …SOUNDS GREAT! BUT HOW DO I DO IT? I’M GLAD YOU ASKED!
107. webpack externals EXPOSE and version them
109. webpack externals? WHAT ARE
110. ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY”
111. ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE 0
112. ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE 0 module.exports = /* module 0’s code */
113. ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE 0 module.exports = /* module 0’s code */ MODULE 1 module.exports = /* module 1’s code */ MODULE 2 module.exports = /* module 2’s code */ MODULE 3 module.exports = /* module 3’s code */
114. ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE 0 module.exports = /* module 0’s code */ MODULE 1 module.exports = /* module 1’s code */ MODULE 2 module.exports = /* module 2’s code */ MODULE 3 module.exports = /* module 3’s code */ module.exports = window.path.to.module2;
116. ANY WEBPACK.CONFIG.JS
117. ANY WEBPACK.CONFIG.JS
118. CONSISTENT asset DISTRIBUTION
119. Your computer npm publish your design system
120. Your computer npm publish your design system all your users
121. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm
122. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm get the same version!
123. REMOVING EXTERNALS RENAMING EXTERNALS ENSURING PROPER USAGE UNEXPECTED CONSEQUENCES
124. YOU MUST have a ROLLBACK
 PLAN
126. warehouse.ai Using npm dist-tag add @your/package@1.2.3 prod makes this trivial ... TRY IT OUT! HTTPS://GITHUB.COM/GODADDY/WAREHOUSE.AI
128. MAINTAIN FIXING FIRES BEFORE THEY HAPPEN
130. DEVOPS WHEN THINGS DON’T GO AS PLANNED
131. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm get the same version!
132. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm UNEXPECTED DOWN-TIME get the same version!
133. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm requests next will FAIL! UNEXPECTED DOWN-TIME get the same version!
134. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm requests next will FAIL! UNEXPECTED DOWN-TIME get the same version! AND
 THEN EVERY
 CONSUMER
 IS
 DOWN
136. single point the FAILURE of
138. LET’S TALK about CACHING
140. CACHING PERFORMANCE SAVING COPIES ……FOR SPEED
141. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm
142. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm +80ms
143. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm +80ms +80ms for your users
144. Your computer npm publish Warehouse.ai your design system all your users new request versions every Xm +80ms use always cached copy +80ms for your users +0ms for your users
146. FAILOVER CACHING SAVING COPIES ……FOR LATER
147. Your computer npm publish Warehouse.ai your design system everyone is still up! new request versions every Xm requests next will FAIL! UNEXPECTED DOWN-TIME AND
 THEN EVERY
 CONSUMER
 IS
 DOWN
148. Your computer npm publish Warehouse.ai your design system everyone is still up! new request versions every Xm requests next will FAIL! UNEXPECTED DOWN-TIME the use FAILOVER CACHE
150. OUT-OF-BAND-CACHE THIS IS WHY WE CREATED A REUSABLE npm install out-of-band-cache
153. HYGIENE PAYING TECHNICAL DEBT
154. ... YOU CAN’T AVOID IT
155. ... YOU CAN’T AVOID IT WARNING: ON A LONG ENOUGH TIMELINE, IF LEFT UNCHECKED ALL SOFTWARE WILL CRUMBLE FROM TECHNICAL DEBT PLEASE BE ADVISED.
157. UPGRADING TO NEW VERSIONS: REACT, BABEL, WEBPACK, ETC. REMOVING DEPRECATED APIS E.G. componentWillReceiveProps, etc. USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.
158. IT ADDS UP QUICKLY UPGRADING TO NEW VERSIONS: REACT, BABEL, WEBPACK, ETC. REMOVING DEPRECATED APIS E.G. componentWillReceiveProps, etc. USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.
159. MAY THE SOURCE BE WITH YOU SLIDES WILL BE POSTED ON TWITTER SHORTLY – FOLLOW ME @INDEXZERO THANKS FOR LISTENING!