search

perrycate / tournamap

Website to visualize Smash Ultimate tournaments near you
https://tournamap.gg
GNU General Public License v3.0
9 stars 6 forks source link

Attempt to convert front end to React with Next.js. #34

Closed auoie closed 2 years ago

auoie commented 2 years ago

The functionality is almost the same. One difference is that if the user does not allow the application to access the geolocation, then the loading spinner will stay, rather than disappear. On mobile, you can see the nav bar now.

The performance is worse. Using the Chrome devtools, the time to interactive (TTI) with Next.js was about 3 seconds. The plain javascript frontend had a TTI of around 1 second. The Next.js frontend emits an error when quickly scrolling the map.

[Violation] Forced reflow while executing JavaScript took <N>ms

This error also happens with the plain javascript frontend, but only when zoomed out a lot.

It uses Tailwind CSS for styling, except for the Mapbox logo. I didn't know how to convert an SVG to a react component, so I didn't touch it.

perrycate commented 2 years ago

So sorry for the delayed written response, I know we talked on stream about it a little but I'll sum up here for the record:

I don't think we should use next.js, at least not yet. It seems like a big dependency with a lot to learn about it, and I'm still getting the hang of frontend stuff as-is. Also, it seems like some of the main advertised benefits of next.js (server-side rendering for example) aren't applicable with our current architecture (since we just generate static files and serve them over a CDN.)

That said, thank you very much for the effort, and for introducing me to these tools!