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

Unify The UI With React

F8403810aba9bdec8f66588c856d0e2f?s=47 Dan Cork
April 28, 2016

Unify The UI With React

F8403810aba9bdec8f66588c856d0e2f?s=128

Dan Cork

April 28, 2016
Tweet

Transcript

  1. Unify the UI with React @dancork

  2. Dan Cork UI Engineer & Evangelist @dancork

  3. Holiday Extras

  4. Beginnings

  5. max. 4095 selectors

  6. None
  7. cssstats.com

  8. 68 unique colors

  9. 86 unique background colors

  10. None
  11. None
  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

  46. None
  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

  93. None
  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