Rick Wong RickWong

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

State of emergency in France

Sources

Loi n°55-385 from 1955
Wikipedia / Etat d'urgence en France (general structure)

Process

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

query
mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Simple implementation of debounced fetching in GraphQL to allow merging of multiple rest / database requests into one. Although this example uses GraphQL, the debouncedFetch / fetchProgramPlaycount implementations could probably be used in any context to achieve the same result.

This approach was first described by @leebyron at graphql/graphql-js#19 (comment)

For example this allows turning ten requests for playcounts from this GraphQL query into just one:

{
  latestPrograms(first: 10) {
    name,

playcount

	// Observable is an Union Type, with the following variants
	const Empty = () => ['EMPTY']
	const Cons = (head, tail) => ['CONS', head, tail]
	const Future = promise => ['FUTURE', promise]

	// race between 2 promises; each promise will resolve to a lazy value
	const lazyRace = (p1, p2) => Promise.race([p1,p2]).then(lazy => lazy())

	// function composition
	const compose = (...fns) => (arg) => fns.reduceRight((res, f) => f(res), arg)

	function awaitableVersionOf(nodeFunction) {
	return (...args) => new Promise((resolve, reject) => {
	nodeFunction(
	...args,
	(error, ...cbArgs) => error ? reject(error) : resolve(...cbArgs)
	);
	});
	}

	<!doctype html>
	<html>
	<head>
	<style type="text/css">
	body {
	margin: 0;
	}

	iframe {
	bottom: 0;

	// Have some complicated non-React widgets that manipulate DOM?
	// Do they manage a list of DOM elements? Here's how to wrap it
	// into a React component so you can "constantly rerender" it.

	// A dumb non-react widget that manually manage some DOM node that
	// represent a list of items
	function NonReactWidget(node) {
	this.node = node;
	}