Pete Hunt petehunt

## gist:f590b37541e43c760c94
var bluebird = require('bluebird');
var request = require('request');
bluebird.promisifyAll(request);
bluebird.longStackTraces();

var helper = bluebird.coroutine(function*() {
  yield request.getAsync('http://google.com/');
  throw new Error('something unexpected happened');
});

## gist:4e8ec9fe13aacaf5a30b
var co = require('co');
var thunkify = require('thunkify');
var request = require('request');
var get = thunkify(request.get);

function *helper() {
  yield get('http://google.com/');
  throw new Error('something unexpected happened');
}

## gist:8595248

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                petehunt
                / gist:8595248
            
            
              Created
              January 24, 2014 10:43
            
          
    It looks like ReactDefaultPerf found some places you could add shouldComponentUpdate(). Great!
Keep in mind that just because there are lots of items in the table does not mean you need to add lots of shouldComponentUpdate() methods. Instead, simply try adding one to the highest-ranked component in the table and re-running the perf test. Often you'll see that it takes care of the other components on the list automatically for you.
For more information about shouldComponentUpdate() see http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

  
## gist:8396968
macro := {
  rule infix { $obj $([ $key ] ...) | $rval:expr } => {
    $obj = mori.assoc_in($obj, [$key (,) ...].reverse(), $rval)
  }
}

macro hash_map {
  rule {{ $($key : $value) (,) ... }} => {
    mori.hash_map($($key, $value) (,) ...)
  }

## gist:8378115
function ObservableProperty(obj, key) {
  this.obj = obj;
  this.key = key;
}

ObservableProperty.prototype.get = function() {
  return this.obj.get(this.key);
};

ObservableProperty.prototype.addObserver = function(target, method) {

## gist:7979935
    var graph = new MoriModel();

    expect(graph.getNode('mykey')).toBe(null);
    graph.addNode('mykey', mori.hash_map('name', 'myvalue'));
    expect(
      mori.equals(graph.getNode('mykey'), mori.hash_map('name', 'myvalue'))
    ).toBe(true);

    graph.addNode('mykey2', mori.hash_map('name', 'myvalue2'));
    graph.addEdge('friends', 'mykey', 'mykey2');

## React sortable

<html>
  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://fb.me/react-0.5.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
  </head>

## ReactDefaultBatchingStrategy.js
/**
 * Copyright 2013 Facebook, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software

## gist:7618353
First of all, I have an experimental branch with React that lets you use compile CSS animations just-in-time with our reconciliation system and use those instead of pure JS. So I recognize that they should be supported.

In my experience CSS transitions and animations work fine for things that will always animate fully and will never have the animation changed. A good example is a fade out when deleting a list item.

I've just found that in my own work most animations are tied with direct user touch manipulation (like animating out the left nav w/ parallax and opacity) which requires frame-by-frame responsiveness to touch events and inertia calculations based on the user's touch velocity. It's impossible to do this without doing frame-by-frame.

Your skepticism is definitely warranted and I complain to browser vendors whenever I see them about this. In my experience, modern (1 year old) phones can do this with minimal jank but there can still be issues. Assuming you're already avoiding reflows, here are the

## gist:6789788
// component with layout
var Link = React.createClass({
  mixins: [LayoutMixin]

  render: function () {
    <span>
      {this.props.children[0]}
      {this.transferPropsTo(<a>{this.props.children[1]}</a>)}
      {this.props.children[2]}
    </span>
	var bluebird = require('bluebird');
	var request = require('request');
	bluebird.promisifyAll(request);
	bluebird.longStackTraces();

	var helper = bluebird.coroutine(function*() {
	yield request.getAsync('http://google.com/');
	throw new Error('something unexpected happened');
	});
	var co = require('co');
	var thunkify = require('thunkify');
	var request = require('request');
	var get = thunkify(request.get);

	function *helper() {
	yield get('http://google.com/');
	throw new Error('something unexpected happened');
	}
	macro := {
	rule infix { $obj $([ $key ] ...) \| $rval:expr } => {
	$obj = mori.assoc_in($obj, [$key (,) ...].reverse(), $rval)
	}
	}

	macro hash_map {
	rule {{ $($key : $value) (,) ... }} => {
	mori.hash_map($($key, $value) (,) ...)
	}
	function ObservableProperty(obj, key) {
	this.obj = obj;
	this.key = key;
	}

	ObservableProperty.prototype.get = function() {
	return this.obj.get(this.key);
	};

	ObservableProperty.prototype.addObserver = function(target, method) {
	var graph = new MoriModel();

	expect(graph.getNode('mykey')).toBe(null);
	graph.addNode('mykey', mori.hash_map('name', 'myvalue'));
	expect(
	mori.equals(graph.getNode('mykey'), mori.hash_map('name', 'myvalue'))
	).toBe(true);

	graph.addNode('mykey2', mori.hash_map('name', 'myvalue2'));
	graph.addEdge('friends', 'mykey', 'mykey2');

	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://fb.me/react-0.5.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
	</head>
	/**
	* Copyright 2013 Facebook, Inc.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	First of all, I have an experimental branch with React that lets you use compile CSS animations just-in-time with our reconciliation system and use those instead of pure JS. So I recognize that they should be supported.

	In my experience CSS transitions and animations work fine for things that will always animate fully and will never have the animation changed. A good example is a fade out when deleting a list item.

	I've just found that in my own work most animations are tied with direct user touch manipulation (like animating out the left nav w/ parallax and opacity) which requires frame-by-frame responsiveness to touch events and inertia calculations based on the user's touch velocity. It's impossible to do this without doing frame-by-frame.

	Your skepticism is definitely warranted and I complain to browser vendors whenever I see them about this. In my experience, modern (1 year old) phones can do this with minimal jank but there can still be issues. Assuming you're already avoiding reflows, here are the
	// component with layout
	var Link = React.createClass({
	mixins: [LayoutMixin]

	render: function () {
	<span>
	{this.props.children[0]}
	{this.transferPropsTo(<a>{this.props.children[1]}</a>)}
	{this.props.children[2]}
	</span>