This is a presentation I gave at the React Nova Meetup on Tuesday, March 21, 2017 at the The Goal in Reston, VA.

1. Atomic Design & React
(A Word or Two About Atomic Design and React) => Atomic Components

2. Riddle Me This
Should Developers Design?
Should Designers Develop?

3. Designer + Dev not Designer vs Dev
https://www.gravitatedesign.com/blog/designers-and-developers/

4. Answer
Well at least,
We should try to design the way we code!
OR
We should try to code the way we design!
No matter who is doing it!

5. What if?
 UI rendering was 100% pure components?
 Or conversely, all business logic/state was elsewhere?
 What if your framework notified when to render and provided
you all the data at the time of render?
 What if HTML / ES6 / CSS all lived together harmoniously?
IT CERTAINLY WOULD BE EASIER
FOR A DESIGNER TO CODE!
In a way that forms a
pleasing or consistent
whole.
In a way that is free
from disagreement or
dissent.

6. Enter Atomic Design by Brad Frost
Create Design Systems, not pages.
The cornerstones of good design systems are style guides!
We’re not designing pages,
we’re designing systems of components.
— Stephen Hay

7. Atomic Design Style Guides
Organize design materials,
while providing guidelines, usage, and guardrails.
Make them alive and interactive,
so that you can see the impact of change.
Share vocabulary (What is the System Status Button Bar?)
and educate!

8. Atomic Methodology
Think Chemistry

9. Atomic Methodology
Lately I’ve been more interested in
what our interfaces are comprised of
and how we can construct design
systems in a more methodical way.
— Brad Frost

10. Atomic Methodology
Atoms => HTML tags
Molecules => label, input & button
Organisms => logo, nav, search form
Templates => organism groups
Pages => complete view

11. Atomic Components
React Components

12. Atomic Components Methodology
Atoms => styled-components
Molecules => behavioral components
Organisms => domain composition
Ecosystems => route
Environment => themes, state, async

13. Top 9 reasons to use Atomic Design
1. Reusability
2. Easier to create style guide
3. Easy to understand layout
4. Code is more consistent
5. No focus on pixel perfect designs
6. More efficient, quicker prototyping
7. Easier to update and remove parts
8. More modular file structure
9. Less components overall
http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771

14. Top 9 reasons to use Atomic Components
1. Reusability
2. Easier to create style guide
3. Easy to understand layout
4. Code is more consistent
5. No focus on pixel perfect designs
6. More efficient, quicker prototyping
7. Easier to update and remove parts
8. More modular file structure
9. Less components overall
http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771
1. 100% Pure components helps
2. Make your reused components LIVE
3. Very structured
4. Code is more consistent!
5. You will WANT to reuse existing
6. Using inject instead of passing props
7. Hiring UX / Graphic Design later
8. HTML/Javascript/CSS live together
9. Less code / Less bugs / Less work

15. Atomic Design - Get Creative
Its not about using an existing design system,
its about creating your own!

16. Code Walkthrough - Atoms
import styled from 'styled-components';
const ButtonDiv = styled.div`
background-color:
${props => props.show ? props.theme.buttonColorShow : 'inherit'};
/* Layout */
overflow: hidden;
flex: 1 0 auto;
width: ${props => props.theme.iconSize.width};
height: ${props => props.theme.iconSize.height};
display: flex;
align-items: center;
justify-content: center;
`
export default ButtonDiv;

17. Get Coding
Now that it is easier!

18. Reference
 http://bradfrost.com/blog/post/atomic-web-design/
 http://atomicdesign.bradfrost.com/table-of-contents/
 https://medium.com/@yejodido/atomic-components-managing-dynamic-
react-components-using-atomic-design-part-1-5f07451f261f#.d9vjasek0
 https://medium.com/front-end-hacking/react-for-designers-
3fbc7b6560dd#.7utd3ri06
 https://github.com/styled-components/styled-components
 http://patternlab.io