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

Technologies

Web site

Web App

HTML + CSS + JavaScript

Sample app

React App Fiddle

Fiddle #2

Inline styles FTW(?)

"Structural" styles can go inline with markup

"Themeable" styles can go in CSS

Self-contained component

Fiddle

Makona

Block-style editor for the web.

Replaces a <textarea>

Built with React

Demo

(Tooling includes Bower, Grunt, WebPack)