Kerry Gallagher Kerry350

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

If you've reached this page, it's probably because your "parent-based and owner-based contexts differ".

As we've been iterating on React's "context" feature, we've discovered that the parent-based relationship is more useful than the owner-based relationship, so we're migrating to use a parent-based hierarchy.

In short, the owner of a component is whomever creates the component, while the parent of a component is whomever would be the containing ancestor in the DOM hierarchy. To learn more about the owner relationship, see the docs here: http://facebook.github.io/react/docs/multiple-components.html

In many cases, the owner and the parent are the same node, in which case, no further action is necessary.

This post is also on my blog, since Gist doesn't support @ notifications.

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

Use Ember CLI
In general, replace views + controllers with components
Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

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.

Sort object properties by value (values are text)

I have following object:

var cities={10:'Tashkent', 14:'Karakalpakiya', 16:'Andijan'};

I want sort it by city names, so after sort it should be:

var cities={16:'Andijan', 14:'Karakalpakiya', 10:'Tashkent'};

But I can't sort object properties, instead can convert object into array, then sort items.

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

	(function() {
	// Do not use this library. This is just a fun example to prove a
	// point.

	var Bloop = window.Bloop = {};

	var mountId = 0;
	function newMountId() {
	return mountId++;
	}

	# app/assets/javascripts/ember-app/templates/partials/_header.js.coffee
	%nav.navbar.navbar-default.navbar-fixed-top
	.container
	.navbar-header
	%btn.navbar-toggle{ data: { target: '.navbar-collapse', toggle: 'collapse' }, type: 'button' }
	%span.sr-only Toggle Navigation
	%span.icon-bar
	%span.icon-bar
	%span.icon-bar
	= hb 'link-to "index" class="navbar-brand"' do

	'''
	sort_zset_cols.py
	Copyright 2013 Josiah Carlson
	Released into the public domain.
	'''


	'''
	Let's imagine that there are 3 restaurants with price, score, distance info
	being: