React.js Conf

11111011111

You won't believe what happened when Crabman and the Hooverdam went to Palo Alto.

10 reasons why the conference was epic

Awesome, social community (+ FB people)
Dem announcements
Free snacks, free drinks!
Shoutouts to community people
Epic tech stack at Facebook

Most awesome

React Native
Relay
GraphQL
Immutable data

React Native, eh?

React runs on JS thread (not the UI thread)
Has no DOM, no HTML, no browser
Creates native view widgets
(Text, Image, EditText vs span, img, input)
Same diff algorithm, same concepts
"UIs as a pure function of their state"

React Native, eh?

Not a write-once-run-everywhere solution.
Facebook: "learn-once-write-everywhere".
Share the React paradigm, not necessarily the code
But it does run Javascript :D

React Native, eh?

Flexbox implementation for predictable layouts across platforms
Use native components at will
Does layout calculation off the main thread, main thread can focus on animation and rendering
Define styles per component, within JS

React Native, eh?

Like React; helpful warning/error messages in development
Debug app in Chrome dev tools (with React extension, too!) on your machine
..or even run the JS part on another machine
≈ 1 second compile time

Relay

A better way to do data fetching for complex applications.

Relay

How we usually do it now:

Server

...........................................................................

Relay

There are [at least] two problems with this way of doing it;

The server needs to know of the components data dependencies
The data dependencies of the child component leaks to the parent components

Relay

Facebook has a different approach

Declarative - data dependencies embedded in the component as GraphQL queries
Single, shared store of data
Query optimizing - no under fetching or over fetching

Relay

Facebook has a different approach

Efficient query batching
Updating components when its data changes

Relay

var FriendsInfo = React.createClass({
  statics: {
    user: function() {
      return graphql`
        User {
          name,
          mutual_friends { count }
        }
      `;
    }
  },
  
  render: function() {
    return (
      <div>
        <span>{this.props.user.name}</span>
        <span>{this.props.user.mutual_friends.count} mutual friends</span>
      </div>
    );
  }
});

GraphQL??

GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications.

GraphQL??

Exploring the graph from the root call
[Data] backend agnostic
Removes the need for hard coded compound endpoint in the APIs
The need for REST API endpoints is up for discussion, but in a lot of scenarios there's a use for both
Facebook is releasing a spec and a parser soon

Immutable.js

var immutable = require('immutable'),

var list1 = immutable.List.of(1, 2, 3);
var list2 = list1.push(4);

list1 === list2; // false

Immutable.js

var immutable = require('immutable'),

var map1 = immutable.Map({
    a: 1,
    b: 2,
    c: 3
});
var map2 = map1.set('c', 3);

assert(map1 === map2); // true

var map3 = map1.set('c', 50);

assert(map1 === map3); // false

Immutable.js

List
Map
Stack
Range
...

Immutable.js

With React, immutable data is awesome

PureRenderMixin + Immutable.js == Fast

(shouldComponentUpdate? Simple)

Immutable.js

Some things to note:

Shallow immutability
Converting to/from:
- _.pluck
- _.without
- other object/array-backed modules

Immutable.js

...is just one approach to immutability:

immutable.js
mori
seamless-immutable
mugs

High-performance Components

Purity (PureRenderMixin)
Data comparability (Immutable data)
Loose coupling (container components)
Children are expensive

FormatJS & react-intl

Simple internationalization and formatting

The Intl APIs are currently available on all modern browsers except Safari. It is not available on mobile browsers, older browsers, or Node.js. Polyfill for Intl exists and should be used for cases where Intl is missing.

[FormatJS] depends on the Intl APIs
Provides a friently interface for localization
Integrations with ReactJs, Handlebars and Dust
Re-uses the Intl instances (which are expensive)
Uses the ICU (International Components for Unicode) format for string messages
7.7kb (min + gz)
150+ languages

FormatJS & react-intl

Date and number formatting

<FormattedNumber value={1000} />

<FormattedDate value={Date.now()}
    month="long"
    day="numeric"
    year="numeric" />

<FormattedRelative value={this.props.date} />
# 3 hours ago

FormatJS & react-intl

String messages and pluralization

var msg = `{numComments, plural,
    one   { # comment }
    other { # comments }
}`;

<FormattedMessage message={msg} numComments={1} />
# 1 comment

<FormattedMessage message={msg} numComments={2} />
# 12,345 comments

Note: ES6 multiline strings for slide readability

IntlMixin

var App = React.createClass({
    mixins: [IntlMixin],

    render: function() {
        return <FormattedNumber value={this.props.price}
            style="currency"
            currency="USD" />
    }
});

React.render(
    <App locales="fr-FR" price={1999.95} />,
    document.getElementById('container')
);

# Renders:
1 999,95 $US

Hot loading

Webpack + React =

Awesome

Demo?

Abstract Syntax Tree

Parse code, inject/modify/extract
Diff-tree
Documentation generation
Dev-tools

Static typing and Flow

Introduces types into your JS and allows for type checking as part of the build procedure
Code transpiling

# sum.js
/* @flow */

function sum (a: number, b: number) {
    return a + b;
}

sum("1", 2);

$ flow
hello.js:7:5,7: string
This type is incompatible with
  [...]/sum.js:3:17,22: number

Static typing and Flow

In this example, flow detects that one of the values is not a number.

/* @flow */

function total(numbers: Array<number>) {
    var result = 0;
    
    for (var i = 0; i < numbers.length; i++) {
        result += numbers[i];
    }
    
    return result;
}

total([1, 2, 3, 'Hello']);

$ flow
arrays.js:11:17,23: string
This type is incompatible with
  /arrays.js:3:31,36: number

Netflix

Beyond the DOM

Netflix uses React.js for all their platforms (soon)
TVs does not use the DOM (slow) instead use native draw calls with a Canvas-like API
React makes this easy - prototype in 5 days

Channels

Coordinate actions without talking to the helpers
Similar to channels in Go an Clojure
Implement goroutine-like code on top of ES6 generators
Attempt at decoupling different parts of the application in an asynchronous way

Channels with js-csp

Four basic keywords:

CHAN

creates a channel

CHAN

puts a value

TAKE

takes a value

starts a process

Channels with js-csp

let { chan, go, take, put } = require('js-csp');
let ch = chan();

go(function*() {
    while(true) {
        console.log(yield take(ch));
    }
});

go(function*() {
    yield put(1);
    yield put(2);
    yield put(3);
});

// Output: 1 2 3

Channels with js-csp

Take/put is blocking by design, so when a value is put execution will wait for a take before continuing. Because of this, we know that when an event has gone through our system, the two parts are at the same state.

Our packagers use machine learning [...] we log CDN traffic and once a week we process the data and figure out what next weeks site is very likely to need based on that.

- Tom Occhino, ReactJS team @ Facebook

ES6 is being embraced by React