React

and why it’s awesome

Andrew Hull
@aghull
normative.com
React First Impressions
React First Impressions
React First Impressions

WT
F?
!
“Reaction” to React
“Reaction” to React

“Ugly.”
“Reaction” to React

“Ugly.”

“Separation of concerns!!”
“Reaction” to React

“Ugly.”

“Separation of concerns!!”

“React is a templating language.”

“Reaction” to React
“Reaction” to React

• Don’t sweat it
“Reaction” to React

• Don’t sweat it
• JSX
“Reaction” to React

• Don’t sweat it
• JSX
• It’s actually just Javascript
“Reaction” to React

• Don’t sweat it
• JSX
• It’s actually just Javascript
• It’s not a templating language
“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
React Second Impressions
React Second Impressions

• Oh! There’s 2-way data-binding, like Angular!

React Second Impressions

• Oh! There’s 2-way data-binding, like Angular!

• Oh! It can work with Backbone. How I do?
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!
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.

 Some
Fundamentals
 #1
Everything is a Component
React has no…
React has no…
… controllers
React has no…
… controllers
… directives
React has no…
… controllers
… directives
… templates
React has no…
… controllers
… directives
… templates
… global event listeners
React has no…
… controllers
… directives
… templates
… global event listeners
… models
React has no…
… controllers
… directives
… templates
… global event listeners
… models
… no view models
React has no…
… controllers
… directives
… templates
… global event listeners
… models
… no view models

Just
React has no…
… controllers
… directives
… templates
… global event listeners
… models
… no view models

Just Components
“Separation of concerns!!”
“Separation
“Do you even
of concerns!!”
MVC?”
What if we “separate” another way?
What if we “separate” another way?

CartComponent
What if we “separate” another way?

CartComponent
CartListComponent
What if we “separate” another way?

CartComponent
CartListComponent

CartItemComponent
What if we “separate” another way?

CartComponent
CartListComponent

CartItemComponent

ButtonComponent
 Separation of
Concerns Components
 Separation of
Concerns Components
•composable
 Separation of
Concerns Components
•composable
•reusable
 Separation of
Concerns Components
•composable
•reusable
•maintainable
 Separation of
Concerns Components
•composable
•reusable
•maintainable
•testable
 Separation of
Concerns Components
•composable
•reusable
•maintainable
•testable

*If* Components are truly

self-contained
 #2
Single Source of Truth
Traditional data flows
 Traditional data flows
No framework: Any component can
communicate with any other component
 Traditional data flows
No framework: Any component can
communicate with any other component

Backbone: Pub-sub

item.on('change:name', function() {…
 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 = …
 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

Data handed from parent to child

props.

check.
Props accessed on this.props
Props accessed on this.props

props.
Props accessed on this.props

props.
Props accessed on this.props

props.

props.
Props accessed on this.props

props.

props.
Props are immutable
Props are immutable

props.
Props are immutable

props.
 Props are immutable

Don’t touch
my stuff!

props.
State is mutable

props.
State is mutable

props.
State is mutable

props.
 State is mutable

Whatever you
say, dude.

props.
State can become props
State can become props

props.
State can become props

props.
State can become props

props.

props.
State can become props

props.

props.
Data only flows one way
Data only flows one way

Sure, sounds good…

Data only flows one way

Sure, sounds good…

(5 minutes later) Wait!
Data only flows one way

Sure, sounds good…

(5 minutes later) Wait!
That’s not how the real world works!
 Data flows up?
CartComponent
CartListComponent

CartItemComponent

<input>
Data flows down with handlers
CartComponent!
!
<CartListComponent!
list={this.state.list}!
onChange={this.handleChange}/>
 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!
 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!

<input value={this.props.item.qty} onChange={this.changeQty}>

 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!

<input value={this.props.item.qty} onChange={this.changeQty}>

 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!

<input value={this.props.item.qty} onChange={this.changeQty}>

 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!

<input value={this.props.item.qty} onChange={this.changeQty}>

 Data flows down with handlers
CartComponent!
CartListComponent!
!
! <CartListComponent!
this.props.list.map(function(item) {!
list={this.state.list}!
<CartItemComponent item={item}!
onChange={this.handleChange}/>
onChange={this.props.onChange}/>!
})
CartItemComponent!
!
changeQty: function() {!
… does stuff!
this.props.onChange();!
}!

<input value={this.props.item.qty} onChange={this.changeQty}>

Events flow up, data flows down
Events flow up, data flows down

Does this sound familiar?

Events flow up, data flows down

Does this sound familiar?

Just like the DOM.
 #3
Virtual DOM
What’s worse than having state
in two places at once?
What’s worse than having state
in two places at once?

Having state in the DOM.

Touching the DOM is evil
Touching the DOM is evil

• It’s inconsistent
Touching the DOM is evil

• It’s inconsistent
• It’s hard to test
Touching the DOM is evil

• It’s inconsistent
• It’s hard to test
• It’s brittle
Touching the DOM is evil

• It’s inconsistent
• It’s hard to test
• It’s brittle
• It’s EXPENSIVE!
Back to JSX
JSX Compiled
It’s just Javascript
It’s just Javascript
Why learn yet another
template language?
What’s actually happening
in render() ?
What’s actually happening
in render() ?

What does p() return?

What’s actually happening
in render() ?

What does p() return?

When do I call render()
Virtual DOM
 Virtual DOM
• It’s a pure Javascript, in-memory
representation of the DOM
 Virtual DOM
• It’s a pure Javascript, in-memory
representation of the DOM
• render() fires whenever something
changes
 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
 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
 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
 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
… Except when it doesn’t
… Except when it doesn’t
How do I access the actual DOM?
… Except when it doesn’t
How do I access the actual DOM?
How do I know when render() is done?
… Except when it doesn’t
How do I access the actual DOM?
How do I know when render() is done?
… Except when it doesn’t
How do I access the actual DOM?
How do I know when render() is done?

Lifecycle Method
… 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

Yay! Declarative Templates!
Declarative Templates suck!
Declarative Templates suck!

wut.
Declarative Templates suck!

wut.
Declarative Templates suck!
Sounds legit!

wut.
Why all this is awesome
 Why all this is awesome
• One-way data flow keeps complexity
under control
 Why all this is awesome
• One-way data flow keeps complexity
under control
• Easy to debug self-contained
components
 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
 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
 A small demo

http://www.emergent.info/iphone-hairgate
Where to go from here?
 Where to go from here?

Official React docs


http://facebook.github.io/react/
 Where to go from here?

Official React docs


http://facebook.github.io/react/
TodoMVC

[email protected]:tastejs/todomvc.git
Thank You