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

Designing in React

Designing in React

A thought experiment to test the reusability of components beyond developers

Siddharth Kshetrapal

April 22, 2017
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. Designing in React

    View full-size slide

  2. siddharthkp
    javascript architect @ practo

    View full-size slide

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

    View full-size slide

  4. promise of reusable components

    View full-size slide

  5. promise of reusable components
    only with developers?

    View full-size slide

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

    This text is styled

    )
    This text is styled

    View full-size slide

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

    This text is styled

    )
    This text is styled

    View full-size slide

  8. So, I guess we’re making a design tool now

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. import React from 'react'
    const Toolbar = () =>

    Toolbar

    View full-size slide

  15. import React from 'react'
    const Toolbar = () =>




    Toolbar

    View full-size slide

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

    View full-size slide

  17. import React from 'react'
    const Toolbar = ({update}) =>




    Toolbar

    View full-size slide

  18. Workspace
    Component Toolbar

    View full-size slide

  19. Workspace
    Component Toolbar
    import React from 'react'
    class Workspace extends React.Component {
    }

    View full-size slide

  20. Workspace
    Component Toolbar
    import React from 'react'
    import Component, Toolbar from '...'
    class Workspace extends React.Component {
    render () {
    return



    }
    }

    View full-size slide

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



    }
    }

    View full-size slide

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



    }
    }

    View full-size slide

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



    }
    }

    View full-size slide

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



    }
    }

    View full-size slide

  25. Workspace
    Component Toolbar

    View full-size slide

  26. Workspace
    Component1 Toolbar
    Component2 Component3
    active

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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
    }

    View full-size slide

  30. 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
    }

    View full-size slide

  31. Workspace
    Component1 Toolbar
    Component2 Component3
    active

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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
    }

    View full-size slide

  36. promise of reusable components

    View full-size slide

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

    View full-size slide

  38. {
    "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 = () => (

    )
    const Title = () => (

    )

    View full-size slide

  39. {
    "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'
    `

    View full-size slide

  40. Workspace
    Toolbar
    Component2 Component3
    Box
    Title
    Library Canvas
    Avatar

    View full-size slide

  41. Workspace
    Toolbar
    Component2 Component3
    Library Canvas

    View full-size slide

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

    View full-size slide

  43. siddharthkp/reaqt

    View full-size slide

  44. @siddharthkp

    View full-size slide