Skip to content

Commit 17a42dc

Browse files
author
Oskar Eriksson
committed
Updated readme
1 parent 68f3b24 commit 17a42dc

File tree

1 file changed

+21
-15
lines changed

1 file changed

+21
-15
lines changed

README.md

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@
22

33
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.
44

5-
An existing React application can leverage WebWorkers using this library with minimal change. Look at the usage section for details.
5+
An existing React application can leverage WebWorkers using this library with minimal change. Look at the usage section for details.
6+
7+
**This is the React 15.x experimental version, see master branch if you're running React 0.14.**
68

79
## Demo
810

9-
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,
11+
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,
1012

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

1618
## Usage
1719

20+
```bash
21+
npm install --save react-worker-dom
22+
```
23+
1824
### A typical React application
1925

2026
A typical React application would looks something like the following.
@@ -28,26 +34,25 @@ reactDOM.render(<Component/>, document.getElementById('container'));
2834

2935
### Using it with Web Workers
3036

31-
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.
32-
37+
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.
3338

3439
```js
3540
// File: main.js - included using a script tag in index.html
3641
import React from 'react';
37-
import reactDOM from 'react-worker-dom'; // Instead of using react-dom
38-
reactDOM.render(new Worker('worker.js'), document.getElementById('container'));
42+
import ReactDOM from 'react-worker-dom/page'; // Instead of using react-dom
43+
ReactDOM.render(new Worker('worker.js'), document.getElementById('container'));
3944
```
4045

41-
The `worker.js` file is the one that now holds the actual Component.
46+
The `worker.js` file is the one that now holds the actual Component.
4247

4348
```js
44-
// File: worker.jsx - loaded in index.html using new Worker('worker.jsx') in the file script above;
49+
// File: worker.jsx - loaded in index.html using new Worker('worker.jsx') in the file script above;
4550
import React from 'react';
46-
import ReactWorkerDOM from 'react-worker-dom-worker';
51+
import ReactWorkerDOM from 'react-worker-dom/worker';
4752
ReactWorkerDOM.render(<Component/>);
4853
```
4954

50-
Look at `test\dbmonster` and `test\todoapp` directory for the examples.
55+
Look at `test\dbmonster` and `test\todoapp` directory for the examples.
5156

5257
## Testing Performance
5358

@@ -56,11 +61,12 @@ To manually look at frame rates, load the dbmonster [demo pages](http://web-perf
5661
To automatically collect frame rates and compare it with the normal version
5762
- Run `npm run demo` to start the server and host the web pages
5863
- 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.
59-
- The frame rates are available in `_dbmonster.json` file, for each row count.
64+
- The frame rates are available in `_dbmonster.json` file, for each row count.
6065

6166
## Roadmap
62-
Here are the things that need to be done next.
67+
Here are the things that need to be done next.
6368

6469
- Add support for form elements like <input>, <select>, etc.
65-
- Support event utilities that enable things like autofocus, etc.
66-
- Enable preventDefault() semantics in events.
70+
- Support event utilities that enable things like autofocus, etc.
71+
- Enable preventDefault() semantics in events.
72+
- Add test suite

0 commit comments

Comments
 (0)