You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+22-11Lines changed: 22 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -141,9 +141,11 @@ npm run build-prod
141
141
```
142
142
now run the benchmark driver for the vanillajs-keyed framework:
143
143
```
144
-
npm run selenium -- --count 3 --framework vanillajs-keyed
144
+
npm run bench keyed/vanillajs
145
145
```
146
-
Just lean back and watch chrome run the benchmarks. It runs each benchmark 3 times for the vanillajs-keyed framework.
146
+
Just lean back and watch chrome run the benchmarks.
147
+
If it doesn't complain then the html for the table should be fine and your categorization as keyed or non-keyed should also be correct.
148
+
147
149
148
150
You should keep the chrome window visible since otherwise it seems like paint events can be skipped leading to wrong results. On the terminal will appear various log statements.
As you can see the mean duration for create 1000 rows was 144 msecs.
156
158
159
+
You can also check whether the implementation appears to be compliant to the rules:
160
+
```
161
+
npm run check keyed/vanillajs
162
+
```
163
+
If it finds anything it'll report an ERROR.
164
+
157
165
## 6. Building the result table
158
166
159
167
Install libraries
@@ -173,7 +181,7 @@ Now a result table should have been created which can be opened on [http://local
173
181
There's nothing in table except for the column vanillajs-keyed at the right end of the first table.
174
182

175
183
176
-
## Optional 6.1 Adding your new implementation to the results table.
184
+
## 6.1 Adding your new implementation to the results table.
177
185
178
186
(Notice: Updating common.ts is no longer necessary, super-vanillajs is visible in the result table)
179
187
@@ -218,34 +226,37 @@ This is not for the faint at heart. You can build all frameworks simply by issui
218
226
cd ..
219
227
npm run build-prod
220
228
```
221
-
After downloading the whole internet it starts building it. Basically there should be no errors during the build, but I can't guarantee that the dependencies won't break.
222
-
You can now run selenium for all frameworks by invoking
223
-
`npm run selenium`
229
+
After downloading the whole internet it starts building it. Basically there should be no errors during the build, but I can't guarantee that the dependencies won't break. (There's a docker build on the way which might make building it more robust. See https://github.com/krausest/js-framework-benchmark/wiki/%5BUnder-construction%5D-Build-all-frameworks-with-docker)
230
+
You can now run the benchmark for all frameworks by invoking
231
+
`npm run bench-all`
224
232
in the root directory.
225
233
226
234
After that you can check all results in [http://localhost:8080/webdriver-ts/table.html](http://localhost:8080/webdriver-ts/table.html).
227
235
228
236
## Tips and tricks
229
237
230
-
* You can select multiple frameworks and benchmarks for running with prefixes like in the following example:
231
-
`npm run selenium -- --framework angular bob --benchmark 01_ 02_`
238
+
* You can select multiple frameworks and benchmarks for running with prefixes like in the following example in the webdriver-ts directory:
239
+
`npm run bench -- --framework angular bob --benchmark 01_ 02_`
232
240
runs the test for all frameworks that contain either angular or bob, which means all angular versions and bobril and all benchmarks whose id contain 01_ or 02_
241
+
* You can also run implementations by passing their directory names (cd to webdriver-ts):
242
+
`npm run bench keyed/angular keyed/react` or if you want to pass more options it becomes:
243
+
`npm run bench -- --count 3 keyed/angular keyed/react`.
233
244
* If you can't get one framework to compile or run, just move it out of the root directory and remove it from common.ts, recompile and re-run
234
245
* To achieve good precision you should run each framework often enough. I recommend at least 10 times, more is better. The result table contains the mean and the standard deviation. You can seen the effect on the latter pretty well if you increase the count.
235
246
* One can check whether an implementation is keyed or non-keyed via `npm run isKeyed` in the webdriver-ts directory. You can limit which frameworks to check in the same way as the webdriver test runner like e.g. `npm run isKeyed -- --framework svelte`. The program will report an error if a benchmark implementation is incorrectly classified.
236
247
237
248
## How to contribute
238
249
239
250
Contributions are very welcome. Please use the following rules:
240
-
* Name your directory frameworks/[keyed|non-keyed][FrameworkName]
251
+
* Name your directory frameworks/[keyed|non-keyed]/[FrameworkName]
241
252
* Each contribution must be buildable by `npm install` and `npm run build-prod` command in the directory. What build-prod does is up to you. Often there's an `npm run build-dev` that creates a development build
242
253
* Every implementation must use bootstrap provided in the root css directory.
243
254
* All npm dependencies should be installed locally (i.e. listed in your package.json). Http-server should not be a local dependency. It is installed from the root directory to allow access to bootstrap.
244
255
* Please use *fixed version* numbers, no ranges, in package.json. Otherwise the build will break sooner or later - believe me. Updating works IMO best with npm-check-updates, which keeps the version format.
245
256
* Webdriver-ts must be able to run the perf tests for the contribution. This means that all buttons (like "Create 1,000 rows") must have the correct id e.g. like in vanillajs. Using shadow DOM is a real pain for webdriver. The closer you can get to polymer the higher the chances I can make that contribution work.
246
257
* Don't change the ids in the index.html, since the automated benchmarking relies on those ids.
247
-
* You don't need to update /index.html. It's created with a script (see 6.2 above).
248
-
* You can assert the correct keyed or non-keyed behaviour by using the isKeyed test tool. cd to webdriver-ts and call it like `npm run isKeyed -- --framework [your framework]`. It'll print an error if your framework behaves other as specified.
258
+
* Please push only files in your framework folder (not index.html or results.json)
259
+
* **Please make sure your implementation is validated by the test tool.** cd to webdriver-ts and invoke it with `npm run check [keyed|non-keyed]/[FrameworkName]`. It'll print an error if your framework behaves other as specified. It'll print a big ERROR explaining if it isn't happy with the implementation.
249
260
* Please don't commit any of the result file webdriver-ts/table.html, webdriver-ts-results/src/results.ts or webdriver-ts-results/table.html. I use to run the benchmarks after merging and publish updated (temporary) results.
250
261
* The latest stable chrome can be used regarding web features and language level (babel-preset-env "last 1 chrome versions")
251
262
* **Please don't over-optimize. Other contributors will review your implementation so beware of discussions ([#521](https://github.com/krausest/js-framework-benchmark/pull/521), [#519](https://github.com/krausest/js-framework-benchmark/pull/519), [#430](https://github.com/krausest/js-framework-benchmark/issues/430)) and rejection if the community finds you cheating. When are you safe?**
0 commit comments