Skip to content

Commit a942eec

Browse files
gmierzgmierz
authored
Merge pull request mozilla#27 from gmierz/matrix-react
Add matrix react bench.
2 parents e106b45 + 6b816f8 commit a942eec

18,438 files changed

Lines changed: 2352857 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎benchmarks/matrix-react-bench/README.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
React Microbenchmark using Matrix/Element
2+
=========================================
3+
4+
NOTE: This is very much a WORK IN PROGRESS.
5+
6+
This is a JS-focused micro-benchmark of the React framework using the
7+
matrix-react-sdk library to provide a more "real-world" example while still
8+
being focused and repeatable(-ish).
9+
10+
The benchmark mocks out some chat events and then switches rooms back and force
11+
rapidly. The matrix-react-sdk uses a different key per room which triggers a
12+
nearly complete update in React.
13+
14+
An additional goal is to be able to run this directly in the SpiderMonkey
15+
js-shell using a minimal polyfill/mock of the DOM APIs. This is easier to do
16+
detailed performance testing with and gives additional data points on how much
17+
the DOM API interaction plays a role in performance of this.
18+
19+
20+
Instructions
21+
------------
22+
1) Setup NodeJS/NPM tools. If building Firefox, you can also use the version
23+
from `mach boostrap` which can be found in `$HOME/.mozbuild/node/bin`.
24+
2) Run `npm install` to fetch dependencies using the `package.json` file.
25+
3) Run `npm run build` to generate the WebPack/Babel output files.
26+
4) Optionally host the HTML and dist/main.js file using a simple server (such as `python3 -m http.server`)
27+
5.a) Load the matrix_demo.html page and check console after done.
28+
5.b) Run js-shell on dist/main.js and look at output.
29+
30+
Key Files
31+
---------
32+
matrix_demo.html - This loads the main JS file and has dummy CSS.
33+
babel.config.json - Controls the level of transpiling. Modelled after the practical settings used by the Element Web (Matrix) client.
34+
webpack.config.js - WebPack configuration to enable Babel. It also uses the `null-loader` to disable a eagerly loaded modules of the matrix-element-sdk to avoid features we are not focused on such as WASM compile time. This can be used to switch between production and development configurations.
35+
package.json - Dependency files for build and execution. Mostly just Babel and React packages.
36+
dist/main.js - The main (generated) JS file that is loaded in browser or run directly in a JS shell.
37+
src/shell-polyfill-hack.js - Mocked functions for SpiderMonkey shell with just enough detail to run the application. This is ignored in browser environments which use the real DOM APIs.
38+
39+
Running in Shell
40+
----------------
41+
The `dist/main.js` file can be run directly in the SpiderMonkey shell. It will
42+
automatically mock some web-platform APIs to allow things to run (mostly)
43+
correctly. This polyfill will use plain-objects as DOM nodes and maintains the
44+
parent/child relationships as well as small amounts of additional state. This
45+
_will_ have different performance characteristics than a real DOM
46+
implementation.
47+
48+
If the matrix code encounters errors, it may render an error page instead of
49+
throwing an exception to the top level. When making changes, it is worth dumping
50+
the mock DOM tree and seeing if it is reasonable. The `src/DumpDOMTree.js` code
51+
can help out here. Note that Promise microtasks need to be flushed for an issued
52+
render to complete.

‎benchmarks/matrix-react-bench/babel.config.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"targets": [
7+
"last 2 Chrome versions",
8+
"last 2 Firefox versions",
9+
"last 2 Safari versions",
10+
"last 2 Edge versions",
11+
],
12+
}
13+
],
14+
"@babel/preset-react",
15+
"@babel/preset-typescript",
16+
],
17+
"plugins": [
18+
[
19+
"@babel/plugin-proposal-decorators",
20+
{
21+
"legacy": true
22+
}
23+
],
24+
"@babel/plugin-proposal-export-default-from",
25+
"@babel/plugin-proposal-numeric-separator",
26+
"@babel/plugin-proposal-class-properties",
27+
"@babel/plugin-proposal-object-rest-spread",
28+
"@babel/plugin-proposal-optional-chaining",
29+
"@babel/plugin-proposal-nullish-coalescing-operator",
30+
"@babel/plugin-syntax-dynamic-import",
31+
],
32+
}

‎benchmarks/matrix-react-bench/dist/0.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎benchmarks/matrix-react-bench/dist/1.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎benchmarks/matrix-react-bench/dist/10.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎benchmarks/matrix-react-bench/dist/11.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎benchmarks/matrix-react-bench/dist/12.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎benchmarks/matrix-react-bench/dist/13.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)