Unify The UI With React

Transcript

1. Unify the UI with React @dancork
2. Dan Cork UI Engineer & Evangelist @dancork
3. Holiday Extras
4. Beginnings
5. max. 4095 selectors
7. cssstats.com
8. 68 unique colors
9. 86 unique background colors
12. 16 Unique Font Families
13. min-width: 768px and min-width: 1200px
14. min-width: 768px and min-width: 992px
15. min-width: 768px and min-width: 768px
16. Why not Bootstrap?
17. Don't want to look the same
18. source: louderthanten.com/coax/design-machines
19. Configurable but can cause bloat
20. Grids are old news
21. source: www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap
22. flex box, grids & shapes
23. Requires app developers to remember classes
24. <button class="btn btn-primary btn-lg btn-block”> Click Me </button>
25. Often doesn’t fit our design systems
26. Not just CSS
27. Interactions
28. Events
29. Tracking
30. Why use React?
31. Declarative
32. <div> <span> </span> </div>
33. <Biography> <Name> </Name> </Biography>
34. Application Styling
35. Styling Interaction Events
36. #perfmatters
37. client side rendering is notoriously bad.
38. Render
39. Render Re-render
40. Render
41. Render Virtual DOM
42. Render Virtual DOM
43. Render Virtual DOM
44. Building A Library
45. atomicdesign.bradfrost.com
47. stateless functional components
48. function Button() { return <button /> }
49. function Button() { return <button /> }
50. MARKUP IN JAVASCRIPT?!?!
51. JSX XML in JavaScript
52. <button />
53. React.createElement(“button”)
54. React.DOM.button()
55. function Button() { return React.DOM.button() }
56. function Button() { return <button /> }
57. creating react classes
58. <button class=“rounded”>… <button class=“horrible”>… <button class=“aaargh”>… <button class=“checkout”>… <button class=“order”>…
59. <Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>
60. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
61. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
62. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
63. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
64. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
65. > document.getElementById('id').class < undefined > document.getElementById('id').className < “my-class"
66. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
67. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
68. React.PropTypes Baked In Validation Throws errors when used incorrectly
69. React.PropTypes Uses JavaScript data types eg. string, number, object, array, bool
70. React.PropTypes Acts as documentation
71. React.PropTypes JSX syntax similar to HTML attributes
72. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
73. var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
74. <Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>
75. JedWatson/classnames
76. <Button large>Submit</Button> <Button danger>Submit</Button>
77. <Button large={true}>Submit</Button> <Button danger={true}>Submit</Button>
78. propTypes: { // sizes small: React.PropTypes.bool, large: React.PropTypes.bool, // colors primary: React.PropTypes.bool, danger: React.PropTypes.bool }
79. import classNames from ‘class-names’ classNames({ ‘btn’: true, ‘btn-small’: this.props.small, ‘btn-large’: this.props.large, ‘btn-primary’: this.props.primary, ‘btn-danger’: this.props.danger });
80. <Button large danger>Submit</Button> “btn btn-large btn-danger"
81. Styling
82. global scope
83. inline styles
84. INLINE STYLES ARE SUPER BAD!!!!!111
85. Unmaintainable codebase
86. Styling with components Unmaintainable codebase
87. Updating styling throughout DOM is tough
88. React handles DOM manipulation efficiently Updating styling throughout DOM is tough
89. var anchorCSS = { color: ‘#333’, textDecoration: ‘none’ } <a style={anchorCSS} ></a>
90. JavaScript can’t do everything CSS Can
91. Not future proof
92. modular css
94. import styles from ‘./components/button.css’ <Button className={styles.base}>Hi</Button>
95. “components_button__base__37495f”
96. .base { /* default styling */ } .error { composes: base; /* extra styling for error */ }
97. import styles from ‘./components/input.css’ <input className={styles.error} />
98. “components_input__base__37495f components_input__error__a8g3kd”
99. css-modules/css-modules
100. glenmaddern.com
101. Consistent First
102. Maintainable
103. Extensible
104. holidayextras/react-ui-workshop Give it a go…
105. facebookincubator/create-react-app Create React App
106. Thank You Twitter: @dancork Slides: speakerdeck.com/dancork