web-perf / react-worker-dom Goto Github PK

Experiments to see the advantages of using Web Workers to Render React Virtual DOM

Home Page: http://web-perf.github.io/react-worker-dom

License: BSD 3-Clause "New" or "Revised" License

JavaScript 93.11% HTML 6.89%

react-worker-dom's Introduction

React Renderer using Web Workers

A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only node updates are sent over to the UI thread, result in a much more responsive UI.

An existing React application can leverage WebWorkers using this library with minimal change. Look at the usage section for details.

Demo

The demo is hosted at http://web-perf.github.io/react-worker-dom/. To run a local version of the demo,

Clone the repo run npm install to install all dependencies.
Build the app using npm run demo
Open http://localhost:8080/test/dbmonster/ to view the demo app, or http://localhost:8080/test/todo for the todo app.
Tweak the params in the URL to change to use web workers, increase number of components, etc.

Usage

A typical React application

A typical React application would looks something like the following.

// File: main.jsx
import React from 'react';
import reactDOM from 'react-dom';
reactDOM.render(<Component/>, document.getElementById('container'));

Using it with Web Workers

To use this renderer, we would need to split the above file into 2 parts, one that is on the page, and another that starts as a web worker.

// File: main.js - included using a script tag in index.html
import React from 'react';
import reactDOM from 'react-worker-dom'; // Instead of using react-dom
reactDOM.render(new Worker('worker.js'), document.getElementById('container'));

The worker.js file is the one that now holds the actual Component.

// File: worker.jsx - loaded in index.html using new Worker('worker.jsx') in the file script above; 
import React from 'react';
import ReactWorkerDOM from 'react-worker-dom-worker';
ReactWorkerDOM.render(<Component/>);

Look at test\dbmonster and test\todoapp directory for the examples.

Testing Performance

To manually look at frame rates, load the dbmonster demo pages in Chrome, and view the frame meter in devtools.

To automatically collect frame rates and compare it with the normal version

Run npm run demo to start the server and host the web pages
Run npm run perf chrome worker to test frame rates for various rows in chrome in a Web Worker. Instead of chrome, you could use android, and instead of worker, you could use normal to test the other combinations.
The frame rates are available in _dbmonster.json file, for each row count.

Roadmap

Here are the things that need to be done next.

Add support for form elements like <input>, <select>, etc.
Support event utilities that enable things like autofocus, etc.
Enable preventDefault() semantics in events.

react-worker-dom's People

Contributors

Stargazers

Watchers

react-worker-dom's Issues

Update project to work with React v15+

gh-pages branch, so I don't have to clone to try

Demo does not make important/relevant benchmarking information clear

http://web-perf.github.io/react-worker-dom/ just looks like a bunch of rows with flickering numbers and doesn't seem to have any useful information. Would be great if I could see just a simple benchmark:

How long does it take to render 1000 rows with workers?
How long does it take to render 1000 rows without workers?

FWIW I've found JSperf very useful for things like this.

not work in a real project

i think this is only a demo,not work in a real project. Leadership let me study the use of webworker to optimize the efficiency of the react project, but the current use of the react project is to use a lot of plug-ins, you can not use this project seems to be the use of plug-ins. I would like to ask you if there is no real project to use?

npm run demo failing

npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config test/webpack.config.js

Terminal Output

j15:react-worker-dom jP$ node --version v6.3.1 j15:react-worker-dom jP$ npm run demo

[email protected] demo /Users/jP/Sites/node/react-worker-dom
webpack-dev-server --config test/webpack.config.js

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1012:11)
at exports._exceptionWithHostPort (util.js:1035:20)
at Server._listen2 (net.js:1252:14)
at listen (net.js:1288:10)
at net.js:1398:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:65:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:84:10)

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/6.3.1/bin/node" "/usr/local/bin/npm" "run" "demo"
npm ERR! node v6.3.1
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] demo: webpack-dev-server --config test/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] demo script 'webpack-dev-server --config test/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-worker-dom package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --config test/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-worker-dom
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-worker-dom
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jP/Sites/node/react-worker-dom/npm-debug.log
j15:react-worker-dom jP$

NPM Debug Log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/6.3.1/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'demo' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predemo', 'demo', 'postdemo' ]
5 info lifecycle [email protected]~predemo: [email protected]
6 silly lifecycle [email protected]~predemo: no script for predemo, continuing
7 info lifecycle [email protected]~demo: [email protected]
8 verbose lifecycle [email protected]~demo: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~demo: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jP/Sites/node/react-worker-dom/node_modules/.bin:/usr/local/Cellar/node/6.3.1/bin:/Users/jP/.rbenv/shims:/Users/jP/.node/bin:/Users/jP/Sites/modx/Gitify:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/npm/bin:/Users/jP/bin:/usr/local/bin:/usr/local/mysql/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/npm/bin:/opt/X11/bin
10 verbose lifecycle [email protected]~demo: CWD: /Users/jP/Sites/node/react-worker-dom
11 silly lifecycle [email protected]~demo: Args: [ '-c', 'webpack-dev-server --config test/webpack.config.js' ]
12 silly lifecycle [email protected]~demo: Returned: code: 1  signal: null
13 info lifecycle [email protected]~demo: Failed to exec demo script
14 verbose stack Error: [email protected] demo: `webpack-dev-server --config test/webpack.config.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/jP/Sites/node/react-worker-dom
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/6.3.1/bin/node" "/usr/local/bin/npm" "run" "demo"
19 error node v6.3.1
20 error npm  v3.10.6
21 error code ELIFECYCLE
22 error [email protected] demo: `webpack-dev-server --config test/webpack.config.js`
22 error Exit status 1
23 error Failed at the [email protected] demo script 'webpack-dev-server --config test/webpack.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-worker-dom package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server --config test/webpack.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs react-worker-dom
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls react-worker-dom
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Is this project dead. Any status on the roadmap?

Uncaught ReferenceError: webpackJsonp is not defined(…)

Hi @axemclion
try to add below configuration into test/todo/webpack.config.js , i get error for webpackJsonp . Any hot fix to make this work together with webpack.CommonsChunkPlugin ?

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
      ,
      minChunks: Infinity
    }),

  ],

react-worker-dom library

What do you think about separating core of this repository as an npm module?

Using with Redux

I cannot seem to find source code for your demos, so I am wondering how the state management works. Is there local state within components? Either way I would like to see some proper demo used with Redux.

I mean if I want Redux to stay on main thread and have React only to be rendered in worker, how could I achieve a communication? It's hard to imagine that I would be passing whole state there because that means serialize and deserialize causing new object every time and the performance gain gets lowered right away due to React optimizations.

Am I missing something obvious? I haven't been using workers for some time, so perhaps there are some new methods how to pass data around?

ToDo WebWorker demo bug

Hi!

Great examples :)

I noticed something, the TODO app with WebWorkers does not clear the input value after adding it, while the version without WebWorkers does it.

Npm Packaging

Hi. I am somewhat new to javascript and I having trouble in figuring out how to adapt my code to run as your example. I appreciate how simple it seems in the Readme, and similar to what I get from react-dom. I was thinking if you were considering to interface this repository somewhat like:

npm install --save react-worker-dom

//Worker.js
import React from 'react';
import {render} from 'react-worker-dom';
import App from './src/App';
render(<App/>);

//Page.js
import ReactWorker from 'react-worker-dom';
import Worker from "worker!./Worker";
ReactWorker( Worker(), document.getElementById("root") );

and them just run webpack/babel on Page.js?