Jonathan Kim jkimbo

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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

React-Core Meeting Notes 2015-03-20

Note: This is the first time we're sharing meeting notes publicly. The primary reason we haven't shared these is because we often mix public discussions with matters that are Facebook specific and should not be public. We're really trying to be more open about our development process and what's happening inside the project so moving forward, we'll be sharing meeting notes. While most of us do work at Facebook, we're committed to this being an open project - for now we'll filter out the private notes from the public notes. Hopefully we can make it possible for these meetings to be open to any who wish to attend.

Attendees:

@zpao
@sebmarkbage
@spicyj
@jeffmo

The idea of these steps is that they can be implemented progressively and add value at each step.

Your current approach is to talk to REST APIs from your client-side code
Build your GraphQL server
Instead of making multiple REST requests for a page load, make a single GraphQL query
Develop a means of composing GraphQL queries out of fragments. There are a few existing solutions for this, but they're not particularly polished

At this point you have a pretty nice solution for fetching data, but no strategy for caching or semantics surrounding that data. There's also questions surrounding how to minimise data fetching on navigation using client-side routing.

Client-side routing optimisation is potentially straightforward (if you're good at working with trees), but might become impractical depending on how other problems are solved. The basic idea is that you build the query for the current and next routes, convert them to ASTs (this is easy using graphql-js) and create a diff query that only as

	{
	"ecmaFeatures": {
	"arrowFunctions": true,
	"binaryLiterals": false,
	"blockBindings": true,
	"classes": true,
	"defaultParams": true,
	"destructuring": true,
	"forOf": false,
	"generators": true,

	from __future__ import unicode_literals
	from collections import defaultdict
	import random
	import requests
	from graphviz import Digraph

	USERNAME = 'shauns'

	PASSWORD = '****'

	<Respond to="min-width">
	<At default>Mobile</At>
	<At value="480px">
	Tablet and larger
	<Respond to="orientation">
	<At value="portrait">Portrait</At>
	<At value="landscape">Landscape</At>
	</Respond>
	</At>
	</Respond>

	import React from 'react';
	import omit from 'object.omit';

	import ResponsiveImage from './ResponsiveImage';


	class SlideshowImage extends React.Compoent {
	static propTypes = {
	slide: React.PropTypes.shape(omit(ResponsiveImage.propTypes, 'defaultWidth')),
	opacity: React.PropTypes.number,

	import React from 'react';
	import cx from 'classnames';

	import styles from './Button.css';


	const Button = ({modifier="default", size="medium", href, children, ...props}) => {
	const classes = cx([styles.root, styles[`variant-${modifier}`], styles[`size-${size}`]]);

	return href ?

	$ rm -rf node_modules
	$ time npm install
	>> 119.76

	$ time npm install
	>> 19.68

	$ du -sh node_modules
	>> 259M