Designing in React

A thought experiment to test the reusability of components beyond developers

Transcript

1. Designing in React
2. siddharthkp javascript architect @ practo
3. disclaimer: this is a thought experiment (probably a very bad one)
13. promise of reusable components
14. promise of reusable components only with developers?
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
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
63. @siddharthkp