Rick Wong RickWong

Data fetching for Este with react-transmit

1) Without server rendering

Read the DOCS.

This is easy and straightforward. All you need is to add react-transmit into dependencies (npm install --save react-transmit). Transmit works as a Higher-order component so instead of

export default class Dashboard extends PureComponent {
 // ...

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

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

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.

	// UPD:
	// Now available as npm module!
	// Check out https://github.com/RReverser/better-log for details.

	console.log = (function (log, inspect) {
	return function () {
	return log.apply(this, Array.prototype.map.call(arguments, function (arg) {
	return inspect(arg, { depth: 1, colors: true });
	}));
	};

	// <script src="angular.min.js"></script>

	(function(name, factory) {
	// our basic IO module system that stores every module on modules with the "file" namespace
	// please use something like browserify rather than rolling your own like this
	window.modules = window.modules \|\| {};
	window.require = window.require \|\| function require(name) { return window.modules[name] \|\| window[name]; };
	var exports = {}; factory(exports, window.require);
	window.modules[name] = exports;
	}('TodoService', function(exports, require) {

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 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;
	}

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

	iframe {
	bottom: 0;

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