Thinking About React, Atomically

Atomic Design is the concept of breaking down user interfaces into smaller, simpler elements. There are five different levels in atomic design: atoms, molecules, organism, templates, and pages. These levels are combined to make user interfaces.

React, at its core, follows Atomic Design inherently by encouraging developers to keep components as simple and as broken down as possible. From this simplicity, we can create more complex components and containers of components to create the user interfaces for our applications. Following these patterns gives us, as developers, an easy to manage (and test) ecosystem within our React applications.

Transcript

1. Thinking About React, Atomically ⚛ Katia Wheeler
2. Thank You Sponsors!
3. Katia Wheeler @KatiaKWheeler /in/katiakwheeler/ katiawheeler.com /katiawheeler Software Engineer ☕ Coffee Enthusiast 👾 Gamer Based in Kansas City Primarily work with React & .NET Expert Dabbler Passionate about UX
4. So, what brought you here today?
5. Who is this talk for?
6. What We'll Cover What is atomic design? How do we create a design system? How does atomic design help my React applications? What are some tools to create a component library utilizing atomic design?
7. Got questions? Raise yo' hand
8. Atomic Design?
9. Brad Frost http://bradfrost.com/ Web Designer & Developer Helped redesign Time Inc. (Time, Fortune, People, Sports Illustrated), TechCrunch, Entertainment Weekly Passionate about UX Side Projects: Pattern Lab, Styleguides.io, This is Responsive Creator of atomic design
10. History of Atomic Design ⚛
11. Created during TechCrunch website redesign in 2013
12. Wanted a system that looked at individual pieces of UI, not whole Atomic design was born 👶
13. http://atomicdesign.bradfrost.com/
14. What is Atomic Design? "Atomic design is a methodology composed of ve distinct stages working together to create interface design systems in a more deliberate and hierarchical manner." Brad Frost
15. Let's break this down...
16. It's a Methodology "Atomic design is a methodology..."
17. Five Stages Working Together "...composed of ve distinct stages working together..."
18. Hierarchical "......more deliberate and hierarchical manner."
19. 📝 Another note...
20. Non-linear "Atomic design is not linear"
21. Let's talk about the ve stages Credit: Atomic Design
22. Atoms Credit: Atomic Design
23. Labels, Inputs, and Buttons SEARCH THE SITE LABEL Enter keyword... INPUT Search BUTTON
24. Natural World
25. User interfaces <button type="submit" /> <input width="400"/>
26. Molecules Credit: Atomic Design
27. Natural World Water Hydrogen Peroxide
28. Search Form SEARCH THE SITE Enter keywords... Search
29. Organisms Credit: Atomic Design
30. A Header LOGO About Destinations Get Involved Donate SEARCH THE SITE Enter keywords... Search
31. A ProductGrid organism might be comprised of multiple ProductCard molecules Credit: Gap
32. Templates Credit: Atomic Design
33. Credit: Atomic Design
34. Pages Credit: Atomic Design
35. Credit: Atomic Design
36. What's the bene t to all this madness?
37. Abstract and Concrete Atomic design provides us the ability to quickly shift between the abstract and the concrete
38. The parts of our design in uence the whole, and the whole in uences the parts
39. Separation Between Structure and Content Discussing design and content is like discussing the chicken and the egg 🐣
40. "Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’" Mark Boulton
41. Universal Atomic design is not just for the web It’s for user interfaces as a whole
43. Not a Strict Dogma If you don't like the atomic nomenclature, change it
44. Let's break down an interface...
45. out Destinations Get Involved Donate Enter keywords... Search 019 Are Volcanoes Really That Dangerous? Read More > Mountains are Climbing Higher Read More > p into nature, and then you will understand everything better." Albert Einstein NTERESTS DVENTURE RAVEL RT AND CULTURE ACKPACKING AMILY HOLIDAYS ESTIVALS OOD AND DRINK OAD TRIPS WILDLIFE AND ATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE NATURAL WORLD About Destinations Get Involved Donate SEA En Are Volcanoes Really That Dangerous? Or are we just invading their territory? Written by Jane Doe Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula velit, luctus et venenatis in, mollis sit amet nisl. Fusce tincidunt libero ut consequat e congue, sit amet mattis quam luctus. Aenean iaculis tincidunt congue. Nunc maximus ante urna, non commodo ex egestas at. Ut in est nibh. Pellentesqu netus et malesuada fames ac turpis egestas. Nam commodo ipsum non quam rutrum, eu ornare mi suscipit. Nulla pretium nunc in vestibulum malesuad sem nibh e citur tellus, in luctus est eros ac metus. Morbi faucibus purus quis ante tristique, suscipit facilisis dui pharetra. Aliquam lobortis, sem vel fau e citur dolor augue gravida nibh. Proin nunc nulla, volutpat nec magna eget, nibus posuere purus. Nunc tempus augue ac enim lobortis, ac vestibulum justo euismod. Nullam ante nisl, malesuada sed cursus sed, gravida quis felis. Proin egestas elemen dictum posuere, ante lacus consectetur dolor, vel consequat ante lectus non lectus. Proin vel rutrum metus, at volutpat lorem. Vestibulum ut sem sit amet augue tristique pulvinar eget ut lacus. Duis ultrices risus pretium volutpat suscipit. In mauris elit, pretium sed fringilla ut, lacin malesuada quis, congue nec quam. Praesent porta ex a libero dignissim tincidunt. Sed at felis bibendum turpis suscipit tempor at in est. Aliquam sit ame Pellentesque vulputate enim eget tincidunt rhoncus. Praesent eu ante eget magna elementum iaculis. Class aptent taciti sociosqu ad litora torquent per Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sed tincidunt nunc, in feugiat est. Aenean orci orc lorem. Nulla pretium iaculis felis, sed tincidunt neque mollis nec. Nullam venenatis lacus a leo hendrerit iaculis. Phasellus vitae mi feugiat, egestas felis a viverra metus. Aliquam accumsan, augue vehicula facilisis feugiat, dui est condimentum dui, e citur rutrum metus nibh vel massa. Vivamus congue pell dignissim. DESTINATIONS AFRICA ANTARCTICA ASIA CENTRAL AMERICA EUROPE NORTH AMERICA PACIFIC SOUTH AMERICA INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE Save the Great Barrier Reef! You can do your part in helping to save the Great Barrier Reef. Donate today to contribute to conservation and clean up efforts of one of the world's most important natural sites. Donate
46. NATURAL WORLD About Destinations Get Involved Donate Enter keywords... Search Best Forest Hiking of 2019 Read More > Are Volcanoes Really That Dangerous? Read More > Mountains are Climbing Higher Read More > "Look deep into nature, and then you will understand everything better." Albert Einstein DESTINATIONS AFRICA ANTARCTICA ASIA CENTRAL AMERICA EUROPE NORTH AMERICA PACIFIC SOUTH AMERICA INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE Save the Great Barrier Reef! You can do your part in helping to save the Great Barrier Reef. Donate today to contribute to conservation and clean up efforts of one of the world's most important natural sites. Donate
47. LOGO About Destinations Get Involved Donate Enter keywords... Search Lorem ipsum Read More > Dolor sit amet Read More > Lorem ipsum valor Read More > "Lorem ipsum dolor sit amet, consectetur adipiscing elit." Lorem Ipsum DESTINATIONS AFRICA ANTARCTICA ASIA CENTRAL AMERICA EUROPE NORTH AMERICA PACIFIC SOUTH AMERICA INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE Lorem Ipsum! Integer nec varius ex, a ultricies lorem. Vivamus sed mi feugiat, dapibus purus sit amet, laoreet massa. Duis eu libero dolor. Lorem ipsum
48. Organisms HEADER LOGO About Destinations Get Involved Donate SEARCH THE SITE Enter keywords... Search HERO BLOG Lorem ipsum Read More > Dolor sit amet Read More > Lorem ipsum valor Read More > Lorem Ipsum! Integer nec varius ex, a ultricies lorem. Vivamus sed mi feugiat, dapibus purus sit amet, laoreet massa. Duis eu libero dolor. Lorem ipsum
49. Molecules Lorem ipsum Read More > BLOGPOST INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE FOOTERNAV
50. Lorem Ipsum Integer nec varius ex, a ultricies lorem. Vivamus sed mi feugiat, dapibus purus sit amet, laoreet massa. Duis eu libero dolor. Lorem ipsum HEROBOX SEARCH THE SITE Enter keywords... Search SEARCH
51. Atoms LOGO BUTTON IMAGE or sit amet, consectetur..." QUOTE Lorem ipsum... LOREM IPSUM
52. NATURAL WORLD About Destinations Get Involved Donate Enter keywords... Search Best Forest Hiking of 2019 Read More > Are Volcanoes Really That Dangerous? Read More > Mountains are Climbing Higher Read More > "Look deep into nature, and then you will understand everything better." Albert Einstein DESTINATIONS AFRICA ANTARCTICA ASIA CENTRAL AMERICA EUROPE NORTH AMERICA PACIFIC SOUTH AMERICA INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE Save the Great Barrier Reef! You can do your part in helping to save the Great Barrier Reef. Donate today to contribute to conservation and clean up efforts of one of the world's most important natural sites. Donate
53. out Destinations Get Involved Donate Enter keywords... Search 019 Are Volcanoes Really That Dangerous? Read More > Mountains are Climbing Higher Read More > p into nature, and then you will understand everything better." Albert Einstein NTERESTS DVENTURE RAVEL RT AND CULTURE ACKPACKING AMILY HOLIDAYS ESTIVALS OOD AND DRINK OAD TRIPS WILDLIFE AND ATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE NATURAL WORLD About Destinations Get Involved Donate SEA En Are Volcanoes Really That Dangerous? Or are we just invading their territory? Written by Jane Doe Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula velit, luctus et venenatis in, mollis sit amet nisl. Fusce tincidunt libero ut consequat e congue, sit amet mattis quam luctus. Aenean iaculis tincidunt congue. Nunc maximus ante urna, non commodo ex egestas at. Ut in est nibh. Pellentesqu netus et malesuada fames ac turpis egestas. Nam commodo ipsum non quam rutrum, eu ornare mi suscipit. Nulla pretium nunc in vestibulum malesuad sem nibh e citur tellus, in luctus est eros ac metus. Morbi faucibus purus quis ante tristique, suscipit facilisis dui pharetra. Aliquam lobortis, sem vel fau e citur dolor augue gravida nibh. Proin nunc nulla, volutpat nec magna eget, nibus posuere purus. Nunc tempus augue ac enim lobortis, ac vestibulum justo euismod. Nullam ante nisl, malesuada sed cursus sed, gravida quis felis. Proin egestas elemen dictum posuere, ante lacus consectetur dolor, vel consequat ante lectus non lectus. Proin vel rutrum metus, at volutpat lorem. Vestibulum ut sem sit amet augue tristique pulvinar eget ut lacus. Duis ultrices risus pretium volutpat suscipit. In mauris elit, pretium sed fringilla ut, lacin malesuada quis, congue nec quam. Praesent porta ex a libero dignissim tincidunt. Sed at felis bibendum turpis suscipit tempor at in est. Aliquam sit ame Pellentesque vulputate enim eget tincidunt rhoncus. Praesent eu ante eget magna elementum iaculis. Class aptent taciti sociosqu ad litora torquent per Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sed tincidunt nunc, in feugiat est. Aenean orci orc lorem. Nulla pretium iaculis felis, sed tincidunt neque mollis nec. Nullam venenatis lacus a leo hendrerit iaculis. Phasellus vitae mi feugiat, egestas felis a viverra metus. Aliquam accumsan, augue vehicula facilisis feugiat, dui est condimentum dui, e citur rutrum metus nibh vel massa. Vivamus congue pell dignissim. DESTINATIONS AFRICA ANTARCTICA ASIA CENTRAL AMERICA EUROPE NORTH AMERICA PACIFIC SOUTH AMERICA INTERESTS ADVENTURE TRAVEL ART AND CULTURE BACKPACKING FAMILY HOLIDAYS FESTIVALS FOOD AND DRINK ROAD TRIPS WILDLIFE AND NATURE ABOUT US WHO WE ARE WHAT WE DO GET INVOLVED DONATE JOIN US CAREERS VOLUNTEER SUBSCRIBE Save the Great Barrier Reef! You can do your part in helping to save the Great Barrier Reef. Donate today to contribute to conservation and clean up efforts of one of the world's most important natural sites. Donate
54. How can this help my React applications?
55. I'm so glad you asked!
56. Atomic design can be a guideline for good architecture
57. React thrives on the KISS method
58. Comment.js 1. import React from 'react'; 2 import { Button } from ' /atoms';
59. UserInfo.js 1. import React from 'react'; 2. 3. const UserInfo = ({ user }) => 4. <div className="UserInfo"> 5. <img className="Avatar" 6. src={user.avatarUrl} 7. alt={user.name} 8. /> 9. <div className="UserInfo-name"> 10. {user.name} 11. </div> 12. </div> 13. 14 export default UserInfo;
60. Avatar.js 1. import React from 'react'; 2. 3. const Avatar = ({ user }) => 4. <img className="Avatar" 5. src={user.avatarUrl} 6. alt={user.name} 7. /> 8. 9. export default Avatar;
61. UserInfo.js 2. import { Avatar } from '../atoms' 1. import React from 'react'; 3. 4. const UserInfo = ({ author }) => 5. <div className="UserInfo"> 6. <Avatar user={author} /> 7. <div className="UserInfo-name"> 8. {author.name} 9. </div> 10. </div> 11. 12. export default UserInfo;
62. Comment.js 1 import React from 'react';
63. CommentActions.js 1. import React from 'react'; 2. import { Button } from '../atoms'; 3. 4. const CommentActions = ({ actions }) => 5. <div className="actions"> 6. <Button onClick={actions.onReply}>Reply</Button> 7. <Button onClick={actions.onFlag}>Flag</Button> 8. <Button onClick={actions.onSave}>Save</Button> 9. </div> 10. 11. export default CommentActions;
64. Comment.js
65. We can take this even further...
66. We can build a component library utilizing atomic design
67. Before we create a component library, we need to create the design system
68. How do we create a design system?
69. People are the key 🔑
70. These people need to be internal stakeholders
71. How do I get others on board?
72. Change is hard
73. Constant communication 💬 and education
74. Bene ts of Design Systems Promote consistency and cohesion Speed up your team’s productivity Establish a more collaborative work ow with a shared vocabulary Serve as a future-friendly foundation
75. Design systems lead to cohesive, consistent experiences
76. Design systems speed up your team’s work ow by allowing you to reuse aspects of user interfaces without having to reinvent the wheel in every project
77. Centralizing UI elements in a pattern library or component library establishes a shared vocabulary for everyone within the organization, not just developers
78. Design systems make cross-browser/device, performance, and accessibility testing easier, vastly speed up production time, and allow teams to launch high-quality work faster
79. This design system is a living, breathing asset to your organization that can be adapted and modi ed based on your organization’s needs.
80. People are listening 👂, now what?
81. It's about to get painful 🏥
82. It's time to perform an interface audit
83. Tedious process, but hard work pays off 💪
84. An interface inventory is a comprehensive collection of the bits and pieces that make up your user interface
85. What does the process of an interface audit look like?
86. Screenshots 📸
87. Steps of an interface audit 1. Gather the Troops 🙋 🙋 2. Prepare for the Screenshots 📋 3. Screenshots Galore! 📸 4. Sharing is Caring 5. All Aboard! 🚂
88. 1. Gather the Troops 🙋 🙋 Don’t try and do this on your own for three reasons: 1. It can be overwhelming 2. You will miss things 3. Others need to feel your pain 💥🥊
89. 2. Prepare for the Screenshots 📋 You'll need a place to store your screenshots like... PowerPoint or Keynote, Photoshop or Sketch, Evernote Web Clipper, Google Docs, or Microsoft Word
90. 3. Screenshots Galore! 📸 The interface audit exercise involves screenshotting and categorizing all the unique user interface patterns that make up your overall user interface
91. What's the best method for the screenshot exercise 🏋 ?
92. Assign each person or pair a category
93. What's a category?
94. Some category options include: Global Elements: headers, footers Navigation: main nav, footer nav, pagination Images: logos, hero images, avatars, thumbnails Icons: social, arrows, hamburgers, spinners Forms: inputs, text areas, select menus, checkboxes, radio buttons Buttons: primary, secondary, big, small, disabled Headings: h1, h2, h3, h4, h5, h6 Lists: ordered, unordered, striped, lined Interactive Components: accordions, tabs, carousels Messaging: alerts, success, errors, warnings, modals, tooltips Colors: All colors used in site ...
95. It's very easy to get lost in this part of the process 🤔
96. ⏱ Time-box the screenshot exercise (30-90 minutes)
97. 4. Sharing is Caring Combine all of the participants' ndings into one mega- document
98. Have each participant spend 5-10 minutes presenting their ndings
99. 5. All Aboard! 🚂 Now it's time to get the entire organization on board
100. Why did I go through all of that pain and suffering?
101. Bene ts of an interface audit Captures all patterns and their inconsistencies Gets organizational buy-in Establishes a scope of work Lays the groundwork to a sound interface design system
102. Bene ts of an interface audit Captures all patterns and their inconsistencies Gets organizational buy-in Establishes a scope of work Lays the groundwork to a sound interface design system
103. Afraid your stakeholders will say no? 😓
104. Ask forgiveness, not permission
105. Our job is to create great work for our clients and organizations, and interface design systems are a means to that end
109. Okay, let's do this! 👍 Now it's time to begin creating uni ed patterns
110. Tools to Create a Design System 🧰
111. Create a style guide in Sketch or Photoshop or implement a CSS framework
112. Pattern Lab A static site generator (powered by PHP or Node) that stitches together UI components
113. Utilizes Mustache, a "logic-less" templating tool
114. Bene ts of Pattern Lab Nested Patterns Design with Dynamic Data Tool Agnostic Language Agnostic Annotations Pattern Starter Kits Versatile Pattern Lineage Documentation Extensible
115. Building a Component Library 🏗
116. Folder Structure 📁
117. ├── node_modules/ ├── src/ │ ├── atoms/ │ │ ├── Button/ │ │ ├── Input/ │ │ └── Label/ │ ├── molecules/ │ │ └── Search/ │ └── organisms/ │ └── Header/ ├── package.json └── ...
118. Component Library Best Practices
119. Our components should be data agnostic
120. Test every component in the library
121. Consistent import/export patterns
122. Button.jsx const Button = () => ... export default Button; index.js export { default as Button } from './atoms/Button.jsx'
123. Use some kind of release versioning
124. Maintain an accurate CHANGELOG.md le
125. Tools to Build the Library 🛠
126. Credit: Facebook
127. Credit: Bit
128. Note: Bit is not entirely free
129. CSS-in-JS
130. Many CSS-in-JS libraries to choose from including Styled Components < 💅> and Emotion
131. CSS-in-JS makes themes a breeze You can create a custom theme, drop it in your <ThemeProvider/> , and all of the child components will inherit the theme's styles
132. You can switch themes through CSS-in-JS without having to recompile the entire application
133. A few bene ts of CSS-in-JS Ensures consistency across your applications Allows for nesting and extending styles Quickly change a CSS property based on a JS property
134. 📽 We've made a beautiful component library, how do we show people?
135. You could set up your own Create React App that showcases all of your atomic components
136. Or you could use a pre-built tool to display your components
137. Here's a few options: Storybook React Styleguidist BlueKit
143. We've created our design system and/or component library. We're done, right?
144. Wrong 🙅
145. Design systems are living and breathing things
146. So, what now?
147. Go tell your colleagues 📣
148. Go tell your boss 📣
149. Go tell your organization 📣
150. Go tell your friends 📣
151. And think about React, atomically ⚛
152. Thank You! 🎉😄🙏🙌