april cyberglot

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

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

First and foremost, let's take a look at the following pieces of code. The first one is something you should be rather familiar with, and the second one is also a somewhat familiar idiom these days (at least in languages with higher-order functions):

// Example 1:
30 + 12

// Example 2:
xs.map(f)

The once-upon-a-time package aims to bring the approaches to generic programming and software correctness that's been in use for quite a while in major functional languages (monads, functors, etc.).

In this case, we want to have a better alternative to using Null, for when we may or may not have a value. Haskell and ML models this explicitly with a type they, respectively, call Maybe and Option — the same thing, really, just different names.

var Maybe = require('once-upon-a-time').monads.Maybe

Take the find function, for example. Find must take in a predicate (a function that takes an element of a collection, and returns whether the element passes the test or not), a collection of things, and return the first thing that passes the test. But we do need to define what the function will return if no element passes the test. Usually, people would use null, or undefined, but we can't use either in this case because the collection may contain null values, and we would never be sure whet

	#!/bin/bash


	# ------------------------------------------------------------------------------
	# \| System \|
	# ------------------------------------------------------------------------------

	# Navigation
	# -------------------

	#!/bin/bash

	#
	# General
	# ---------------------------------------------------

	# Create a data URI from a file
	datauri() {
	local mimeType=""

	// church numerals and lambda calculus in C++ using meta-template
	// programming, everything evaluated at compile-time. This code should
	// never be used in the real world. If I catch people using this for
	// real-world code just because it's awesome I will track said people
	// down and have a length discussion on why their existance is the
	// reason I need to question the ethics of writing this code in the
	// first place.

	// all code is licensed under MIT under one condition, never actually
	// use this code in real world programs, you can share it, and modify it

	/**
	* ReactJS: JavaScript like you've always done it.
	*
	* This example renders your top ten most followed friends/followers, `filter`ing
	* only your favorites, and putting a star on all verified accounts.
	*
	* With ReactJS, any time your data changes, the UI is always brought up to date
	* automatically. If friends length changes, or followCount - it always shows what
	* `render` describes.
	*/