PatrickJS PatrickJS

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?

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

AWS Lambda@Edge Experiment

Requirements

AWS Lambda@Edge (enabled Preview)
One Amazon CloudFront Distribution (origin doesn't matter)
IAM role (basic execution is enough)
npm to install Node.js dependencies

How to setup AWS lambda function to talk to the internet and VPC

I'm going to walk you through the steps for setting up a AWS Lambda to talk to the internet and a VPC. Let's dive in.

So it might be really unintuitive at first but lambda functions have three states.

No VPC, where it can talk openly to the web, but can't talk to any of your AWS services.
VPC, the default setting where the lambda function can talk to your AWS services but can't talk to the web.
VPC with NAT, The best of both worlds, AWS services and web.

	function ScriptAsyncAttrSupportPlugin() {}

	module.exports = ScriptAsyncAttrSupportPlugin;

	ScriptAsyncAttrSupportPlugin.prototype.apply = function(compiler) {
	compiler.plugin('this-compilation', function(compilation) {
	compilation.mainTemplate.plugin('bootstrap', function(source) {
	return this.asString([
	source,
	'',

	function ScriptAsyncAttrSupportPlugin() {}

	module.exports = ScriptAsyncAttrSupportPlugin;

	ScriptAsyncAttrSupportPlugin.prototype.apply = function(compiler) {
	compiler.plugin('this-compilation', function(compilation) {
	compilation.mainTemplate.plugin('bootstrap', function(source) {
	return this.asString([
	source,
	'',

	// Something like this. I haven't tested this file
	@Injectable()
	export class ApiService {

	constructor(public _http: Http, public _cache: Cache) {

	}
	// whatever domain/feature method name
	getModel(url) {
	// you want to return the cache if there is a response in it. This would cache the first response so if your API isn't idempotent you probably want to remove the item from the cache after you use it. LRU of 1

	%YAML 1.2
	---
	# http://www.sublimetext.com/docs/3/syntax.html
	name: Angular 2
	file_extensions:
	- ts
	scope: source.ts
	contexts:
	main:
	- include: expression

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>index as a string</title>
	</head>
	<body>

	<app>
	Loading...

	--
	-- Some experiments with a Picture type based on an attribute-grammar
	-- model of Layout

	module FunPic where

	import Haven

	-- A type for representing the dimensions of a rectangle, as (width,height)
	type Dimension = (Double,Double)