Young littlehaker

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

Attention

This post described how to create an application with mithril 0.2.x. Now that ver 1.0 is out, some things are a little differnent.

The example is updated with the current version of mithril, though.

Isomorphic applications with mithril

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

mathclub是最近做的一个个人项目，帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有：计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设，的确项目本身并不出奇，开发上选用的一些方案或许更有意思。

整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下：

技术选型上服务端是Node.js，应用框架选了老牌的Express（4.x变化挺大不少中间件都废了），数据服务用的是MongoLab（MongoDB的云服务平台），图片上传用的是又拍云，程序部署在Nodejitsu上。模板引擎没选主流的Jade或ejs，而是用Express React Views它实现了在服务端渲染React组件。前端框架是用React，这次有意想追求前后端全部组件化的组织。之前是用Webpack实现CommonJS模块打包，这次用Browserify配置更简单，它有丰富的transform很赞，其中的reactify转换React的JSX很完美。CSS用Sass＋autoprefixer让人省心。将这一切串起来的自动构建工具是Gulp。我其实崇尚用最精简的工具组合开发，上述组合在我看来比较精简了。（帖纸留念）

![image](http://satexam.b0.upaiyu

	import m from 'mithril'

	const rendered = []
	const tick = ( window.setImmediate \|\| window.setTimeout ).bind( window, Function.prototype, 0 )

	const process = () => {
	const couldunmounts = []
	const couldpostunmounts = []

	rendered.forEach( ( [ el, { ctrl, unmount, postunmount } ] ) => {

	var m = require( 'mithril' );

	var bidi = {
	m : ( function(){
	function patch(){
	var node = m.apply( undefined, [].slice.call( arguments );

	if( node.attrs.bidi ){
	node = bidi.view( undefined, node.attrs.bidi, node );

	var bidi = {
	view : function( ctrl, prop, node ){
	var type = node.tag === 'select'
	? node.attrs.multi
	? 'multi'
	: 'select'
	: node.attrs.type;

	// Setup: bind listeners
	if( type === 'multi' ){

	'use strict';

	var m = require('mithril');
	var extend = require('lodash').extend;
	var setFocus = require('../util/viewhelper').setFocus;
	var keymage = require('keymage');

	function noop(){}

	function addClass(el, className) {

	var animating = false;

	// Define an animator consisting of optional incoming and outgoing animations.
	// alwaysAnimate is false unless specified as true: false means an incoming animation will only trigger if an outgoing animation is also in progress.
	// forcing dontClone to true means the outward animation will use the original element rather than a clone. This could improve performance by recycling elements, but can lead to trouble: clones have the advantage of being stripped of all event listeners.
	function animator( incoming, outgoing, alwaysAnimate, dontClone ){
	// The resulting animator can be applied to any number of components
	return function animate( x, y, z ){
	var config;
	var parent;

	;; Create a new project with
	;; lein new liberagent reagent-complex-gui-example
	;; and replace main.cljs with this file

	(ns reagent-complex-gui-example.main
	(:require-macros [cljs.core.async.macros :refer (go)])
	(:require
	[reagent.core :as reagent :refer [atom]]
	[sablono.core :as html :refer-macros [html]]
	[cljs-http.client :as http]