Designing in React

Designing in React

A thought experiment to test the reusability of components beyond developers

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

April 22, 2017
Tweet

Transcript

  1. Designing in React

  2. siddharthkp javascript architect @ practo

  3. disclaimer: this is a thought experiment (probably a very bad

    one)
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. promise of reusable components

  14. promise of reusable components only with developers?

  15. None
  16. None
  17. None
  18. css-in-js

  19. import React from 'react' import styled from styled-components' const Title

    = styled.div` font-size: 16px; text-align: center; color: red; ` const MyComponent = () => ( <Title> This text is styled </Title> ) This text is styled
  20. import React from 'react' import styled from styled-components' const Title

    = styled.div` font-size: 16px; text-align: center; color: ${props => props.color}; ` const MyComponent = () => ( <Title color='red'> This text is styled </Title> ) This text is styled
  21. So, I guess we’re making a design tool now

  22. Component

  23. Component props: { width: 200px, height: 50px, background: green }

  24. import React from 'react' const Component = (props) => (

    ) Component props: { width: 200px, height: 50px, background: green }
  25. import React from 'react' const Component = (props) => (

    <div style={props.styles}></div> ) Component props: { width: 200px, height: 50px, background: green }
  26. Component props: { width: 200px, height: 50px, background: green }

    Toolbar
  27. Component props: { width: 200px, height: 50px, background: green }

    Toolbar
  28. import React from 'react' const Toolbar = () => <div>

    </div> Toolbar
  29. import React from 'react' const Toolbar = () => <div>

    <Slider name='width'/> <Slider name='height'/> <Colorpicker name='background'/> </div> Toolbar
  30. Component props: { width: 200px, height: 50px, background: green }

    Toolbar
  31. import React from 'react' const Toolbar = ({update}) => <div>

    <Slider name='width' onChange={update}/> <Slider name='height' onChange={update}/> <Colorpicker name='background' onChange={update}/> </div> Toolbar
  32. Workspace Component Toolbar

  33. Workspace Component Toolbar import React from 'react' class Workspace extends

    React.Component { }
  34. Workspace Component Toolbar import React from 'react' import Component, Toolbar

    from '...' class Workspace extends React.Component { render () { return <div> <Component/> <Toolbar/> </div> } }
  35. Workspace Component Toolbar import React from 'react' import Component, Toolbar

    from '...' import defaultValues from '...' class Workspace extends React.Component { constructor () { this.state = defaultValues } render () { return <div> <Component/> <Toolbar/> </div> } }
  36. Workspace Component Toolbar import React from 'react' import Component, Toolbar

    from '...' import defaultValues from '...' class Workspace extends React.Component { constructor () { this.state = defaultValues } render () { return <div> <Component styles={this.state}/> <Toolbar/> </div> } }
  37. Workspace Component Toolbar import React from 'react' import Component, Toolbar

    from '...' import defaultValues from '...' class Workspace extends React.Component { constructor () { this.state = defaultValues } update (property) { this.setState(property) } render () { return <div> <Component styles={this.state}/> <Toolbar/> </div> } }
  38. Workspace Component Toolbar import React from 'react' import Component, Toolbar

    from '...' import defaultValues from '...' class Workspace extends React.Component { constructor () { this.state = defaultValues } update (property) { this.setState(property) } render () { return <div> <Component styles={this.state}/> <Toolbar update={this.update}/> </div> } }
  39. Workspace Component Toolbar

  40. Workspace Component1 Toolbar Component2 Component3 active

  41. import canvas from './canvas' class Workspace extends React.Component { }

    const canvas = { components: [defaultComponent], active: 0 }
  42. import canvas from './canvas' class Workspace extends React.Component { constructor

    () { this.state = canvas } ... } const canvas = { components: [defaultComponent], active: 0 }
  43. import canvas from './canvas' class Workspace extends React.Component { constructor

    () { this.state = canvas } update (property) { this.setState( canvas.update(property) ) } add () { this.setState( canvas.add() ) } ... } const canvas = { components: [defaultComponent], active: 0 }
  44. import canvas from './canvas' class Workspace extends React.Component { constructor

    () { this.state = canvas } update (property) { this.setState( canvas.update(property) ) } add () { this.setState( canvas.add() ) } ... } const canvas = { components: [defaultComponent], active: 0 } const update = (property) => { Object.assign( canvas.components[canvas.active], property ) return canvas }
  45. Workspace Component1 Toolbar Component2 Component3 active

  46. None
  47. const canvas = { components: [defaultComponent], active: 0 } const

    update = (property) => { ... }
  48. const canvas = { components: [defaultComponent], active: 0 } const

    canvasHistory = [] const update = (property) => { ... }
  49. const canvas = { components: [defaultComponent], active: 0 } const

    canvasHistory = [] const update = (property) => { const currentState = clone(canvas) canvasHistory.push(currentState) ... }
  50. const canvas = { components: [defaultComponent], active: 0 } const

    canvasHistory = [] const update = (property) => { const currentState = clone(canvas) canvasHistory.push(currentState) ... } const undo = () => { canvas = canvasHistory.pop() return canvas }
  51. promise of reusable components

  52. { "components": [ { "name": "box", "width": "200px", "height": "50px",

    "background": "green" }, { "name": "title", "width": "150px", "height": "25px", "background": "#333" } ] }
  53. { "components": [ { "name": "box", "width": "200px", "height": "50px",

    "background": "green" }, { "name": "title", "width": "150px", "height": "25px", "background": "#333" } ] } import React from 'react' const styles = { box: {width: '200px', ...}, title: {width: '150px', ...}, } const Box = () => ( <div style={styles.box}></div> ) const Title = () => ( <div style={styles.title}></div> )
  54. { "components": [ { "name": "box", "width": "200px", "height": "50px",

    "background": "green" }, { "name": "title", "width": "150px", "height": "25px", "background": "#333" } ] } import React from 'react' import styled from 'styled-components' const Box = styled.div` width: '200px'; height: '50px'; background: 'green' ` const Title = styled.div` width: '150px'; height: '25px'; background: '#333' `
  55. Workspace Toolbar Component2 Component3 Box Title Library Canvas Avatar

  56. Workspace Toolbar Component2 Component3 Library Canvas

  57. siddharthkp/react-prototype bit.ly/reactdesign

  58. siddharthkp/reaqt

  59. None
  60. None
  61. None
  62. None
  63. @siddharthkp