React JS and why it's awesome

Software

andrew-hull
System is processing data
Please download to view
1
Description
Introduction to React JS library and some of the fundamentals that set it apart from other choices
Text
  • 1. Reactand why it’s awesomeAndrew Hull@aghullnormative.com
  • 2. React First Impressions
  • 3. React First Impressions
  • 4. React First ImpressionsWTF?!
  • 5. “Reaction” to React
  • 6. “Reaction” to React“Ugly.”
  • 7. “Reaction” to React“Ugly.”“Separation of concerns!!”
  • 8. “Reaction” to React“Ugly.”“Separation of concerns!!”“React is a templating language.”
  • 9. “Reaction” to React
  • 10. “Reaction” to React• Don’t sweat it
  • 11. “Reaction” to React• Don’t sweat it• JSX
  • 12. “Reaction” to React• Don’t sweat it• JSX• It’s actually just Javascript
  • 13. “Reaction” to React• Don’t sweat it• JSX• It’s actually just Javascript• It’s not a templating language
  • 14. “Reaction” to React• Don’t sweat it• JSX• It’s actually just Javascript• It’s not a templating language• If you don’t like it, you don’t hafta
  • 15. React Second Impressions
  • 16. React Second Impressions• Oh! There’s 2-way data-binding, like Angular!
  • 17. React Second Impressions• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?
  • 18. React Second Impressions• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?• Oh! It can do animations and SVG!
  • 19. React Second Impressions• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?• Oh! It can do animations and SVG!Wait. Let’s back up.
  • 20. SomeFundamentals
  • 21. #1Everything is a Component
  • 22. React has no…
  • 23. React has no…… controllers
  • 24. React has no…… controllers… directives
  • 25. React has no…… controllers… directives… templates
  • 26. React has no…… controllers… directives… templates… global event listeners
  • 27. React has no…… controllers… directives… templates… global event listeners… models
  • 28. React has no…… controllers… directives… templates… global event listeners… models… no view models
  • 29. React has no…… controllers… directives… templates… global event listeners… models… no view modelsJust
  • 30. React has no…… controllers… directives… templates… global event listeners… models… no view modelsJust Components
  • 31. “Separation of concerns!!”
  • 32. “Se“pDaora ytoioun e ovef nc oMnVcCer?n”s!!”
  • 33. What if we “separate” another way?
  • 34. What if we “separate” another way?CartComponent
  • 35. What if we “separate” another way?CartComponentCartListComponent
  • 36. What if we “separate” another way?CartComponentCartListComponentCartItemComponent
  • 37. What if we “separate” another way?CartComponentCartListComponentCartItemComponentButtonComponent
  • 38. Separation ofConcerns Components
  • 39. Separation ofConcerns Components•composable
  • 40. Separation ofConcerns Components•composable•reusable
  • 41. Separation ofConcerns Components•composable•reusable•maintainable
  • 42. Separation ofConcerns Components•composable•reusable•maintainable•testable
  • 43. Separation ofConcerns Components•composable•reusable•maintainable•testable*If* Components are trulyself-contained
  • 44. #2Single Source of Truth
  • 45. Traditional data flows
  • 46. Traditional data flowsNo framework: Any component cancommunicate with any other component
  • 47. Traditional data flowsNo framework: Any component cancommunicate with any other componentBackbone: Pub-subitem.on('change:name', function() {…
  • 48. Traditional data flowsNo framework: Any component cancommunicate with any other componentBackbone: Pub-subitem.on('change:name', function() {…Angular: 2-way data binding and $digest loop$scope.name = …
  • 49. Traditional data flowsNo framework: Any component cancommunicate with any other componentBackbone: Pub-subitem.on('change:name', function() {…Angular: 2-way data binding and $digest loop$scope.name = …React: 1-way data flow
  • 50. Data handed from parent to childcheck.props.
  • 51. Props accessed on this.props
  • 52. Props accessed on this.propsprops.
  • 53. Props accessed on this.propsprops.
  • 54. Props accessed on this.propsprops.props.
  • 55. Props accessed on this.propsprops.props.
  • 56. Props are immutable
  • 57. Props are immutableprops.
  • 58. Props are immutableprops.
  • 59. Props are immutableprops.Don’t touchmy stuff!
  • 60. State is mutableprops.
  • 61. State is mutableprops.
  • 62. State is mutableprops.
  • 63. State is mutableprops.Whatever yousay, dude.
  • 64. State can become props
  • 65. State can become propsprops.
  • 66. State can become propsprops.
  • 67. State can become propsprops.props.
  • 68. State can become propsprops.props.
  • 69. Data only flows one way
  • 70. Data only flows one waySure, sounds good…
  • 71. Data only flows one waySure, sounds good…(5 minutes later) Wait!
  • 72. Data only flows one waySure, sounds good…(5 minutes later) Wait!That’s not how the real world works!
  • 73. Data flows up?CartComponentCartListComponentCartItemComponent<input>
  • 74. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
  • 75. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})
  • 76. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!
  • 77. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!<input value={this.props.item.qty} onChange={this.changeQty}>
  • 78. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!<input value={this.props.item.qty} onChange={this.changeQty}>
  • 79. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!<input value={this.props.item.qty} onChange={this.changeQty}>
  • 80. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!<input value={this.props.item.qty} onChange={this.changeQty}>
  • 81. Data flows down with handlersCartComponent!!<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>CartListComponent!!this.props.list.map(function(item) {!<CartItemComponent item={item}!onChange={this.props.onChange}/>!})CartItemComponent!!changeQty: function() {!… does stuff!this.props.onChange();!}!<input value={this.props.item.qty} onChange={this.changeQty}>
  • 82. Events flow up, data flows down
  • 83. Events flow up, data flows downDoes this sound familiar?
  • 84. Events flow up, data flows downDoes this sound familiar?Just like the DOM.
  • 85. #3Virtual DOM
  • 86. What’s worse than having statein two places at once?
  • 87. What’s worse than having statein two places at once?Having state in the DOM.
  • 88. Touching the DOM is evil
  • 89. Touching the DOM is evil• It’s inconsistent
  • 90. Touching the DOM is evil• It’s inconsistent• It’s hard to test
  • 91. Touching the DOM is evil• It’s inconsistent• It’s hard to test• It’s brittle
  • 92. Touching the DOM is evil• It’s inconsistent• It’s hard to test• It’s brittle• It’s EXPENSIVE!
  • 93. Back to JSX
  • 94. JSX Compiled
  • 95. It’s just Javascript
  • 96. It’s just Javascript
  • 97. Why learn yet anothertemplate language?
  • 98. What’s actually happeningin render() ?
  • 99. What’s actually happeningin render() ?What does p() return?
  • 100. What’s actually happeningin render() ?What does p() return?When do I call render()
  • 101. Virtual DOM
  • 102. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM
  • 103. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM• render() fires whenever somethingchanges
  • 104. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM• render() fires whenever somethingchanges• React modifies the real DOM to match
  • 105. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM• render() fires whenever somethingchanges• React modifies the real DOM to match• It’s FAST
  • 106. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM• render() fires whenever somethingchanges• React modifies the real DOM to match• It’s FAST• It’s pure
  • 107. Virtual DOM• It’s a pure Javascript, in-memoryrepresentation of the DOM• render() fires whenever somethingchanges• React modifies the real DOM to match• It’s FAST• It’s pure• It just works
  • 108. … Except when it doesn’t
  • 109. … Except when it doesn’tHow do I access the actual DOM?
  • 110. … Except when it doesn’tHow do I access the actual DOM?How do I know when render() is done?
  • 111. … Except when it doesn’tHow do I access the actual DOM?How do I know when render() is done?
  • 112. … Except when it doesn’tHow do I access the actual DOM?How do I know when render() is done?Lifecycle Method
  • 113. … Except when it doesn’tHow do I access the actual DOM?How do I know when render() is done?Lifecycle MethodActual DOM Node
  • 114. Yay! Declarative Templates!
  • 115. Declarative Templates suck!
  • 116. Declarative Templates suck!wut.
  • 117. Declarative Templates suck!wut.
  • 118. Declarative Templates suck!wut.Sounds legit!
  • 119. Why all this is awesome
  • 120. Why all this is awesome• One-way data flow keeps complexityunder control
  • 121. Why all this is awesome• One-way data flow keeps complexityunder control• Easy to debug self-containedcomponents
  • 122. Why all this is awesome• One-way data flow keeps complexityunder control• Easy to debug self-containedcomponents• Library doesn’t dictate too much
  • 123. Why all this is awesome• One-way data flow keeps complexityunder control• Easy to debug self-containedcomponents• Library doesn’t dictate too much• Ridiculous potential
  • 124. A small demohttp://www.emergent.info/iphone-hairgate
  • 125. Where to go from here?
  • 126. Where to go from here?Official React docshttp://facebook.github.io/react/
  • 127. Where to go from here?Official React docshttp://facebook.github.io/react/TodoMVCgit@github.com:tastejs/todomvc.git
  • 128. Thank You
  • Comments
    Top