React JS and why it's awesome

Software

andrew-hull
  • 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
    Please download to view
  • 132
    All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    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