Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design for Success with React and Storybooks

53c40ddf10f397ab4494fc55078125dc?s=47 Chris Saylor
February 15, 2018

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.

53c40ddf10f397ab4494fc55078125dc?s=128

Chris Saylor

February 15, 2018
Tweet

More Decks by Chris Saylor

Other Decks in Design

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

  12. None
  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']} /> ));
  23. None
  24. None
  25. None
  26. STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Show when user actions occur in

    the view
  27. None
  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

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

  36. None
  37. UTILIZE IN YOUR UTILIZE IN YOUR WORKFLOW WORKFLOW

  38. STYLEGUIDES STYLEGUIDES Show what components are available for composition Can

    show full page layouts
  39. None
  40. None
  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

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