Pokai Chang zetavg

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?

	/**
	* Execute this function on a CSS spicificaiton page to get TaskPaper tasks.
	*/
	function generateTaskPaperFromTOC() {
	function getDataFromLi(li) {
	const children = Array.from(li.children)
	const a = children.find(node => node.tagName === 'A')
	const data = {
	title: Array.from(a.children).map(node => node.innerText).join(' '),
	url: a.href,

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Example",
	"type": "node",
	"request": "launch",
	"runtimeExecutable": "node",
	"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],

	// @flow

	declare module 'react-relay' {
	declare export type RecordState = 'EXISTENT' \| 'NONEXISTENT' \| 'UNKNOWN';

	declare export type onCompleted = (response: ?Object, errors: ?Array<PayloadError>) => void
	declare export type onError = (error: Error) => void

	declare export type CommitOptions = {
	onCompleted: onCompleted,

	#!/bin/bash

	/usr/bin/expect -c '
	set timeout -1;
	spawn '"${ANDROID_HOME}"'/tools/bin/sdkmanager --licenses;
	expect {
	"y/N" { exp_send "y\r" ; exp_continue }
	eof
	}
	'

	source 'https://rubygems.org'
	gem "graphql", github: "rmosolgo/graphql-ruby", branch: "subscriptions"
	gem "sinatra"
	gem "thin"

	{
	"parser": "babel-eslint",
	"plugins": [
	"react",
	"react-native"
	],
	"parserOptions": {
	"ecmaFeatures": {
	"jsx": true,
	"modules": true

	!function () {
	var global = this;
	var old_eval = global.eval;
	var old_const = global.Function.prototype.constructor;
	global.Function.prototype.constructor = function (code) {
	console.log('Function Constructor: ' + code);
	return old_const(code);
	};
	global.eval = function (code) {
	console.log('EVIL: ' + code);

	{
	"vars": {
	"@gray-base": "#242739",
	"@gray-darker": "#242739",
	"@gray-dark": "#242739",
	"@gray": "lighten(@gray-base, 33.5%)",
	"@gray-light": "lighten(@gray-base, 46.7%)",
	"@gray-lighter": "lighten(@gray-base, 93.5%)",
	"@brand-primary": "#70DD38",
	"@brand-success": "#26CF5F",