search

krausest / js-framework-benchmark

A comparison of the performance of a few popular javascript frameworks
https://krausest.github.io/js-framework-benchmark/
Apache License 2.0
6.52k stars 811 forks source link

Refactor ui of the site #1617

Closed nakrovati closed 2 months ago

nakrovati commented 2 months ago

Refactor the ui using Ant design and lucide

  1. Feat: use Ant design component library
  2. Feat: use Lucide icon set
  3. Refactor: remove unused code and styles
  4. Refactor: add index.ts files to component directories to simplify import via React.lazy and improve readability in IDEs.
  5. Refactor: Split styles
  6. Fix: use modal to display benchmark and framework selectors.

Screenshots

New ui - 1024px ui-1024

New ui -375px ui-375

New frameworks-selector ui - 1024px ui-frameworks_modal-1024

Faq

  1. Why ant design - looks good, weighs little and doesn't require many dependencies
krausest commented 2 months ago

Thanks. I really prefer the new look! I tested on some devices and I see three things that should be improved:

  1. Updating the table on either iPhone (11 Pro) or iPad (Gen 10) is dead slow (sorting or selecting). It takes about 10 seconds. The old version works in a second or less. I don't see such a performance issue on any other device (android or safari on osx).
  2. The modal for the frameworks has too many scrollable areas. It's possible to get three scrollbars (one for the background, one for keyed, one for non-keyed). There should be exactly one (either in the modal or the background): Interactive Results
  3. (Minor): The backdrop of the modal dialog for select benchmarks should be fixed, but it can be scrolled on iOS / iPadOS, which is a bit ugly.

Can you take a look if you can improve these issues (especially 1+2)?

The redesigned page it a bit heavier (978 kb transferred) than the old (830 kb transferred) site, but I guess we can live with that.

I published a preview on https://krausest.github.io/js-framework-benchmark/2024/table_chrome_122_redesign.html to allow testing on other devices.

nakrovati commented 2 months ago

Hi, I already fixed the second one (now there is one long scrolling modal).

I will try to fix the performance regression on Iphone and Ipad, but I only have an Ios emulator on macOS, so no guarantees. And about the third point write more details, because I don't understand what you mean. I looked at the Iphone 15 emulator and everything is fine with the modal window (unless you mean that it is very wide compared to the modal window for selecting frameworks).

krausest commented 2 months ago

Here are two screenshots for the third: On iOS/iPadOS and safari one can scroll the background while the modal is open: IMG_0007 2 IMG_0008 2

krausest commented 2 months ago

Here's a profile from the iPad from the dev build: Screenshot 2024-03-04 at 22 04 23 and here the old version: Screenshot 2024-03-04 at 22 07 57

Not sure if it helps. Both versions use react 18.2.0. The time appears to be spent in react code. Let me know if further profiling might help.

krausest commented 2 months ago

Fix for issue 2 looks good!

krausest commented 2 months ago

Good new. With iOS/iPadOS 17.4 the performance issue seems to be gone. The speed when sorting or filtering is back to normal.

nakrovati commented 2 months ago

Fine! I also replaced plotly with chart.js, so the bundle size decreased by 1MB. I'll add a commit a little later