react meetup 2
DESCRIPTION
Intro to React and what's new in React 0.11TRANSCRIPT
London Facebook React User Group Meetup
#LondonReact
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
Introduction to React Stuart Harris
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
Introduction to React
Like games programming
A cross between immediate-mode and retained-mode
Much easier to reason about your application’s state
http://calendar.perfplanet.com/2013/diff/
How does it work?
Reconciliation
http://calendar.perfplanet.com/2013/diff/
How does it work?
http://calendar.perfplanet.com/2013/diff/
How does it work?
http://calendar.perfplanet.com/2013/diff/
How does it work?
http://calendar.perfplanet.com/2013/diff/
How does it work?
boolean shouldComponentUpdate(object nextProps, object
nextState)
http://calendar.perfplanet.com/2013/diff/
How does it work?
O(n3)O(n)
1000 nodes = 1,000,000,000 comparisons1000 nodes = 1000 comparisons(can even be significantly cheaper than this)
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
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.
What’s new in React 0.11 Addons
PureRenderMixina mixin which helps optimize "pure" components
Perfa new set of tools to help with performance analysis
UpdateNew $apply command to transform values
TransitionGroupbug fixes with null elements, Android
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
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
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.
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
State handing in React with Morearty.JS
Alex Savin
Building an isomorphic Forbes Lindesay
React on Rails Viktor Charypar
We’d love to hear from youPlease fill in the feedback survey on the Meetup page
Red Badger @redbadgerteam
red-badger.com [email protected]
Feedback
#LondonReact