TodoMVC workload based on React 18 / React Router / Material UI

[julienw]

Hi, I'd like to propose this new workload in tentative/. It's based on React 18, React Router and Material UI.

Links:

• Try the app: https://react-18--speedometer-preview.netlify.app/resources/tentative/todomvc-react-18/dist/
• Run SP3 with it: https://react-18-no-autofill--speedometer-preview.netlify.app/?suite=TodoMVC-React-18

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 rAF and setImmediate so 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 just setTimeout, it was happening that we'd get a setTimeout called in another setTimeout, 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:

• move between "active" and "all" items
• clear completedi tems

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

[camillobruni]

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. a) Could you confirm this is the same in firefox? b) Probably harder: Could we somehow fore measure this as well?

Q3: Would it be interesting to also add a step scroll/jump to an item in the middle of the list?

[camillobruni]

Both Chrome and Firefox seem to have an ok score, Safari Version 17.5 (19618.2.12.11.6) and Release 195 (Safari 17.4, WebKit 19619.1.15.0.1) both seem to struggle massively in the delete step (100x slower than FF). @rniwa is this something you might want to have a look at?

Compare to Chrome Canary 127.0.6519.0 :

And Firefox Nightly 127.0a1 (2024-05-12) (64-Bit):

[bgrins]

@rniwa we discussed getting this one landed in an experimental folder. Care to review before we do that?