Intro to React and what's new in React 0.11

1. London Facebook React User
Group Meetup
#LondonReact

2. 19:00: Welcome and Intro to Facebook React: Stuart Harris
19:10: What’s new in React 0.11 and how to improve performance by
guaranteeing immutability: Stuart Harris
19:30: State handing in React with Morearty.Js: Alex Savin
19:50: Building an isomorphic,real time to do list with moped and node.Js:
Forbes Lindesay
20:10: React on Rails:How to use React with Ruby on Rails, to build
isomorphic apps: Viktor Charypar
Agenda #LondonReact

3. Introduction to React Stuart Harris

4. Introduction to React
The ‘V’ in MVC? Not really.
Components are key to modern web dev
Non-intrusive
Uniform (HTML5) across all browsers (including events)
Fast

5. Introduction to React
Like games programming
A cross between immediate-mode and retained-mode
Much easier to reason about your application’s state

6. http://calendar.perfplanet.com/2013/diff/
How does it work?
Reconciliation

7. http://calendar.perfplanet.com/2013/diff/
How does it work?

8. http://calendar.perfplanet.com/2013/diff/
How does it work?

9. http://calendar.perfplanet.com/2013/diff/
How does it work?

10. http://calendar.perfplanet.com/2013/diff/
How does it work?
boolean shouldComponentUpdate(object nextProps, object nextState)

11. http://calendar.perfplanet.com/2013/diff/
How does it work?
O(n3)
O(n)
1000 nodes = 1,000,000,000 comparisons
1000 nodes = 1000 comparisons
(can even be significantly cheaper than this)

12. What’s new in React 0.11
getDefaultProps()
now called once per component type rather than before each render()
render()
can now render “nothing” by returning null (implemented using <noscript> which could be a
problem with XHTML pages, but this may change).
JSX namespaces:
render: function() {
return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
}
e.key and e.getModifierState()
as per http://www.w3.org/TR/DOM-Level-3-Events/#keys-special
new onBeforeInput event

13. What’s broken in React 0.11
Can’t call setState() in componentWillMount() for server-side
rendering. Possibly can’t call it at all server-side. The docs say this is allowed
and they will release 0.11.1 with a fix soon. It’s probably better just to return
initial state from getInitialState()
Server-side rendering of selected option elements is difficult because of the
way select elements use value instead of selected options. Can be done
but get loads of warnings.

14. What’s new in React 0.11 Addons
PureRenderMixin
a mixin which helps optimize "pure" components
Perf
a new set of tools to help with performance analysis
Update
New $apply command to transform values
TransitionGroup
bug fixes with null elements, Android

15. What’s new in React 0.11 Addons
"We should forget about small efficiencies, say about 97% of the time:
premature optimization is the root of all evil" - Donald Knuth
Demo
Perf.printWasted()
PureRenderMixin

16. How to improve performance by
guaranteeing immutability
var new-data = require('react/addons').addons.update(old-data, updates);
where updates is a sparse object defining location and nature of each update
DEMO
http://facebook.github.io/react/docs/update.html

17. How to improve performance by
guaranteeing immutability
{$push: array} push() all the items in array on the target.
{$unshift: array} unshift() all the items in array on the target.
{$splice: array of arrays} for each item in array() call splice() on the
target with the parameters provided by the item.
{$set: any} replace the target entirely.
{$merge: object} merge the keys of object with the target.
{$apply: function} passes in the current value to the function and updates
it with the new returned value.

18. How to improve performance by
guaranteeing immutability
PureRenderMixin will now work with deep hierarchies
Alternatives:
● LiveScript with prelude-ls
○ http://livescript.net/
○ http://www.preludels.com/
● Mori
○ https://github.com/swannodette/mori
○ http://swannodette.github.io/mori/
● ClojureScript (esp with Om)
○ https://github.com/swannodette/om

19. State handing in React with Morearty.JS
Alex Savin

20. Building an isomorphic Forbes Lindesay

21. React on Rails Viktor Charypar

22. We’d love to hear from you
Please fill in the feedback survey on the Meetup page
Red Badger
@redbadgerteam
red-badger.com
hello@red-badger.com
Feedback
#LondonReact