Design for Success with React and Storybooks

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.

Transcript

1. DESIGN FOR DESIGN FOR SUCCESS SUCCESS WITH REACT AND STORYBOOKS WITH REACT AND STORYBOOKS
2. CHRIS SAYLOR CHRIS SAYLOR LEAD ENGINEER @ ZUMBA LEAD 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 autonomously Developers usually viewed as "bad" designers Developers say no too o en
6. WHY SHOULD WE CARE ABOUT DESIGN? WHY SHOULD WE CARE ABOUT DESIGN? Bad UX designs makes us susceptible to disruption.
8. COMMON DESIGN WORKFLOW COMMON DESIGN WORKFLOW = ? = ? Image source: @nicolesaidy
9. HOW DO WE BRIDGE HOW DO WE BRIDGE THE GAP? THE GAP?
10. COMMON COMMON DESIGN WORKFLOW DESIGN WORKFLOW = ? = ? Image source: @nicolesaidy
11. STORYBOOK.JS STORYBOOK.JS
13. WHY NOT JUST CREATE AN HTML WHY NOT JUST CREATE AN HTML STYLEGUIDE? STYLEGUIDE? Gets stale almost immediately. The language barrier between designers and developers makes it hard to reference.
14. WHY STORYBOOK.JS? WHY STORYBOOK.JS? Integrates with React, Vue.js, and Angular Immediate feedback of changes Easily see history of changes At the end of the design phase, we have functional components!
15. HOW? HOW?
16. KEEP DATA RETRIEVAL SEPARATE KEEP DATA RETRIEVAL SEPARATE
17. TYPICAL REACT TUTORIAL COMPONENT TYPICAL 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 DISPLAY USE 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 VIEW PASS 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', () => ( <List items={['item 1', 'item 2', 'item 3']} /> ));
26. STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Show when user actions occur in the view
28. ADD A CLICK ACTION ADD 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. ADD THE "ACTIONS" ADDON ADD THE "ACTIONS" ADDON This is what is responsible for showing the action panel $ npm install @storybook/addon-actions // addons.js import '@storybook/addon-actions/register';
30. MODIFY OUR STORY FOR THE ACTION MODIFY OUR STORY FOR THE ACTION import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import List from './list-component'; storiesOf('List', module) .add('Multiple items', () => { return ( <List onItemClicked={action('Item clicked!')} items={['item 1', 'item 2', 'item 3']} /> ); });
31. STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Allow User Input In Stories
33. ADD THE "KNOBS" ADDON ADD THE "KNOBS" ADDON This is what is responsible for showing the panel $ npm install @storybook/addon-knobs // addons.js import '@storybook/addon-knobs/register';
34. MODIFY THE STORY MODIFY THE STORY import { storiesOf } from '@storybook/react'; import List from './list-component'; import { action } from '@storybook/addon-actions'; 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' ]) } /> ));
35. STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Interactive Unit Tests
37. UTILIZE IN YOUR UTILIZE IN YOUR WORKFLOW WORKFLOW
38. STYLEGUIDES STYLEGUIDES Show what components are available for composition Can show full page layouts
41. PROTOTYPING PROTOTYPING No backend required Get a feel for the product before investing in backend integration
42. PRODUCT DEMOS PRODUCT DEMOS Stitch together stories With the link addon to demo a product.
43. CASE STUDIES CASE STUDIES
45. CONCLUSION CONCLUSION 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
46. QUESTIONS? QUESTIONS?
47. RESOURCES RESOURCES https://speakerdeck.com/cjsaylor/design-for- success-with-react-and-storybooks https://github.com/cjsaylor/design-for-success- slides https://www.chris-saylor.com/design-for-success- slides/example
48. FIN FIN