React JS and why it's awesome

1. React and why it’s awesome Andrew Hull @aghull normative.com

2. React First Impressions

3. React First Impressions

4. React First Impressions WTF?!

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. Some Fundamentals

21. #1 Everything 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 models Just

30. React has no… … controllers … directives … templates … global event listeners … models … no view models Just 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? CartComponent CartListComponent

36. What if we “separate” another way? CartComponent CartListComponent CartItemComponent

37. What if we “separate” another way? CartComponent CartListComponent CartItemComponent ButtonComponent

38. Separation of Concerns Components

39. Separation of Concerns Components •composable

40. Separation of Concerns Components •composable •reusable

41. Separation of Concerns Components •composable •reusable •maintainable

42. Separation of Concerns Components •composable •reusable •maintainable •testable

43. Separation of Concerns Components •composable •reusable •maintainable •testable *If* Components are truly self-contained

44. #2 Single Source of Truth

45. Traditional data flows

46. Traditional data flows No framework: Any component can communicate with any other component

47. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.on('change:name', function() {…

48. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.on('change:name', function() {… Angular: 2-way data binding and $digest loop $scope.name = …

49. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.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 child check. props.

51. Props accessed on this.props

52. Props accessed on this.props props.

53. Props accessed on this.props props.

54. Props accessed on this.props props. props.

55. Props accessed on this.props props. props.

56. Props are immutable

57. Props are immutable props.

58. Props are immutable props.

59. Props are immutable props. Don’t touch my stuff!

60. State is mutable props.

63. State is mutable props. Whatever you say, dude.

64. State can become props

65. State can become props props.

66. State can become props props.

67. State can become props props. props.

68. State can become props props. props.

69. Data only flows one way

70. Data only flows one way Sure, sounds good…

71. Data only flows one way Sure, sounds good… (5 minutes later) Wait!

72. Data only flows one way Sure, sounds good… (5 minutes later) Wait! That’s not how the real world works!

73. Data flows up? CartComponent CartListComponent CartItemComponent <input>

74. Data flows down with handlers CartComponent! ! <CartListComponent! list={this.state.list}! onChange={this.handleChange}/>

75. Data flows down with handlers CartComponent! ! <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 handlers CartComponent! ! <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 handlers CartComponent! ! <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 down Does this sound familiar?

84. Events flow up, data flows down Does this sound familiar? Just like the DOM.

85. #3 Virtual DOM

86. What’s worse than having state in two places at once?

87. What’s worse than having state in 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 another template language?

98. What’s actually happening in render() ?

99. What’s actually happening in render() ? What does p() return?

100. What’s actually happening in render() ? What does p() return? When do I call render()

101. Virtual DOM

102. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM

103. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes

104. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes • React modifies the real DOM to match

105. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes • React modifies the real DOM to match • It’s FAST

106. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes • React modifies the real DOM to match • It’s FAST • It’s pure

107. Virtual DOM • It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes • 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’t How do I access the actual DOM?

110. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done?

111. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done?

112. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method

113. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method Actual 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 complexity under control

121. Why all this is awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components

122. Why all this is awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components • Library doesn’t dictate too much

123. Why all this is awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components • Library doesn’t dictate too much • Ridiculous potential

124. A small demo http://www.emergent.info/iphone-hairgate

125. Where to go from here?

126. Where to go from here? Official React docs http://facebook.github.io/react/

127. Where to go from here? Official React docs http://facebook.github.io/react/ TodoMVC git@github.com:tastejs/todomvc.git

128. Thank You