Nate Hunzaker nhunzaker

## bubble.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Delegation</title>
  </head>
  <body>
    <div id="container">Loading...</div>

    <script src="../../lib/react.js"></script>

## 0.readme.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                nhunzaker
                / 0.readme.md
            
            
              Last active
              September 2, 2016 14:26
            
              
                Profiler comparison for only attaching local click listeners in React to non-interactive elements
              
          
    I noticed that React adds a local click handler on buttons. That got me curious, so I dug in and noticed that there's a fix for click event bubbling in iOS. iOS doesn't allow click bubbling for non-interactive elements, so a workaround is made by adding a local listener (http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html).
This does make things a little faster, using https://github.com/krausest/js-framework-benchmark, rendering 10k rows, Transaction.closeAll runs about twice as fast (because a bunch of click handler attachments go away).
Before:
A dummy listener gets added to all of the buttons:


## control.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="container">Loading...</div>

    <script src="https://cdn.jsdelivr.net/lodash/4.14.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.1/benchmark.min.js"></script>

## step-forever.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Create a breakpoint in the event callback defined in the script below this input:</p>
    <input type="number" step="0.01" min="0" value="3" />
    <p>Now click the number stepper.</p>
    <script>

## bubble-ie10-issue.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>onChange Troubleshooting</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://fb.me/react-15.2.1.js"></script>

## color-matrix.js
/**
 * Color Matrix
 *
 * A simplification of the color matrix class provided by
 * EaselJS
 *
 * www.createjs.com/docs/easeljs/files/easeljs_filters_ColorFilter.js.html#l41
 */

window.colorMatrix = (function() {

## _output
●° rollup this-inside-out.js | node --expose-gc
Running 10 trials at 1000 records each:

Generated 1000 records
Growth: 2.74%

Generated 1000 records
Growth: -8.73%

Generated 1000 records

## gist:cab7cfeaf8756a9f79c6
// user actions

export default new Macrocosm.Resource('users') // { createUser, readUsers, updateUser, destroyUser }

## gist:e9e78f7ac97a5a679427
```
app
├── index.js
├── index.html
└── assets
    ├── style
    └── images

## watch.js
#!/usr/bin/env node

var BrowserSync = require("browser-sync")
var Webpack     = require('webpack')
var WebpackDev  = require("webpack-dev-middleware")
var WebpackHot  = require("webpack-hot-middleware")
var config      = require(__dirname + '/../config/webpack')
var port        = process.env.PORT || 3000
var spawn       = require('child_process').spawn
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Delegation</title>
	</head>
	<body>
	<div id="container">Loading...</div>

	<script src="../../lib/react.js"></script>
	/**
	* Color Matrix
	*
	* A simplification of the color matrix class provided by
	* EaselJS
	*
	* www.createjs.com/docs/easeljs/files/easeljs_filters_ColorFilter.js.html#l41
	*/

	window.colorMatrix = (function() {
	●° rollup this-inside-out.js \| node --expose-gc
	Running 10 trials at 1000 records each:

	Generated 1000 records
	Growth: 2.74%

	Generated 1000 records
	Growth: -8.73%

	Generated 1000 records
	// user actions

	export default new Macrocosm.Resource('users') // { createUser, readUsers, updateUser, destroyUser }
	```
	app
	├── index.js
	├── index.html
	└── assets
	├── style
	└── images
	#!/usr/bin/env node

	var BrowserSync = require("browser-sync")
	var Webpack = require('webpack')
	var WebpackDev = require("webpack-dev-middleware")
	var WebpackHot = require("webpack-hot-middleware")
	var config = require(__dirname + '/../config/webpack')
	var port = process.env.PORT \|\| 3000
	var spawn = require('child_process').spawn