Too often developers are not involved with front end design descussions and end up struggling to get a sketch design to fit into a website. Many of these tools do not offer good ways of communicating animations or different states of the various components and in the end, there still has to be a translation into something that is functional. This talk aims to change that. We will be looking at Storybook as a tool that facilitates developers and designers working hand-in-hand to codify designs in React components. We will also cover some strategies of React component building that enabled taking advantage of tools like Storybook.

1. DESIGN FORDESIGN FOR
SUCCESSSUCCESS
WITH REACT AND STORYBOOKSWITH REACT AND STORYBOOKS

2. CHRIS SAYLORCHRIS SAYLOR
LEAD ENGINEER @ ZUMBALEAD ENGINEER @ ZUMBA
@cjsaylor

3. DESIGN?DESIGN?
THAT'S SOMEONE ELSES JOB.THAT'S SOMEONE ELSES JOB.

4. Ugh, another sketch/photoshop slice job. Maybe, if I
had been involved...

5. WHY DO WE DO IT?WHY DO WE DO IT?
No code involved, so designers can work completely
independently
Developers usually viewed as "bad" designers

6. COMMON DESIGN WORKFLOWCOMMON DESIGN WORKFLOW
= ?= ?
Image source: @nicolesaidy

7. HAVING DESIGNS DELIVERED:HAVING DESIGNS DELIVERED:
Design elements tend to be "pages" and not
components
Can't easily show animations or responsive designs
Version control?
Some things may not be possible (or realistic) in a
browser
Still have a lot of work to "translate" to html
... and it may not be pixel perfect!

8. WHY SHOULD WE CARE ABOUT DESIGN?WHY SHOULD WE CARE ABOUT DESIGN?
Gateway for user acquisition
Can reduce bugs
So ware that isn't used is pointless

9. WHY SHOULD WE CARE ABOUT DESIGN?WHY SHOULD WE CARE ABOUT DESIGN?
Bad UX designs makes us susceptible to disruption.

10. HOW DO WE BRIDGEHOW DO WE BRIDGE
THE GAP?THE GAP?

11. STORYBOOK.JSSTORYBOOK.JS

13. WHY STORYBOOK.JS?WHY STORYBOOK.JS?
Integrates with React and Vue.js
Immediate feedback of changes
Easily see history of changes
At the end of the design phase, we have functional
components!

14. HOW?HOW?

15. Disclaimer: you'll need developer and
designer buy-in

16. KEEP DATA RETRIEVAL SEPARATEKEEP DATA RETRIEVAL SEPARATE
Avoid state in your views as much as possible
Compose your components as much as possible
Use props to pass in data

17. TYPICAL REACT TUTORIAL COMPONENTTYPICAL REACT TUTORIAL COMPONENT
export default class ListComponent extends React.Component {
state = { items: [] }
async componentDidMount() {
this.setState({
items: await fetch('/items')
});
}
renderItems() {
return this.state.items.map(item => <li>{item}</li>)
}
render = () => (
<ul>{ this.renderItems() }</ul>
)
}

18. SEPARATE!SEPARATE!

19. USE PROPS TO DISPLAYUSE PROPS TO DISPLAY
export default class ListComponent extends React.Component {
renderItems = () => {
return (this.props.items || [])
.map(item => <li>{item}</li>)
}
render = () => <ul>{ this.renderItems() }</ul>
}

20. PASS THE STATE DATA TO THE VIEWPASS THE STATE DATA TO THE VIEW
import List from './list-component';
export default class ListContainer extends React.Component {
state = { items: [] }
async componentDidMount() {
this.setState({
items: await fetch('/items')
});
}
render = () => <List items={this.state.items}/>
}

21. STORYTIME!STORYTIME!

22. import { storiesOf } from '@storybook/react';
import List from './list-component';
storiesOf('List', module)
.add('No items', () => <List />)
.add('One item', () => <List items={['item 1']} />)
.add('Multiple items', () => {
return <List items={['item 1', 'item 2', 'item 3']} />
});

26. STORYBOOK CAPABILITIESSTORYBOOK CAPABILITIES
Show when user actions occur in the view

28. ADD A CLICK ACTIONADD A CLICK ACTION
export default class ListComponent extends React.Component {
onClick = (e) => {
this.props.onItemClicked(e.target.innerText);
}
renderItems = () => {
return (this.props.items || [])
.map(item => (
<li onClick={this.onClick}>{item}</li>
));
}
render = () => <ul>{ this.renderItems() }</ul>
}

29. MODIFY OUR STORY FOR THE ACTIONMODIFY OUR STORY FOR THE ACTION
import { storiesOf, action } from '@storybook/react';
import List from './list-component';
storiesOf('List', module)
.add('Multiple items', () => {
return (
<List
onItemClicked={action('Item clicked!')}
items={['item 1', 'item 2', 'item 3']}
/>
);
});

30. STORYBOOK CAPABILITIESSTORYBOOK CAPABILITIES
Allow User Input In Stories

32. ADD THE "KNOBS" ADDONADD THE "KNOBS" ADDON
This is what is responsible for showing the panel
// addons.js
import '@storybook/addon-knobs/register';

33. MODIFY THE STORYMODIFY THE STORY
import { storiesOf, action } from '@storybook/react';
import List from './list-component';
import {withKnobs, array} from '@storybook/addon-knobs';
storiesOf('List', module)
.addDecorator(withKnobs)
.add('Multiple items', () => (
<List
onItemClicked={action('Item clicked!')}
items={
array('Items', [
'item 1',
'item 2',
'item 3'
])
}
/>
));

34. STORYBOOK CAPABILITIESSTORYBOOK CAPABILITIES
Interactive Unit Tests

36. CONCLUSIONCONCLUSION
Getting involved in the design process doesn't have
to be scary
Start fresh or add to existing React/VueJS app
Hit the ground running when designs are finished
Version control designs and their stories

37. RESOURCESRESOURCES
https://github.com/cjsaylor/design-for-success-
slides
https://www.chris-saylor.com/design-for-success-
slides/example

38. QUESTIONS?QUESTIONS?

40. REACT-NATIVE CONSIDERATIONSREACT-NATIVE CONSIDERATIONS

41. REMEMBER THIS?REMEMBER THIS?
import List from './list-component';
export default class ListContainer extends React.Component {
state = { items: [] }
async componentDidMount() {
this.setState({
items: await fetch('/items')
});
}
render = () => <List items={this.state.items}/>
}

42. REACT DOM & NATIVE...TOGETHER?REACT DOM & NATIVE...TOGETHER?

43. HIGHER-ORDER COMPONENT (HOC)HIGHER-ORDER COMPONENT (HOC)
Reference:
https://reactjs.org/docs/higher-order-
components.html

44. export default function withListData(WrappableComponent) {
return class extends React.Component {
state = { items: [] }
async componentDidMount() {
this.setState({
items: await fetch('/items')
});
}
render = () => (
<WrappableComponent items={this.state.items}/>
)
}
}

45. USING THE NEW HOC IN REACT NATIVEUSING THE NEW HOC IN REACT NATIVE
import List from './native/list-component';
import withListData from 'list-container';
export default class SomeReactView extends React.Component {
componentDidMount() {
this.wrappedList = withListData(<List/>);
}
render() {
if (!this.wrappedList) {
return null;
}
const WrappedList = this.wrappedList;
return <WrappedList/>;
}
}

46. FINFIN