Reactjs


(Yet Another) Approach to Browser UI

created by Facebook / Instagram



John Lynch
@johnrlynch
www.rigelgroupllc.com


Open your mind





"First they ignore you. 
Then they ridicule you. 
Then they fight you. 
Then you win."

-  somebody on the internet

Current landscape


"Traditional"
  • Server renders HTML
  • jQuery "spice" on browser
  • (PHP, Rails, Django)


"Single-Page App"
  • Server renders JSON
  • Javascript UI on browser
  • (Backbone, Ember, Angular, Batman)

React JS


Only cares about the UI.
Routers
Models
Bindings
Observers
Templates

Doesn't require full commitment (28kb)
Use where needed
Browser Support back to IE8
Battle-tested on facebook and Instagram

React Key concepts




Re-render everything on every change

Virtual DOM

Synthetic Events

ties that bind


Most SPA frameworks use 
bindings 
observers
templates
to link a model to a piece of UI



... lots of state...

...state is...


Bindings / Observers


Must mutate Model 
to propagate changes to View
post.set('title', 'Happy New Year')

Each mutation can trigger other observers
(Run Loop / Digest Loop)

Can't use immutable data structures as your model


React is functional


f(state, props) = UI Fragment

Well-written components 
don't even need state, so

f(props) = UI Fragment

Idempotency
Immutability
Testability
Bliss

Re-render the entire app on every change


No observers

No magical data binding

No model dirty checking

No $apply() or $digest()



Makes things simple to reason about




You can't just throw out the DOM

 and rebuild on every update.


Lose form state

Lose scroll position

and...




virtual DOM




  • in-memory data structure (fast)
  • Synthetic event system
  • Optimized for performance and memory footprint



Render from Data to VDOM is fast
No string concatenation

On every update...



  • Build new Virtual DOM tree 
  • Diff with old one
  • Compute minimal set of changes
  • Put them in a queue
  • Batch render all changes to browser


(Treat the DOM like a GPU!)

BONUS



Testability
Server-side rendering in Node
SVG, VML, Canvas support
Run in Web Worker (experimental)

Synthetic events


React implements it's own event system

A single native event handler at root of each component

Normalizes events across browsers

Decouples events from DOM

code


var HelloMessage = React.createClass({
  render: function() {
    return React.DOM.div(                         {className: 'mystyle'},                         'Hello ' + this.props.name                         );
  }
});

React.renderComponent(HelloMessage({name:"John"}), mountNode);

The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like.

code (jsx)


/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);
  • Special comment denotes a JSX file
  • JSX is just sugar that gets converted to JS code
  • Makes React more accessible to designers

 

Code (coffeescript)


`/** @jsx React.DOM */`HelloMessage = React.createClass
  render: ->
    `
     <div>       <h1>Welcome</h1>       <span>{'Hello ' + this.props.name}</span>     </div>    `
React.renderComponent(<HelloMessage name="John" />, mountNode)

Separation of ...?


Concerns


or


Technologies

Web site




Web App



HTML + CSS + JavaScript

Sample app


Inline styles FTW(?)



"Structural" styles can go inline with markup


"Themeable" styles can go in CSS


Self-contained component


Makona


Block-style editor for the web.

Replaces a <textarea>

Built with React


(Tooling includes Bower, Grunt, WebPack)

Further Reading



www.rigelgroupllc.com

http://www.rigelgroupllc.com/blog/2014/01/04/reactjs-roundup/



Reactjs

By John Lynch