acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

acdlite

/**
 * Basic proof of concept.
 * - Hot reloadable
 * - Stateless stores
 * - Stores and action creators interoperable with Redux.
 */

import React, { Component } from 'react';

export default function dispatch(store, atom, action) {

acdlite

function prefetch(getKey, getValue, getInitialValue, propName) {
  const inFlight = new Set();
  const cache = new Map();
  return ChildComponent => {
    return class extends React.Component {
      state = {value: getInitialValue(this.props)};
      componentWillReceiveProps(nextProps) {
        const key = getKey(nextProps);
        if (cache.has(key)) {
          // Use cached value

acdlite

function pureRenderMixin(Component) {
  Component.prototype.shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) ||
           !shallowEqual(this.state, nextState);
  }
  
  return Component;
}

class MyComponent extends React.Component {}

acdlite

const history = createHistory();
const router = createReactRouter(routes);

history.listen((location => {
  router.match(location, (err, state, redirectInfo) => {
    // Integrate with external state library (Redux), or render directly
    React.render(
      <RouterComponent {...state} />;
    );
  });

acdlite

// The `loader` prop is a Dataloader instance
// https://github.com/facebook/dataloader
class Dataloader extends React.Component {
  state = {data: null, isLoaded: false};
  componentWillMount() {
    this.prefetchData(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.id !== nextProps.id || this.props.loader !== nextProps.loader) {
      this.setState({isLoaded: false});

acdlite

#!/bin/bash

# Based on http://asisolve.com/ffmpeg-encoding-settings-for-web-video/

for f in src/*.mov
do
  name=$(basename $f .mov)

  # Convert to mp4
  ffmpeg -i $f -vcodec libx264 -preset slow -profile main -crf 25 -acodec libfdk_aac -ab 64k dist/$name.mp4

acdlite

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$_grids: ();

@mixin add-grid($g, $name) {
  $_grids: map-merge($_grids, ($name: $g));
}

acdlite

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$grid: (
  small:                  90%  8 1/4,
  medium:                 80%  8 1/4,
  large:                  80% 12 1/4,
);