react meetup 2

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 hello@red-badger.com

Feedback

#LondonReact