https://github.com/web-perf/react-worker-dom

Experiments to see the advantages of using Web Workers to Render React Virtual DOM
https://github.com/web-perf/react-worker-dom

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/web-perf/react-worker-dom
• Owner: web-perf
• License: bsd-3-clause
• Created: 2015-11-23T03:21:29.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-06T23:20:21.000Z (over 7 years ago)
• Last Synced: 2024-04-27T11:45:12.603Z (2 months ago)
• Language: JavaScript
• Homepage: http://web-perf.github.io/react-worker-dom
• Size: 1.67 MB
• Stars: 938
• Watchers: 34
• Forks: 51
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-list - react-worker-dom - perf | 893 | (JavaScript)
• awesome-react-renderer - react-worker-dom - Experiments to see the advantages of using Web Workers to Render React Virtual DOM. (Web (+ NW & Electron))
• awesome-stars - react-worker-dom - perf | 941 | (JavaScript)

README

        
# 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/](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.

```js

// File: main.jsx

import React from 'react';

import reactDOM from 'react-dom';

reactDOM.render(, 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. 

```js

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

```js

// 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();

```

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

## Testing Performance

To manually look at frame rates, load the dbmonster [demo pages](http://web-perf.github.io/react-worker-dom/) in Chrome, and view the [frame meter](https://developer.chrome.com/devtools/docs/rendering-settings#show-fps%20meter) 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 ``, ``, etc.

- Support event utilities that enable things like autofocus, etc. 

- Enable preventDefault() semantics in events.