Rafa Yepes rafayepes

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

Common JS support
NPM support
a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

Async data loading in Flux

I've been working with Flux a lot recently, and one of the questions I've been struggling with is in which part of the Flux cycle to put my asynchronous data requests.

Here are some different opinions:

The diagram

The famous Flux diagram puts them in the action creators.

The chat example

Blog Posts

A mega FAQ about GraphQL/Relay:

https://gist.github.com/wincent/598fa75e22bdfa44cf47

A series of posts by Huey Petersen on GraphQL and ClojureScript:

http://hueypetersen.com/posts/2015/02/02/first-thoughts-on-graph-ql/ http://hueypetersen.com/posts/2015/02/08/modeling-queries-graph-ql-like/

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

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

	import fs from 'fs';
	import path, { resolve } from 'path';
	import assert from 'assert';
	import Module from 'module';
	import jsdom from 'jsdom';
	import Mocha from 'mocha';
	import chokidar from 'chokidar';

	// Let's import and globalize testing tools so
	// there's no need to require them in each test

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 0 };

	{
	"env": {
	"browser": true,
	"node": true,
	"es6": true
	},

	"plugins": ["react"],

	"ecmaFeatures": {

	var pureRender = (Component) => {
	Object.assign(Component.prototype, {
	shouldComponentUpdate (nextProps, nextState) {
	return !shallowEqual(this.props, nextProps) \|\|
	!shallowEqual(this.state, nextState);
	}
	});
	};

	module.exports = pureRender;