Outsider outsideris

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Effective transpiling of ES6

After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.

I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.

The main tool

When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on:

@mafintosh asks: "Does anyone have a good code example of when to use setImmediate instead of nextTick?"

https://twitter.com/mafintosh/status/624590818125352960

The answer is "generally anywhere outside of core".

process.nextTick is barely asynchronous. Flow-wise it is asynchronous, but it will trigger before any other asynchronous events can (timers, io, etc.) and thus can starve the event loop.

In this script I show a starved event loop where I just synchronously block, use nextTick and setImmediate

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

Document moved to: https://github.com/servo/servo/blob/master/HACKING_QUICKSTART.md

	.landing header .top-social {
	margin-top: 10px;
	margin-right: 0;
	width: 320px;
	}

	.landing header .fb-like-wrap, .landing header .tw-like-wrap, .landing header .gp-like-wrap {
	/* display: inline-block; */
	float: left;
	}

	{
	"cssconf": {
	"location": {
	"date": "September 12, 2014",
	"country": "Germany",
	"city": "Berlin",
	"venue": "Radialsystem V",
	"lat": 52.51039,
	"long": 13.42864
	},

	var fs = require('fs');

	var infile = process.argv[2];

	if (!infile) return console.log("need infile");

	var data = fs.readFileSync(infile, 'utf8').split('\n');
	var outlines = [];

	data.forEach(function(item) {

	#!/bin/sh
	#
	# Github won't permit files larger than 100MB (https://help.github.com/articles/working-with-large-files);
	# don't wait to realize this until you try to push a bunch of commits.

	git diff --cached --name-only \|
	while read file
	do
	if [ $(du -m $file \|cut -f 1) -ge 100 ]
	then

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {