Thinking About React, Atomically ⚛ Katia Wheeler 

Thank You Sponsors! 

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 

So, what brought you here today? 

Who is this talk for? 

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? 

Got questions? Raise yo' hand 

Atomic Design? 

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 

History of Atomic Design ⚛ 

Created during TechCrunch website redesign in 2013 

Wanted a system that looked at individual pieces of UI, not whole Atomic design was born 👶 

http://atomicdesign.bradfrost.com/ 

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 

Let's break this down... 

It's a Methodology "Atomic design is a methodology..." 

Five Stages Working Together "...composed of ve distinct stages working together..." 

Hierarchical "......more deliberate and hierarchical manner." 

📝 Another note... 

Non-linear "Atomic design is not linear" 

Let's talk about the ve stages Credit: Atomic Design 

Atoms Credit: Atomic Design 

Labels, Inputs, and Buttons SEARCH THE SITE LABEL Enter keyword... INPUT Search BUTTON 

Natural World 

User interfaces 

Molecules Credit: Atomic Design 

Natural World Water Hydrogen Peroxide 

Search Form SEARCH THE SITE Enter keywords... Search 

Organisms Credit: Atomic Design 

A Header LOGO About Destinations Get Involved Donate SEARCH THE SITE Enter keywords... Search 

A ProductGrid organism might be comprised of multiple ProductCard molecules Credit: Gap 

Templates Credit: Atomic Design 

Credit: Atomic Design 

Pages Credit: Atomic Design 

Credit: Atomic Design 

What's the bene t to all this madness? 

Abstract and Concrete Atomic design provides us the ability to quickly shift between the abstract and the concrete 

The parts of our design in uence the whole, and the whole in uences the parts 

Separation Between Structure and Content Discussing design and content is like discussing the chicken and the egg 🐣 

"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 

Universal Atomic design is not just for the web It’s for user interfaces as a whole 

No content

Not a Strict Dogma If you don't like the atomic nomenclature, change it 

Let's break down an interface... 

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 

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 

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 

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 

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 

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 

Atoms LOGO BUTTON IMAGE or sit amet, consectetur..." QUOTE Lorem ipsum... LOREM IPSUM 

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 

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 

How can this help my React applications? 

I'm so glad you asked! 

Atomic design can be a guideline for good architecture 

React thrives on the KISS method 

Comment.js 1. import React from 'react'; 2 import { Button } from ' /atoms'; 

UserInfo.js 1. import React from 'react'; 2. 3. const UserInfo = ({ user }) => 4. 13. 14 export default UserInfo; 

Avatar.js 1. import React from 'react'; 2. 3. const Avatar = ({ user }) => 4. 8. 9. export default Avatar; 

UserInfo.js 2. import { Avatar } from '../atoms' 1. import React from 'react'; 3. 4. const UserInfo = ({ author }) => 5. 11. 12. export default UserInfo; 

Comment.js 1 import React from 'react'; 

CommentActions.js 1. import React from 'react'; 2. import { Button } from '../atoms'; 3. 4. const CommentActions = ({ actions }) => 5. 10. 11. export default CommentActions; 

Comment.js 

We can take this even further... 

We can build a component library utilizing atomic design 

Before we create a component library, we need to create the design system 

How do we create a design system? 

People are the key 🔑 

These people need to be internal stakeholders 

How do I get others on board? 

Change is hard 

Constant communication 💬 and education 

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 

Design systems lead to cohesive, consistent experiences 

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 

Centralizing UI elements in a pattern library or component library establishes a shared vocabulary for everyone within the organization, not just developers 

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 

This design system is a living, breathing asset to your organization that can be adapted and modi ed based on your organization’s needs. 

People are listening 👂, now what? 

It's about to get painful 🏥 

It's time to perform an interface audit 

Tedious process, but hard work pays off 💪 

An interface inventory is a comprehensive collection of the bits and pieces that make up your user interface 

What does the process of an interface audit look like? 

Screenshots 📸 

Steps of an interface audit 1. Gather the Troops 🙋 🙋 2. Prepare for the Screenshots 📋 3. Screenshots Galore! 📸 4. Sharing is Caring 5. All Aboard! 🚂 

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 💥🥊 

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 

3. Screenshots Galore! 📸 The interface audit exercise involves screenshotting and categorizing all the unique user interface patterns that make up your overall user interface 

What's the best method for the screenshot exercise 🏋 ? 

Assign each person or pair a category 

What's a category? 

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 ... 

It's very easy to get lost in this part of the process 🤔 

⏱ Time-box the screenshot exercise (30-90 minutes) 

4. Sharing is Caring Combine all of the participants' ndings into one mega- document 

Have each participant spend 5-10 minutes presenting their ndings 

5. All Aboard! 🚂 Now it's time to get the entire organization on board 

Why did I go through all of that pain and suffering? 

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 

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 

Afraid your stakeholders will say no? 😓 

Ask forgiveness, not permission 

Our job is to create great work for our clients and organizations, and interface design systems are a means to that end 

No content

No content

No content

Okay, let's do this! 👍 Now it's time to begin creating uni ed patterns 

Tools to Create a Design System 🧰 

Create a style guide in Sketch or Photoshop or implement a CSS framework 

Pattern Lab A static site generator (powered by PHP or Node) that stitches together UI components 

Utilizes Mustache, a "logic-less" templating tool 

Bene ts of Pattern Lab Nested Patterns Design with Dynamic Data Tool Agnostic Language Agnostic Annotations Pattern Starter Kits Versatile Pattern Lineage Documentation Extensible 

Building a Component Library 🏗 

Folder Structure 📁 

├── node_modules/ ├── src/ │ ├── atoms/ │ │ ├── Button/ │ │ ├── Input/ │ │ └── Label/ │ ├── molecules/ │ │ └── Search/ │ └── organisms/ │ └── Header/ ├── package.json └── ... 

Component Library Best Practices 

Our components should be data agnostic 

Test every component in the library 

Consistent import/export patterns 

Button.jsx const Button = () => ... export default Button; index.js export { default as Button } from './atoms/Button.jsx' 

Use some kind of release versioning 

Maintain an accurate CHANGELOG.md le 

Tools to Build the Library 🛠 

Credit: Facebook 

Credit: Bit 

Note: Bit is not entirely free 

CSS-in-JS 

Many CSS-in-JS libraries to choose from including Styled Components < 💅> and Emotion 

CSS-in-JS makes themes a breeze You can create a custom theme, drop it in your , and all of the child components will inherit the theme's styles 

You can switch themes through CSS-in-JS without having to recompile the entire application 

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 

📽 We've made a beautiful component library, how do we show people? 

You could set up your own Create React App that showcases all of your atomic components 

Or you could use a pre-built tool to display your components 

Here's a few options: Storybook React Styleguidist BlueKit 

No content

No content

No content

No content

No content

We've created our design system and/or component library. We're done, right? 

Wrong 🙅 

Design systems are living and breathing things 

So, what now? 

Go tell your colleagues 📣 

Go tell your boss 📣 

Go tell your organization 📣 

Go tell your friends 📣 

And think about React, atomically ⚛ 

Thank You! 🎉😄🙏🙌