The 2020 Next.js rewrite, now being merged into impress!
Matchu
052cc242e4
Ok so, I kinda assumed that the query engine would only compute `all_species_ids_for_this_color` on the rows we actually returned, and it's a fast subquery so it's fine. But that was wrong! I think the query engine computing that for _every_ item, and _then_ filter out stuff with `HAVING`. Which makes sense, because the `HAVING` clause references it, so computing it makes sense! In this change, we inline the subquery, so it only gets called if the other conditions in the `HAVING` clause don't fail first. That way, it only gets run when needed, and the query runs like 2x faster (~30sec instead of ~60sec), which gets us back inside some timeouts that were triggering around 1 minute and making the page fail. However, this meant we no longer return `all_species_ids_for_this_color`, which we actually use to determine which species are _left_ to model for! So now, we have a loader that also basically runs the same query as that condition subquery. A reasonable question would be, at this point, is the `HAVING` clause a good idea? would it be simpler to do the filtering in JS? and I think it might be simpler, but I would guess noticeably worse performance, because I think we really do filter out a _lot_ of results with that `HAVING` clause—like basically all items, right? So to filter on the JS side, we'd be transferring data for all items over the wire, which… like, that's not even the worst dealbreaker, but it would certainly be noticed. This hypothesis could be wrong, but it's enough of a reason for me to not bother pursuring the refactor! |
||
|---|---|---|
| .github/workflows | ||
| .husky | ||
| .vscode | ||
| deploy | ||
| pages | ||
| public | ||
| scripts | ||
| src | ||
| .eslintrc.json | ||
| .gitignore | ||
| LICENSE.md | ||
| lint-staged.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| yarn.lock | ||
Dress to Impress 2020
This is a rewrite of the Neopets customization app, Dress to Impress!
It's a React app, built with create-react-app, running on Vercel, JAMstack-style.
The motivating goals of the rewrite are:
- Mobile friendly, to match Neopets's move to mobile.
- Simple modern tech, to be more maintainable over time and decrease hosting costs.
If you want to contribute, please reach out to Matchu! This repository is almost shareable, but the main limitation is that we currently run even our development server against the production database, and those credentials are private. But we can change that if there's interest!
Architecture sketch
First, there's the core app, in this repository.
- React app: Runs on Vercel's CDN. Code in
src/app. - API functions: Run on Vercel's Serverless Functions. Code in
apiandsrc/server.
Then, there's our various data storage components.
- MySQL database: Runs on our Linode VPS, colocated with the old app.
- Amazon S3: Stores PNGs of pet/item appearance layers, converted from the Neopets SWFs. (Once Neopets releases HTML5-compatible assets for all their items, we can hopefully remove this!)
Finally, there's our third-party integrations.
- Auth0: For authentication. Data imported from our old OpenNeo ID auth database.
- Honeycomb: For observability & performance insights on the backend.
- Discord: For logging Support users' actions to a private Discord server.
- Neopets: We load pet data from them! And plenty of assets!
Notable old components not currently included in Impress 2020:
- Elasticsearch: Used for lightning-fast item search queries. So far, we're finding the MySQL queries to be fast enough in practice. Might consider using some kind of fulltext query engine if that doesn't scale with more users!
- Resque: Used to schedule background tasks for modeling and outfit thumbnails.
- Outfit thumbnail generation: Used for outfit thumbnails in the app. I'm wondering if there's a way to get away with not doing this, like just rendering the layers... but I suppose if we want a good social share experience, then we'll probably want this. Maybe we can generate them on the fly as API requests, instead of adding a data storage component?
- Memcache: Used to cache common HTML and JSON snippets. Not yet needing anything similar in Impress 2020!
- The entire old Rails app! No references to it in here, aside from some temporary URL links to features that aren't implemented here yet.