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
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -310,6 +310,7 @@ After that you can check all results in [http://localhost:8080/webdriver-ts/tabl
310
310
2. Run the server from the root directory: `npm start`
311
311
3. Visit your page in the browser (URL follows the folder structure): `http://localhost:8080/frameworks/keyed/fast/index.html`
312
312
4. Note: Its important to always start the server from the root, because that way you'll get access to global CSS that all apps must share
313
+
5. Note 2: **AVOID SHADOW DOM** - if your framework relies on Shadow Dom (like Fast framework does), you should turn it off. Otherwise you won't get access to global CSS.
313
314
5. Add the "action triggers" - buttons that all apps must have (see `frameworks/keyed/vanillajs/index.html`)
314
315
1. Note: Action triggers are simply buttons that are used to run the benchmarks (adding rows, deleting rows, swapping them, etc). Those buttons can be static HTML, or you can render them dynamically (with JS) with your framework of choice
315
316
2. Make sure your HTML elements have the same classes and structure as VanillaJS, otherwise benchmarks won't be able to find your elements on the page, and you will not get the global CSS (Bootstrap)
@@ -411,24 +412,24 @@ After that you can check all results in [http://localhost:8080/webdriver-ts/tabl
411
412
selectRow(rowId: number) {}
412
413
}
413
414
```
414
-
1. Note: your app doesn't need methods with the same name - you should write idiomatic code and follow the best practices of your framework of choice. The example above is just to give you an idea of which operations must be supported, but how you choose to implement those methods can be very different from one framework to the next.
415
-
1. Manually testing your app - do this before you run the benchmarks
415
+
2. Note: your app doesn't need methods with the same name - you should write idiomatic code and follow the best practices of your framework of choice. The example above is just to give you an idea of which operations must be supported, but how you choose to implement those methods can be very different from one framework to the next.
416
+
8. Manually testing your app - do this before you run the benchmarks
416
417
1. Open your page and click on the buttons, make sure your app adds 1000 rows, then removes them, or swaps them, or adds/removes 10,000 rows.
417
418
2. To do this, you'll probably need to watch your local files and compile them into some sort of a bundle, like `frameworks\keyed\fast\dist\bundle.js` which will be loaded through a script tag in your HTML file
418
419
3. For example, in Fast folder we have webpack watching our files: ` "build-dev": "rimraf dist && webpack --config webpack.config.js --watch --mode=development",`
419
420
4. That means we have two terminal tabs running
420
421
1. One for the server from the root folder `npm start`
421
422
2. And another in our local folder where webpack is watching the files
422
-
2. Run the single benchmark for your framework
423
+
9. Run the single benchmark for your framework
423
424
1. Once you manually verified that everything works as expected, run a single benchmark and make sure all of the tests are running
424
425
2. If you forgot something, one of the benchmarks will probably fail - for example it won't be able to find an element on the page or similar
425
426
3. Keep the server in the root folder running `npm start`, and in another terminal tab, also from the root folder run `npm run bench -- --framework keyed/fast` (or whatever is your framework `keyed/react`, `keyed/angular`, etc.).
426
427
4. The benchmark runner will open and close Chrome multiple times. The whole thing will take a couple of minutes.
427
-
3. Optional: run the benchmark for VanillaJS as comparison
428
+
10. Optional: run the benchmark for VanillaJS as comparison
428
429
1. ` npm run bench -- --framework keyed/vanillajs`
429
-
4. Build the report
430
+
11. Build the report
430
431
1. `npm run results`
431
-
5. Open the report in your browser (NOTE: the server must still be running if you want to see this page)
432
+
12. Open the report in your browser (NOTE: the server must still be running if you want to see this page)
0 commit comments