Eric Chernuka ericchernuka

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).

3 Gripes With React

I started using React 3.5 years ago, and I still love it. It was such a well-designed solution that not much has changed since then, only superficial stuff like naming. What I learned then is still wholly applicable today because it's such a good idea (although now you can choose from many other libraries). On top of that, we now benefit from an entirely new architecture (fiber) without changing much.

	/**
	* Fancy ID generator that creates 20-character string identifiers with the following properties:
	*
	* 1. They're based on timestamp so that they sort after any existing ids.
	* 2. They contain 72-bits of random data after the timestamp so that IDs won't collide with other clients' IDs.
	* 3. They sort lexicographically (so the timestamp is converted to characters that will sort properly).
	* 4. They're monotonically increasing. Even if you generate more than one in the same timestamp, the
	* latter ones will sort after the former ones. We do this by using the previous random bits
	* but "incrementing" them by 1 (only in the case of a timestamp collision).
	*/

	/**
	* Using Operator Mono in Atom
	*
	* 1. Open up Atom Preferences.
	* 2. Click the “Open Config Folder” button.
	* 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
	* 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
	* 5. Tweak away.
	*
	* Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):

	{
	"extends": "airbnb",
	"parser": "babel-eslint",
	"rules": {
	"array-bracket-spacing": [2, "always"],
	"comma-dangle": 0,
	"consistent-return": 1,
	"curly": [1, "multi-or-nest", "consistent"],
	"eqeqeq": [2, "smart"],
	"max-len": 1,

	const ToggleDisplayMatch = ({ component: Component, ...rest }) => (
	<Match {...rest}>
	{({ matched, ...props }) => (
	<div style={{ display: matched ? 'block' : 'none' }}>
	<Component {...props}/>
	</div>
	)}
	</Match>
	)

	import React from 'react'
	import Router from 'react-router/BrowserRouter'
	import Match from 'react-router/Match'
	import Link from 'react-router/Link'
	import Redirect from 'react-router/Redirect'

	function elementInViewport(el) {
	var top = el.offsetTop
	var left = el.offsetLeft
	var width = el.offsetWidth

	// component state
	class LedgerContainer extends React.Component {
	state = {
	debits: null,
	credits: null,
	creditsError: null,
	debitsError: null
	}

	componentDidMount() {

	import { connect } from 'react-redux';
	import { isFeatureEnabled } from './reducers'

	function EnabledFeature({ isEnabled, children }) {
	if (isEnabled) {
	return children;
	}

	return null;
	}

	import React, { PropTypes, Component } from 'react'
	import { getRef, listToArray } from '../utils/firebase'
	import { ErrorMessage, Loading } from '../Theme'

	/*

	```js
	<Ref path="/somewhere">
	{({ error, loaded, value }) => (
	// `value` is an object w/ keys