Rakaly Status Report #9: The UI Refactor

I deployed a change yesterday that I have been working on for a month. Hopefully it wasn't noticeable -- that was the goal.

I wanted to see if I could restructure and refactor the entire frontend without anyone noticing. The refactor was large: source control states "294 changed files with 6960 additions and 17962 deletions". The feat is diminished somewhat with knowledge that some of those lines were autogenerated, but it is still a large change.

I wouldn't normally post an update that just talks about refactoring, but since it's been a month since the last update I figured I should post to at least give the signal that Rakaly is still very much under active development.

So why the refactor?

I consider myself adequate at frontend development -- but by no means an expert. Rakaly has been a great vessel for me to learn and try out new ideas. The cobbled together frontend framework that underpinned Rakaly started to show cracks in the foundation, so I transitioned Rakaly into a next.js app (no need to be familiar with that to continue). Here are some benefits:

• Productivity (for myself): incremental development builds are nearly instant instead of taking up to 20 seconds
• Performance (for everyone): pages should load faster thanks to being generated at build time. Rakaly was already fast beforehand, but now pages should load near instantly.
• Reworked (for myself): Lot of the frontend components were hastily stitched together in their initial development and so this time provided a great opportunity to rework the code into something more manageable.

So for Rakaly users, the only immediate benefit should be performance, but with all refactors the long term idea is that this should allow me to ship features quicker now that the architecture is more solid.

Also in this monthly update, I transitioned province data from gzip compression to brotli because there was a large reduction (200 KB / 45% reduction) in bandwidth required to transmit the data. This means that the political map should now load quicker for those that have never visited Rakaly. Previous Rakaly users still won't need to request province data as once fetched, it is cached forever.

Speaking of cached forever, an unintended side effect of this refactor is that every non-API request is forever cacheable (achievements and flag images weren't previously cached). It doesn't seem so far fetched that if everything is cacheable then I can start to offer Rakaly in an offline or installable mode through what is known as a progressive web app (PWA). Since I've never written a PWA, I'm not sure how this would work or what it would look like but I'm still excited at the opportunities.

On a personal life update, my power supply for my computer literally fried itself, so I've been working on a 8 year old ultrabook. Everything is much slower, which definitely gives one a new perspective on things. I'm happy to report that Rakaly worked without a hitch on older hardware -- almost worked too well.

Until next update, cheers.