There has been a heap of talk about web frameworks recently, React is one which is particularly interesting. React takes a very different approach to how you build and compose your javascript applications. After this session you will have a good understanding what React is, how it is different to other frameworks like Angular and Ember and the reasons you might want to give it a go.

1. Why React is different

2. Jake Ginnivan
jake@ginnivan.net
http://jake.ginnivan.net
@jakeginnivan
http://github.com/jakeginnivan

4. Rob Ashton

8. History of web UI’s

10. Javascript
<input id="task" type="input" />
<input id="addTask" type="button" onClick="addTask()" value="add" />
<ul id="tasks"></ul>
<script type="text/javascript">
function addTask() {
var task = document.createElement('li')
var input = document.getElementById('task')
task.innerText = input.value
input.value = '' document.body.appendChild(task)
}
</script>

11. jQuery
<input id="task" type="input" />
<input id="addTask" type="button" value="add" />
<ul id="tasks"></ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-
1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#addTask').click(function() {
var input = $('#task')
$(document.body).append('<li>' + input.val() + '</li>')
input.val('')
})
})
</script>

12. Templating libraries
<script src="jquery-1.11.3.min.js"></script><script src="handlebars.min.js"></script>
<script type="text/template" id="tasks-list-template">
{{#each tasks}}
<li>{{this}}</li>
{{/each}}
</script>
<script type="text/javascript">
$(function() {
var tasks = []
var source = $('#tasks-list-template').html()
var template = Handlebars.compile(source)
$('#addTask').click(function() {
var input = $('#task')
var task = input.val()
tasks.push(task)
$('#tasks').html(template({tasks: tasks}))
input.val('')
})
})
</script>
function template(context) {
return context.tasks.map(function(task) {
return '<li>' + task + '</li>;'
})
}

13. Data binding
<ul id="tasks" data-bind="template: { name: 'task-template', foreach: tasks }">
<li data-bind="text: $data"></li>
</ul>
<script src="jquery-1.11.3.min.js"></script><script src="knockout-min.js"></script>
<script type="text/template" id="task-template">
<li data-bind="text: $data"></li>
</script>
<script type="text/javascript">
$(function() {
var tasksViewModel = { tasks: ko.observableArray([]) }
ko.applyBindings(tasksViewModel)
$("#addTask").click(function() {
var input = $("#task")
var task = input.val()
tasksViewModel.tasks.push(task)
input.val('')
})
})
</script>

14. WebComponents
<div task-list /> <TaskList />
Directives

15. They are all basically the same…..
React actually is different!

16. ES6 Primer!
class Foo {
method() { console.log('Hi DDD') }
}
function Foo() { }
Foo.prototype.method = function() {
console.log('Hi DDD')
}
array.map(i => console.log(i)) array.map(function(i) { console.log(i) })
import foo from 'foo' var foo = require('foo')
export default function() { } module.exports = function() { }

17. So what is React?
class TaskList extends React.Component {
constructor(props) {
super(props)
this.state = { tasks: [], newTask: '' }
}
newTaskTextChanged(e) { this.setState({newTask: e.target.value}) }
addTask() {
this.setState({ tasks: this.state.tasks.splice(0, 0, this.state.newTask), newTask: '' })
}
render() {
return (
<div>
<input type="text" onChange={this.newTaskTextChanged} />
<ul>{this.state.tasks.map(t => <li onClick={this.addTask}>{t}</li>)}</ul>
</div>
)
}
}
var container = document.body.createElement('div')
document.body.appendChild(container)
React.render(<TaskList />, container)

18. So what is React?
class TaskList extends React.Component {
constructor(props) {
super(props)
this.state = { tasks: [], newTask: '' }
}
newTaskTextChanged(e) { this.setState({newTask: e.target.value}) }
addTask() {
this.setState({ tasks: this.state.tasks.splice(0, 0, this.state.newTask), newTask: '' })
}
render() {
return (
<div>
<input type="text" onChange={this.newTaskTextChanged} />
<ul>{this.state.tasks.map(t => <li onClick={this.addTask}>{t}</li>)}</ul>
</div>
)
}
}
var container = document.body.createElement('div')
document.body.appendChild(container)
React.render(<TaskList />, container)

19. So what is React?
class TaskList extends React.Component {
constructor(props) {
super(props)
this.state = { tasks: [], newTask: '' }
}
newTaskTextChanged(e) { this.setState({newTask: e.target.value}) }
addTask() {
this.setState({ tasks: this.state.tasks.splice(0, 0, this.state.newTask), newTask: '' })
}
render() {
return (
<div>
<input type="text" onChange={this.newTaskTextChanged} />
<ul>{this.state.tasks.map(t => <li onClick={this.addTask}>{t}</li>)}</ul>
</div>
)
}
}
var container = document.body.createElement('div')
document.body.appendChild(container)
React.render(<TaskList />, container)

20. So what is React?
class TaskList extends React.Component {
constructor(props) {
super(props)
this.state = { tasks: [], newTask: '' }
}
newTaskTextChanged(e) { this.setState({newTask: e.target.value}) }
addTask() {
this.setState({ tasks: this.state.tasks.splice(0, 0, this.state.newTask), newTask: '' })
}
render() {
return (
<div>
<input type="text" onChange={this.newTaskTextChanged} />
<ul>{this.state.tasks.map(t => <li onClick={this.addTask}>{t}</li>)}</ul>
</div>
)
}
}
var container = document.body.createElement('div')
document.body.appendChild(container)
React.render(<TaskList />, container)

21. What the hell is that??
You have put HTML in my JavaScript
http://codepen.io/somethingkindawierd/blog/jsx-is-weird

22. What the hell is that??
render() {
return (
React.createElement("div", null,
React.createElement("input", {type: "text", onChange: this.newTaskTextChanged}),
React.createElement(
"ul",
null,
this.state.tasks.map(t => React.createElement("li", {onClick: this.addTask}, t))
)
)
)
}

23. But, but separation of concerns!?!
Markup + display logic are highly cohesive and tightly coupled.
We are separating technologies at the moment, not concerns

24. Everything is JavaScript
• Lets accept templating languages are underpowered
• And inventing dsl's to specify bindings are just recreating what we already have
• Everything you can do in javascript you can now do in your markup
• Extract bits of markup into variables
• Simple display logic (item/items)
• No parsing/eval and text automatically html encoded - no xss
• Up to you how to separate your concerns!

25. Angular…
<ul ng-repeat="task in tasks"}><li ng-bind="task"></li></ul>
<ng-pluralize count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}">
</ng-pluralize>
<div ng-if="conference === 'dddperth'">Hi DDD Perth</div>

26. React's design
Our intellectual powers are rather geared to master static relations
and that our powers to visualise processes evolving in time are
relatively poorly developed. For that reason we should do (as wise
programmers aware of our limitations) our utmost to shorten the
conceptual gap between the static program and the dynamic
process, to make the correspondence between the program (spread
out in text space) and the process (spread out in time) as trivial as
possible.
- Dijkstra
From <https://en.wikiquote.org/wiki/Edsger_W._Dijkstra>

27. React's design
Our intellectual powers are rather geared to master static relations
and that our powers to visualise processes evolving in time are
relatively poorly developed. For that reason we should do (as wise
programmers aware of our limitations) our utmost to shorten the
conceptual gap between the static program and the dynamic
process, to make the correspondence between the program (spread
out in text space) and the process (spread out in time) as trivial as
possible.
- Dijkstra
From <https://en.wikiquote.org/wiki/Edsger_W._Dijkstra>

28. React's design
Application State render() Rendered Application
Event (DOM, Push Messaging etc)
Event
Handler
New State

29. Virtual DOM
<ul>
<li key="1">Task 1</li>
<li key="2">Task 2</li>
</ul>
<ul>
<li key="1">Task 1</li>
<li key="2">Task 2</li>
<li key="3">Task 3</li>
</ul>
PATCH:
Insert <li key="3">Task 3</li> at end of <ul>
Delete li with key "1"
<ul>
<li key="2">Task 2</li>
<li key="3">Task 3</li>
</ul>
<ul>
<li key="2">Task 2</li>
<li key="3">Task 3</li>
</ul>

30. Virtual DOM != Shadow DOM
• <input id="foo" type="range">
• It renders a complex control
• foo.childElement === null
• CSS can be scoped to that Shadow DOM

31. Breaking React down
We can actually cover the entire library surface in 10 minutes.. Try doing that with
angular/ember

32. Components!

33. Anatomy of a React Component
Lets code a simple React component

34. Lifecycle of a React Component

35. First Render
initial state/props
componentWillMount
componentDidMount
componentWillUnmount

36. Props changed
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

37. state changed
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

38. Other things

39. Styles
render() {
return (
<div>
<span style={{color: 'red'}}
className="myClass">text</a>
</div>
)
}

40. Styles
render() {
var red = {color: 'red'}
var classes = classNames(['classOne', something ? 'classTwo' : null])
return (
<div>
<span style={red}
className={classes}>text</a>
</div>
)
}

41. Styles
import myStyles from './component.less'
render() {return (
<div>
<span className={myStyle.someClass}>text</a>
</div>
)
}

42. Isomorphic
• The same React components can render on the server AND on the
client
• When client initialises, it:
• attaches to the server generated dom
• Generates the initial Virtual DOM from that
• Renders a complete new VDOM
• Brings server generated DOM up to date

43. Testing
• Shallow Rendering
• Render into DOM
• Test tools available

44. Show me something decent
Ok..
Here is Reactive Trader

45. Wrapping up
• https://github.com/AdaptiveConsulting/react-adaptive-trader

46. Questions?