Unify The UI With React

Transcript

1. 1.

   Unify the UI with React @dancork

2. 2.

   Dan Cork UI Engineer & Evangelist @dancork

3. 3.

   Holiday Extras

4. 4.

   Beginnings

5. 5.

   max. 4095 selectors

6. 6.

   None
7. 7.

   cssstats.com

8. 8.

   68 unique colors

9. 9.

   86 unique background colors

10. 10.

    None
11. 11.

    None
12. 12.

    16 Unique Font Families

13. 13.

    min-width: 768px and min-width: 1200px

14. 14.

    min-width: 768px and min-width: 992px

15. 15.

    min-width: 768px and min-width: 768px

16. 16.

    Why not Bootstrap?

17. 17.

    Don't want to look the same

18. 18.

    source: louderthanten.com/coax/design-machines

19. 19.

    Configurable but can cause bloat

20. 20.

    Grids are old news

21. 21.

    source: www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap

22. 22.

    flex box, grids & shapes

23. 23.

    Requires app developers to remember classes

24. 24.

    <button class="btn btn-primary btn-lg btn-block”> Click Me </button>

25. 25.

    Often doesn’t fit our design systems

26. 26.

    Not just CSS

27. 27.

    Interactions

28. 28.

    Events

29. 29.

    Tracking

30. 30.

    Why use React?

31. 31.

    Declarative

32. 32.

    <div> <span> </span> </div>

33. 33.

    <Biography> <Name> </Name> </Biography>

34. 34.

    Application Styling

35. 35.

    Styling Interaction Events

36. 36.

    #perfmatters

37. 37.

    client side rendering is notoriously bad.

38. 38.

    Render

39. 39.

    Render Re-render

40. 40.

    Render

41. 41.

    Render Virtual DOM

42. 42.

    Render Virtual DOM

43. 43.

    Render Virtual DOM

44. 44.

    Building A Library

45. 45.

    atomicdesign.bradfrost.com

46. 46.

    None
47. 47.

    stateless functional components

48. 48.

    function Button() { return <button /> }

49. 49.

    function Button() { return <button /> }

50. 50.

    MARKUP IN JAVASCRIPT?!?!

51. 51.

    JSX XML in JavaScript

52. 52.

    <button />

53. 53.

    React.createElement(“button”)

54. 54.

    React.DOM.button()

55. 55.

    function Button() { return React.DOM.button() }

56. 56.

    function Button() { return <button /> }

57. 57.

    creating react classes

58. 58.

    <button class=“rounded”>… <button class=“horrible”>… <button class=“aaargh”>… <button class=“checkout”>… <button class=“order”>…

59. 59.

    <Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>

60. 60.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
61. 61.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
62. 62.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
63. 63.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
64. 64.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
65. 65.

    > document.getElementById('id').class < undefined > document.getElementById('id').className < “my-class"

66. 66.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
67. 67.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
68. 68.

    React.PropTypes Baked In Validation Throws errors when used incorrectly

69. 69.

    React.PropTypes Uses JavaScript data types eg. string, number, object, array,

    bool
70. 70.

    React.PropTypes Acts as documentation

71. 71.

    React.PropTypes JSX syntax similar to HTML attributes

72. 72.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
73. 73.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
74. 74.

    <Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>

75. 75.

    JedWatson/classnames

76. 76.

    <Button large>Submit</Button> <Button danger>Submit</Button>

77. 77.

    <Button large={true}>Submit</Button> <Button danger={true}>Submit</Button>

78. 78.

    propTypes: { // sizes small: React.PropTypes.bool, large: React.PropTypes.bool, // colors

    primary: React.PropTypes.bool, danger: React.PropTypes.bool }
79. 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. 80.

    <Button large danger>Submit</Button> “btn btn-large btn-danger"

81. 81.

    Styling

82. 82.

    global scope

83. 83.

    inline styles

84. 84.

    INLINE STYLES ARE SUPER BAD!!!!!111

85. 85.

    Unmaintainable codebase

86. 86.

    Styling with components Unmaintainable codebase

87. 87.

    Updating styling throughout DOM is tough

88. 88.

    React handles DOM manipulation efficiently Updating styling throughout DOM is

    tough
89. 89.

    var anchorCSS = { color: ‘#333’, textDecoration: ‘none’ } <a

    style={anchorCSS} ></a>
90. 90.

    JavaScript can’t do everything CSS Can

91. 91.

    Not future proof

92. 92.

    modular css

93. 93.

    None
94. 94.

    import styles from ‘./components/button.css’ <Button className={styles.base}>Hi</Button>

95. 95.

    “components_button__base__37495f”

96. 96.

    .base { /* default styling */ } .error { composes:

    base; /* extra styling for error */ }
97. 97.

    import styles from ‘./components/input.css’ <input className={styles.error} />

98. 98.

    “components_input__base__37495f components_input__error__a8g3kd”

99. 99.

    css-modules/css-modules

100. 100.

     glenmaddern.com

101. 101.

     Consistent First

102. 102.

     Maintainable

103. 103.

     Extensible

104. 104.

     holidayextras/react-ui-workshop Give it a go…

105. 105.

     facebookincubator/create-react-app Create React App

106. 106.

     Thank You Twitter: @dancork Slides: speakerdeck.com/dancork