Design for Success with React and Storybooks

Slide 1

Slide 1 text

DESIGN FOR DESIGN FOR SUCCESS SUCCESS WITH REACT AND STORYBOOKS WITH REACT AND STORYBOOKS

Slide 2

Slide 2 text

CHRIS SAYLOR CHRIS SAYLOR LEAD ENGINEER @ ZUMBA LEAD ENGINEER @ ZUMBA @cjsaylor

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

COMMON DESIGN WORKFLOW COMMON DESIGN WORKFLOW = ? = ? Image source: @nicolesaidy

Slide 9

Slide 9 text

HOW DO WE BRIDGE HOW DO WE BRIDGE THE GAP? THE GAP?

Slide 10

Slide 10 text

COMMON COMMON DESIGN WORKFLOW DESIGN WORKFLOW = ? = ? Image source: @nicolesaidy

Slide 11

Slide 11 text

STORYBOOK.JS STORYBOOK.JS

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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!

Slide 15

Slide 15 text

HOW? HOW?

Slide 16

Slide 16 text

KEEP DATA RETRIEVAL SEPARATE KEEP DATA RETRIEVAL SEPARATE

Slide 17

Slide 17 text

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

{item}

) } render = () => (

{ this.renderItems() } ) }

Slide 18

Slide 18 text

SEPARATE! SEPARATE!

Slide 19

Slide 19 text

USE PROPS TO DISPLAY USE PROPS TO DISPLAY export default class ListComponent extends React.Component { renderItems = () => { return (this.props.items || []) .map(item =>

{item}

) } render = () =>

{ this.renderItems() } }

Slide 20

Slide 20 text

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 = () => }

Slide 21

Slide 21 text

STORYTIME! STORYTIME!

Slide 22

Slide 22 text

import { storiesOf } from '@storybook/react'; import List from './list-component'; storiesOf('List', module) .add('No items', () => ) .add('One item', () => ) .add('Multiple items', () => ( ));

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Show when user actions occur in the view

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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 => (

{item}

)); } render = () =>

{ this.renderItems() } }

Slide 29

Slide 29 text

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';

Slide 30

Slide 30 text

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 ( ); });

Slide 31

Slide 31 text

STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Allow User Input In Stories

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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';

Slide 34

Slide 34 text

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', () => ( ));

Slide 35

Slide 35 text

STORYBOOK CAPABILITIES STORYBOOK CAPABILITIES Interactive Unit Tests

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

UTILIZE IN YOUR UTILIZE IN YOUR WORKFLOW WORKFLOW

Slide 38

Slide 38 text

STYLEGUIDES STYLEGUIDES Show what components are available for composition Can show full page layouts

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

PROTOTYPING PROTOTYPING No backend required Get a feel for the product before investing in backend integration

Slide 42

Slide 42 text

PRODUCT DEMOS PRODUCT DEMOS Stitch together stories With the link addon to demo a product.

Slide 43

Slide 43 text

CASE STUDIES CASE STUDIES

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

QUESTIONS? QUESTIONS?

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

FIN FIN