Atomic Design, Design Systems and React. Cool, but...

Atomic Design, Design Systems and React. Cool, but...

The principles of Atomic Design have transformed (probably forever) the way we look at UI components and code modularization. Pattern Libraries and Design Systems – predominantly built in React – have become widespread across many companies.

No doubts, these are cool tools and approaches, and we have all fallen in love with them. But...

In this talk, I'll share not only the learnings but also all the "buts" that we have found in our exciting journey developing (in React, of course) a Design System for Badoo.

----

Video #1 - JS Roundabout: https://www.youtube.com/watch?v=UvMmBQgrMSc
Video #2 - Front-End London: https://www.youtube.com/watch?v=oi3lY39wbfA

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

July 19, 2018
Tweet

Transcript

  1. MOBILE WEB TEAM Cristiano Rastelli didoo.net / @areaweb

  2. What we are going to talk about i. Atomic Design

    ii. Design Systems iii. React iv. Cosmos v. But… vi. Conclusions
  3. None
  4. Cristiano Rastelli didoo.net / @areaweb Mobile Web Team

  5. team.badoo.com

  6. webdeldn.rocks codemotionworld.com

  7. None
  8. Atomic Design by Brad Frost http://atomicdesign.bradfrost.com

  9. The book about Atomic Design http://atomicdesign.bradfrost.com

  10. “Atomic” approach to UI design

  11. Our Sketch Design Library in Badoo

  12. (which is not completely new) www.teehanlax.com/story/medium/

  13. Atomic Design in one GIF

  14. None
  15. Components http://atomicdesign.bradfrost.com ATOM MOLECULE ORGANISM TEMPLATE PAGE

  16. Component Library LIBRARY COMPONENTS PAGE / APP https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

  17. A design system is like a cake… People & Process

    Documentation UI Components
  18. It’s a complex system! Design System Processes Components Dev Standards

    UI Presentation Layer Web Native Documentation Style Guide Voice & Tone Testing Content Strategy Design Principles Brand Visual Design Language Design Assets UI Kit Platforms https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5 DESIGN SYSTEM
  19. The golden definition medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935 “A style guide is an artifact

    of a design
 process. A design system is a living,
 funded product with a roadmap
 and backlog, serving an ecosystem ” design system serving an ecosystem product Nathan Curtis
  20. Companies with a Design System ACL - Airbnb - Alberta

    Government - Altinn - Ant Financial - Appear Here - Atlassian - Audi - Auth0 - Automattic/WordPress - Badoo - British Airways - Barnard Levit - Barricade - BBC - Bookatable - Bristol City Council - Buffer - Buzzfeed - CA Technologies - Carnegie Mellon - Channel 4 - City of Philadelphia - Clearleft - CloudFlare - CMS.gov - Co-Op - Code For America - DC Comics - Dell - Disqus - DoSomething.org - Dropbox - Drupal - Dubizzle - Duolingo - eBay - Editorially - edX - Envato - Estonia - Eurostar GLU - Facebook - Financial Times - Fontshop - Frontify - FutureLearn - GE Digital - GitHub - Google - GOV.uk - Greenpeace - Hailo - Harmony - Healthcare.gov - Help Scout - Heroku - Homify - HP Enterprise - IBM - Instacart - Khan Academy - Lasse Diercks - Liferay - Lonely Planet - Lost My Name - Mailchimp - Mapbox - Marvel - Mass.gov - Microsoft Office - Mixpanel - Money Advice Service - Morningstar - Mozilla/Firefox - NASA - National Geographic - National Instruments - Next - Nordnet - OpenTable - Oracle - Ordnance Survey - Pega Systems - Perch - Pivotal - Pluralsight - Priceline - Quicken Loans - Rackspace - Relais & Châteaux - Royal Canin - Salesforce - SAP - Seek - Shopify - Sky - Skype - Skyscanner - Snyk - South Tees Hospital - Spotify - Starbucks - Swiss Confederation - Texas State - The Guardian - The Times - ThermoFisher - ThinkUp - Time Warner Cable - Tourism Whistler - Tradeshift - Trello - Tuts+ - U.S. Design Standards - Uber - Ubuntu - University of Edinburgh - University of Manchester - University of Oxford - USAJobs - Ushahidi - uSwitch - VMware - Walmart - Weight Watchers - West Virginia University - Westpac GEL - WeWork - WhatsApp - Winstrap - WooCommerce - Yelp - 18F U.S. …and many, many, many more! Badoo
  21. The benefits of a design system consistent/cohesive design language USERS

    alignment of processes DESIGN & ENGINEERING efficiency PRODUCT DESIGN & DEVELOPMENT living documentation VISUAL & TECHNICAL communication/collaboration ENTIRE COMPANY marketing/branding/hiring PR & COMMUNITIES
  22. That’s how you feel…

  23. To know more… Style Guides, Pattern Libraries, Design Systems and

    other amenities. Cristiano Rastelli Mobile Web Team https://speakerdeck.com/didoo/style-guides-pattern-libraries-design-systems-and-other-amenities
  24. None
  25. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body>

    Web “Components”
  26. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body>

    Web “Components” COMPOSITION
  27. A common ground

  28. A common language “card”

  29. The advent of React

  30. Predominantly React React No frameworks Vanilla Multiple jQuery Angular Vue

    Other https://adele.uxpin.com/
  31. To know more… https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

  32. None
  33. Demo

  34. None
  35. None
  36. Codebase

  37. Design Tokens { "global": { "type": "token", "category": "bricks" },

    "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
  38. React

  39. CSS +

  40. Folders structure DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE


    (React Web App)
  41. Things to notice React • we generally have only pure

    components (this is a UI library) • we split components is sub-components (our files are generally quite small, and if they’re not then is a “code smell” for us) • we use prop-types for type checking (and documentation) CSS • we use BEM notation for the classnames • classnames are “name-spaced” to avoid conflicts • extensive use of design tokens as Sass variables (when appropriate)
  42. A simple component

  43. A simple component

  44. A complex component

  45. A complex component

  46. Some numbers 10k + 5k 36 + 98 180 70%

    Lines of JS + CSS code Components (Main + Sub) UI Coverage Visual Regression Tests
  47. Visual Regression Testing diff after before https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process

  48. The full story https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2

  49. None
  50. “Direction” of componentization https://medium.com/ge-design/ges-predix-design-system-8236d47b0891 ATOM MOLECULE ORGANISM TEMPLATE PAGE Atomic

    Design by Brad Frost Atomic Design at GE (Predix Design System)
  51. The “atomic” problem Jina Anne, Nathan Curtis, Trent Walton, 


    Adam Morse, and many others “Everything is a component.”
  52. Flat navigation structure Flat folder structure Keep everything flat!

  53. (We used a “fake” categorisation) quark atom molecule organism layout

    other QUARK ATOM MOLECULE FEATURE LAYOUT OTHER
  54. Two distinct kind of components “Layout” Composition “Content”

  55. Web “Components” COMPOSITION <body> <h1>I am a title</h1> <my-component theme=“dark”>

    <another-component/> </my-component> </body>
  56. How to look at your components /1 When in doubt,


    break down a component * but not too much, or you’ll end up with “dust” of components break down
  57. How to look at your components / 2 “Expected” component

    Component A ➔ (“Layout”) Component B ➔ (“Content”)
  58. Gall’s Law on complex systems https://medium.com/@didoo/systemantics-a778c4247cbb

  59. Gall’s Law on complex systems “A complex system that works

    is invariably found to
 have evolved from a simple system that worked. A complex system designed from scratch never works
 and cannot be patched up to make it work.
 You have to start over with a working simple system. ” complex system evolved from a simple system from scratch never works working simple system cannot be patched up
  60. How much UI coverage? https://twitter.com/nathanacurtis/status/969197119730061313

  61. How much coverage? https://twitter.com/resmini/status/912373274323103751

  62. Component's average cost https://twitter.com/nathanacurtis/status/971110575114801152

  63. Evangelisation https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4

  64. None
  65. Atomic Design is just the beginning Start here End here

  66. The complexity is in the connections http://www.didoo.net/2015/07/modules-components-and-systems/

  67. "Nothing is particularly hard
 if you divide it in small

    jobs." HENRY FORD
  68. Cristiano Rastelli didoo.net / @areaweb Mobile Web Team

  69. The theme used for these slides it’s been heavily inspired

    by the amazing, refreshing, superlative work done by Maria Arenas (Tandem Design NYC) for the campaign of Alexandria Ocasio Cortez. See: www.maaarenas.com CREDITS