TodoMVC workload based on React 18 / React Router / Material UI #373
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…mark captures all the work
julienw
commented
May 29, 2024
| new BenchmarkTestStep("CompletingSomeItems", (page) => { | ||
| const checkboxes = page.querySelectorAll("input[type='checkbox']"); | ||
|
|
||
| // We'll be checking 5 checkboxes, in different parts of the list. |
| children: [ | ||
| { | ||
| path: "new", | ||
| action: async ({ request }) => { |
There was a problem hiding this comment.
oh, I like the way the router is set up
There was a problem hiding this comment.
Thanks!
Yeah, it's the new way introduced in react-router v6.4, I like it as well!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi,
I'd like to propose this new workload in
tentative/.It's based on React 18, React Router and Material UI.
Links:
I decided to use Material UI as a way to get deeper React trees.
I also used React Router because it's very much used. The way I used it to control the model might lead to discussions though: I thought of it as a way to "emulate" a server side environment. I believe that if we'd have to implement a TodoMVC app with a server side environment, we could use the same architecture. Here of course I used a local model, not a server.
Because of React 18 (and I believe the CSS-in-JS library used in Material UI) I had to override
rAFandsetImmediateso that the SP3 runner could capture all the work.Especially I had to use microtasks (with promises), not normal tasks (with
setTimeout) like before. Indeed with justsetTimeout, it was happening that we'd get asetTimeoutcalled in anothersetTimeout, and this was sometimes escaping the benchmark runner.I also decided to use some more steps in the benchmarks, than in the other TodoMVC workloads. I added:
For review, I split this in several commits to make it easier to review, but the bulk of the implementation is in Implement TodoMVC with all its actions.
If we agree on the general approach, but there are small changes to be done, I'd rather land this first and implement the changes in follow-ups. Hopefully this makes sense!
Happy to hear feedback, folks