Alex Khrustalev tokenvolt

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

Note

I would recommend @acdlite's redux-actions over the methods suggested in this Gist.

The methods below can break hot-reloading and don't support Promise-based actions.

Even though 'redux-actions' still uses constants, I've come to terms with the fact that constants can be good, especially in bigger projects. You can reduce boilerplate in different places, as described in the redux docs here: http://gaearon.github.io/redux/docs/recipes/ReducingBoilerplate.html

Converting a Word Document to Markdown in One Move

The Problem

A lot of important government documents are created and saved in Microsoft Word (*.docx). But Microsoft Word is a proprietary format, and it's not really useful for presenting documents on the web. So, I wanted to find a way to convert a .docx file into markdown.

Installing Pandoc

On a mac you can use homebrew by running the command brew install pandoc.

The Solution

Hang on, I'm not saying flux is dead, or that redux isn't amazing.

Okay ...

Most everybody is familiar with flux by now:

User Interaction --event data-->
  Action Creator --action-->
 Dispatcher --payload--&gt;

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

Thought experiment: Redux-like stateless server

Description

We describe a model for client-server processing where the Redux model is used to minimize stateful code. This should allow live-reloading server code, and make it possible to share code (e.g. optimistic updating) between client and server.

Dramatis Personae

Assume a server consisting of multiple worker processes that do not share memory and may be running on multiple hosts.
- Workers have middleware, root reducers and an app state object
Workers can be dynamically added and removed

	'use strict';

	module.exports = function CustomError(message, extra) {
	Error.captureStackTrace(this, this.constructor);
	this.name = this.constructor.name;
	this.message = message;
	this.extra = extra;
	};

	require('util').inherits(module.exports, Error);

	// takes a {} object and returns a FormData object
	var objectToFormData = function(obj, form, namespace) {

	var fd = form \|\| new FormData();
	var formKey;

	for(var property in obj) {
	if(obj.hasOwnProperty(property)) {

	if(namespace) {

	defmodule Phlink.Form do
	use Ecto.Schema
	import Ecto.Changeset

	@primary_key false
	schema "non_db_form.user" do
	field :name, :string
	field :thing, :string
	end
	@required_fields ~w(name)

	var Col = require('react-bootstrap/lib/Col')
	var PageHeader = require('react-bootstrap/lib/PageHeader')
	var React = require('react')
	var Row = require('react-bootstrap/lib/Row')
	var {connect} = require('react-redux')
	var {reduxForm} = require('redux-form')

	var DateInput = require('./DateInput')
	var FormField = require('./FormField')
	var LoadingButton = require('./LoadingButton')