For example, instrumentation, component catalog, documentation generation

Log all props changes

Create a ComponentWrapper that wraps each component

Uses componentWillReceiveProps to see when pros are received, emits change events

Rewrite all React.createElement calls to create a ComponentWrapper that wraps the actual element

Use esprima to generate an AST

Use escodegen to generate source from the AST

Many libraries, see github.com/estools

esprima's AST is just a bunch of JS object literals, can roll your own

http://felix-kling.de/esprima_ast_explorer/ for visualizing the esprima AST

Source → source filter

Can also add additional resources to the generated output

Tight coupling between server and views for data loading needs

Parents need to know what kind of data the child components will need (more coupling)

Child components did not have a mechanism for indicating what kind of data it needs (ideally statically)

Complex shapes

Composable (so that parents can bundle up the specifications of their children)

GraphQL: query language for defining data requirements

Very granular, can request specific fields

Can represent one-to-many relationships

Not React-specific, also used on iOS

Add queries to statics

Use ES6 template stricts to embed GraphQL queries within component

Can reference queries from other components, so that we can compose

Generic/central store for storing all GraphQL response data

Framework that uses GraphQL in React

Can embed parameters in queries (e.g. for pagination)

Relay will cache data (if querying 15 items and 10 were previously fetched, only 5 will be fetched)

Query validation

Use queries to determine what components need to be updated when data changes

Framework handles optimistic updates, error handling, out of order 

Optimistic updates are maintained in a separate queue, overlaid on top of normal data. On error, remove from the overlay and re-notify all the components.

Also works with React Native

Want to open source, not doing it yet

Isaac Salier-Hellendag working on a reusable React component for doing text input with mentions, etc. The Facebook Groups app uses it.

But you may only want this for individual panes, use platform-specific containers to get a navigation stack

Not feasible with ES6 class syntax

But you can just use subclass when using ES6, so ModelObjectListener and the like could be done as base classes

React.createClass will be staying around indefinitely, Facebook uses mixins internally heavily too

New model for refs (with lambda functions to stash a reference) has landed in master, will be in the 0.13 release

Relay open sourcing will happen eventually

There's already syntactic sugar for queries (via GraphQL), conceivably could do the same for CSS

Uses JavaScriptCore (build their own from source)

Faster than V8, they can use all of the JIT layer, including the FTL

Uses JavaScriptCore

No JIT-ing

Experimented with JS code generation to avoid function call overhead

Tried using WKWebView, too many limitations, talking to Apple about them

Jordan Walke (React creator, currently working on React Native)

Paul O’Shannessy (React maintainer)

Exploration of channels (communicating sequential processes) within React

Go-style channels

chan (create)

https://github.com/ubolonton/js-csp is a library for implementing channels in JS (using generators)

Firefox Dev Tools add-on to visualize data passing between channels

Unlike promises, channels are long-lived, can track values over time more easily

“Promise channels” can implement promise-like behavior (repeated takes will return the same value)

Closing channels

Can compose with transducers (filtering and mapping of values)

Can use closure to store state (previous mouse position), instead of embedding into the component

For an event handler that depends on previous state

start goroutine, take from either cancel channel or a 500ms timeout

if we took from the cancel channel, do nothing

otherwise show the tooltip

take from the cancel chanel (effectively blocks until mouseout)

hide the tooltip

put on cancel channel

History of the project

etc.

Not necessarily tied to URL nesting

Wrapping (logged out vs. logged in views)

Way to intercept moving from one route to another, and redirect/retry

For example, for preserving the continue URL while requiring authentication

Example: https://github.com/rackt/react-router/tree/master/examples/auth-flow

This uses global state (Login.attemptedTransition), unclear if it can be avoided (pass attempted transition to the Login as a prop?)

Can also use to implement onbeforeunload-type prompts (https://github.com/rackt/react-router/tree/master/examples/transitions)

Had problems

Constraint solver is not deterministic

Ended up writing raw CSS instead

Recap  of Flux architecture

Given initial state and events/actions that followed, can answer questions

Use message queue to serve the role of the dispatcher (for durability, sharing, etc.)

Actions are put in the message queue

Stores get actions from message queue, process them, update their state

Can rebuild and migrate by replaying message queue

Subscribe to changes in stores, generate client-side actions

Communication/dependencies between stores (no waitFor equivalent)

Strong consistency

Generate action after store is done processing action

Danger of loops

Need a direct-acyclic-graph (DAG) to avoid loops

Follow-on reading: https://thestrangeloop.com/sessions/turning-the-database-inside-out-with-apache-samza

Frozen row/column headers

Resizable columns

Dynamic row heights

Very large datasets

Pure rendering

Pairs well with immutable data structures

Need to pass data down through many levels

children are on the props object, array is re-created will, nullify PureRenderMixin

Can override shouldComponentUpdate to hardcode return false when it's guaranteed that nothing about the component will change (e.g. for layout primitives)

Separate data fetching (container) vs. rendering (passed in data as props). Containers don't have children, their render method just returns the rendering 

Intl.NumberFormat, Intl.DateTimeFormat, Intl.Collator

github.com/andyearnshaw/Intl.js is a polyfill

ICU has a message syntax that has standard representations of placeholders, pluralization, etc.

https://github.com/yahoo/react-intl is Yahoo's implementation for ICU-style localized strings

Has a mixin that makes it easy to pass down locale and other state (uses context)

http://formatjs.io/ is a lower-level library that the React library builds on top of

CLDR data is used to provide per-locale conventions (separator style, etc.)

Demos

Fast-updating data grid

Automatically transitions elements between old/new positions

e.g. for re-sorting a buddy list based on presence state

monkey-patches React.createElement to add warning about non-acessible code

return null in render()

Add your own DOM nodes in componentDidMount instead.

Or you can use React.render to render an alternate component somewhere else in the DOM

e.g. each month is a different route, have graphs that animate when the value for the month changes

Rely on fact that React reuses DOM nodes, just add CSS transitions

Including form submission

Touch handling

Native components

Style & Layout

<View> React component backed by RKVUIView native view

Props get mapped to UIView properties

Only the updating of UIView properties on the main thread, everything else is in the JS background thread

Can use Chrome Dev Tools (or the Safari one)

JavaScript can run on a separate device, communicates with the native container via Web Socket (could also server-side render components)

This is how the Dev Tools works, the JS runs in Chrome, thus you can use all of the tools, including the React Dev Tools

Live-reloading/watching of source changes

Red Screen of Death on JS exceptions, style pars errors, etc.

Not CSS

Inline styles, based on object literals embedded in the component

Recap of this presentation

For layout, existing iOS native approaches are either lots of math (manual layout) or math with syntactic sugar (auto-layout, especially when done via code)

iOS Auto-layout also cannot express some behaviors, like line breaks

CSS box model is good, but traditional positioning is painful

Flexbox is a much cleaner model

Compare computed layout with results of using Flexbox in the browser vs. the library

Using fuzzing to generate test cases for all supported properties

Text measurement is input to the layout algorithm, that needs to be done natively

So also transpiled it to Objective C and Java

Use ES6 string template literals to make it easy to embed CSS properties like rgba color values (including variables)

Recap of Web Components

Pre-0.12 Couldn't use custom elements with React.render is because React didn't know it (it has a whitelist of DOM tag names)

After 0.12 all lower-cased or dashed tag names are treated as HTML

Can therefore use Web Components as leaf nodes in React render trees

Can't use React event handlers for custom events on components, will need to manually add listener in componentDidMount and unlisten in componentWillUnmount

If the component has side effects (e.g. <google-map> adds a <script> tag to the document), it'll have problems

Could theoretically use React within a web component, but that would make the component too heavy-weight

Structural sharing: share as much as possible when making a new copy

Data structures need to be representable as DAGs

When modifying a node, can reuse children and nodes that are not on the path from the root to the node

Model arrays and key-value pairs as (index) tries

http://en.wikipedia.org/wiki/Hash_array_mapped_trie and http://hypirion.com/musings/understanding-persistent-vector-pt-1

For key-value pairs need to implement a hash function for the key

Constant factor slower, performance benefits are for doing from O(N) → O(log N)

Concurrency (lock-free), though not relevant to JS

Object.observe has problems (no batching, only observes immediate children, not more deeply nested elements)

dirty bits require you to couple UI framework with data model (to know when dirty fields can be cleared)

Memoization becomes easy (use reference comparison)

shouldComponentUpdate can use reference comparisons between old and new props (PureRenderMixin).

Flux: use immutable data structures (e.g. OrderedMap instead of object literals)

Run on many devices

A/B testing (without app-store resubmission)

Three JS UIs (mobile, web, TV)

2010-2012: Embedded WebKit

DOM was too slow for low-end devices

New platform (Gibbon): JavaScriptCore and custom widget model

Absolute positioning only, one node type (widget), 25 style properties, async (bridge) API, explicit styles only

Can render to <canvas> (used for developing)

Mobile and web did React rewrites within the past year

Needed access to internals, small fork initially (~67 lines)

Make Gibbon widgets look like a DOM element

After diffing, React emits HTML strings, needed to override this to emit list of JSON changes

ReactDOMComponent, ReactDOMOperation, createMarkupFromProperty

Switched instead to “spooning” React (using internal clases)

Similar approaches: react-art, react-pixi, react-three

With 0.13 components got lighter-weight, easier to create custom ones

Visualization libraries handle both structuring of data for visualization (generating visual elements like graphs) and the rendering

Sample data set: Bitcoin transactions (21GB of data, 45 million transactions sequentially arranged)

Large data grid (one row per transaction, scrollable to arbitrary index)

Ran into browser limitations, could not have scrollable element of arbitrary height

Uses stateful server (since their product is single-user)

Can stream intermediate results to the client, but not too often, to not overwhelm the client

d3.js maps well to React: mostly pure functions and objects (except for selection and transitions, which expect to own the DOM)

Unfamiliar != Complex

Big != Complex

Mutability should be an implementation detail (in Backbone, Angular, ember, mutability is the default)

Immutable app state

Async rendering via requestAnimationFrame (mutations are batched)

Jump to any point in time with respect to application state

Modularity (due to lack of setState)

Feed current app state into root component

Changes to app state result in new instance, re-render everything

How to avoid passing down app state to all components in the tree (to avoid components reading app state they don't normally have access to)

“Cursor” used to provide a “windowed” piece of the app state to components (but still have reference to the app state, to update it)

“reference cursor” or “observable cursor”

Allows component to get a reference to a piece of the app state without getting it from props

First do normal rendering (top-down, based on app state/props)

Then do a second pass over all components that have a old of an observable cursor

If the value has changed (can still do reference comparisons here?) then do a forceUpdate on them

Example: why should the contents that are shown in a tab view be passed down as props to the parent?

Second pass over all components would benefit from having the component tree be available as a data structure to React clients

Relay solves problems for big applications and teams

Data fetching within stores (106 stores total, ~64 stores that fetch data)

Data fetching triggered by store getters

Data fetches depend on existing data (e.g. for objects since the last fetch), so it needs data from the store

Two stores can respond to one action, both emit changes, controllers that listens to both would update twice

De-bounce calls based on dispatch loop

Normalize stores so that data is only stored in one (in an email client, have a Thread store and a Message store, even if a server request returns both threads and messages within them)

Dehydrate stores to serialize data that was fetched on the server and then use it to reuse it on the client

Two-pass rendering, first with loaded data from the server, second with client-side state, so that checksums match and no re-rendering is needed for server-rendered markup

SoundCloud uses Scala on top of Java 8

Using Browserify (to abstract away browser vs. server environment) can generate bundle of JS that can run inside of Nashorn (JS implementation on top of the JVM) to do server-side rendering

Migrating from Backbone

Wrapped Backbone models and collections in stores, to centralize loading

If you merge in optimistic update into object, then you lose state (and need an undo function)

Instead: separate map/overlay of optimistic updates, can remove on failure (and notify all listeners)

Component communication default strategy: callbacks everywhere (didn't consider Flux)

Passing state changes to other parts of the tree

Communication targets change all the time

Broadcasts notify adapters of something that changed

Adapter calls setState on components

Instance per major/top-level component

Server updates also notify adapters

There is a TypeScript fork that understands JSX, but it's a version behind

Wrap JSX in ES6 string literals, pre-process to turn into React.createElement calls (unclear why normal JSX compilation can't be done)

Need to teach TypeScript about CommonJS modules

Need to add definition files for what require('React') loads

Use ES6 class syntax to teach TypeScript that components are classes, so that it understands what this refers to, etc.

.flowconfig file with includes, etc.

Flow requires annotations at module boundaries (e.g. for render() return values)

Need to strip types as part of JSX compilation

React in web workers: Currently React only one side, planning on React on the worker side too

iOS components is a React-like system that Facebook developed for the newsfeed (separate from React Native)

Simple mode: determine what data needs to be fetched, fetch it, give it as part of the HTML response

Complex mode: simple + server-side rendering

Slower, due to auto-binding, initialization of state, other things that are not needed since it will be thrown away

Warning in 0.13 if using parent vs. owner

Changes in reconciliation algorithm (shouldComponentUpdate, etc.)

Concept not going away

Origins in XHP (opaque data passed through templates, used to render profiles as other users by scoping some parts of the UI hierarchy to a different user)

Focus and selection are global states

Not meant to save you typing

Wrap vs. re-implement

E.g. tab bar in Facebook app is a re-implementation of UITabBar (for more flexibility)

Certain views only exist on one platform, re-implementation allows you to have a gradual migration path when porting to Android

Pulled out of ES 6, On the table for ES 7

Add subscriptions to events/stores as first-class concept, to remove need for mixins for a lot of use-cases

Machine learning to learn what packages need to be bundled together based on CDN requests

Also watch commit activity (e.g. packages that never change can be in the core/prelude package)

Optimizations for browser caches never affected metrics (hitting cold caches majority of time)

In Relay can mark queries as deferred, so that they're not pre-fetched

RocksDB used for caching Relay data (in React Native)