TodoMVC workload based on React 18 / React Router / Material UI #373
Conversation
…mark captures all the work
| new BenchmarkTestStep("CompletingSomeItems", (page) => { | ||
| const checkboxes = page.querySelectorAll("input[type='checkbox']"); | ||
|
|
||
| // We'll be checking 5 checkboxes, in different parts of the list. |
There was a problem hiding this comment.
do you want to update the comment? 🤔 😄
| 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!
|
Thanks, looking nice! ...and sorry for the delay. Q1: Do think it would make sense to display the summary footer as well in the speedometer view? Q2: I do see a fair amount of unmeasured style and layout updates in chrome. Q3: Would it be interesting to also add a step scroll/jump to an item in the middle of the list? |
|
Both Chrome and Firefox seem to have an ok score, Safari Version 
Compare to Chrome Canary 127.0.6519.0 : And Firefox Nightly 127.0a1 (2024-05-12) (64-Bit): |
| import type { Params } from "react-router-dom"; | ||
| import { getTodos } from "./todo-model"; | ||
|
|
||
| export function loader({ params }: { params: Params<"filter"> }) { |
There was a problem hiding this comment.
super duper nit: the name loader threw me off... would it be possible to rename it to something like:
getTodos or getFilteredTodos ?
|
@rniwa we discussed getting this one landed in an experimental folder. Care to review before we do that? |
| @@ -304,6 +304,50 @@ Suites.push({ | |||
| ], | |||
| }); | |||
|
|
|||
| Suites.push({ | |||
| name: "TodoMVC-React-18", | |||
There was a problem hiding this comment.
Can we disable this workload by default since it's experimental?
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