C. T. Lin chentsulin

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

Reactjs conf 2015 Notes

react native announced
- Allows you to use react style javascript to target native ios and android, native views, live reloading
- intro pt1
- intro pt2
- facebook groups app uses react native with graphql and relay
realtime page tweaking
- rethink best practices and workflows
inmutability is a good idea

ubuntu 14.04

sysv-rc-conf (service control tool)

sudo apt-get install -y sysv-rc-conf

nginx

sudo add-apt-repository -y ppa:nginx/stable

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

from streams session

end-of-stream - specify a callback to be called when a stream ends (which is surpsingly hard to get right)
duplexify - compose a Duplex stream from a Readable and a Writable stream
pump - pipe streams together and close all of them if one of them closes
pumpify - combine an array of streams into a single duplex stream using pump and duplexify
through2 - tools for making Transform streams
from2 - tools for making Readable streams

from "participatory modules" session

	<div><a href="http://jsforcats.com/">JS for cats</a></div>
	<div><a href="https://github.com/maxogden/art-of-node#the-art-of-node">Art of Node</a></div>
	<div><a href="http://github.com/substack/node-browserify"><img src="talk/browserify.png"></a></div>
	<div>javascript should run everywhere</div>
	<div><img src="talk/require.png"></div>
	<div><img src="talk/venn.png"></div>
	<div>browserify + npm = ♥</div>
	<div>npm = client side + server side modules in one registry</div>
	<div><a href="http://github.com/substack/browserify-handbook">browserify-handbook</a></div>
	<div><a href="http://npmjs.org/browserify-adventure">browserify-adventure</a></div>

	# 內容

	# repo 位置
	- https://github.com/facebook/react
	- https://github.com/facebook/flux

	# 官網

	- React
	* http://facebook.github.io/react/

	// Simple wrapper to use bootstrap's grid system to position elements side-by-side
	var VerticalFieldsElement = React.createClass({
	render: function() {
	return dom.div(
	{ className: 'clearfix' },
	React.Children.map(this.props.children, function(child) {
	if(!child) {
	return child;
	}

	// Written by @iclanzan
	// All credit goes to him!

	// You create the reducer like this:
	// var reducer = createTimelineReducer('someName', someReducer, ['foo', 'bar']);
	// And then whenever an action of type `foo` or `bar` happens it calls `someReducer` and adds the result to the timeline.
	// Then to undo/redo you trigger an action of type `someNameUndo`/`someNameRedo`.

	var defaults = require('lodash/object/defaults');
	var capitalize = require('lodash/string/capitalize');

	// give it a name so it reuses the same window
	var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");

	// reload in case it's reusing the same window with the old content
	win.location.reload();

	// wait a little bit for it to reload, then render
	setTimeout(function() {
	React.render(
	<DebugPanel top right bottom left >