At the beginning of 2022, a few months after SiegeGG was acquired by Gfinity, we sat in a meeting discussing the strategy of our website. One of the key points we talked about was how we could best integrate Gfinity tech into the website. Their experience with editorial content, especially on a technical level, was far exceeding ours.
Most of Gfinity’s existing sites were already developed in Vue or in the process of being migrated to Vue. SiegeGG was already using Vue for, for example, the search box at the top of the website. And creating reactive UIs, like that search, without a framework is expensive and skyrockets maintenance costs. Therefore, we decided to completely migrate SiegeGG to Vue in the coming months.
Our plan to migrate SiegeGG to Vue was threefold:
- Migrate SiegeGG Pro
Pro is our enterprise product aimed at professional players, analysts, and broadcast talent. A migration to Vue allowed us to more easily add new features and improve Pro’s performance. - Migrate the public website
Apart from integrating Gfinity tech, we wanted (and still want) to improve the performance and experience of the SiegeGG website. - Integrate Gfinity tech
As first step, I created SiegeGG UI, our UI component library, on March 24th, 2022. Similar to GitLab UI, it would encompass all base components used on SiegeGG to simplify design changes and improve UI consistency. The component library is publicly hosted on GitLab and uses their NPM package registry, to which we have released 48 versions at time of writing.
During the Charlotte Major, I started rewriting the entire codebase of SiegeGG Pro in Vue. More specifically, in Nuxt 3. Although Nuxt was still in early development in May—which would cause me some major headace—, it very much simplified the process of writing features for Pro.
After Pro was mostly migrated, in the evening of June 2nd, 2022, I committed the initial commit in the SiegeGG New repository. This marked the kick-off of the second step in the migration plan. After an internally busy time, a personally tough time, and two weeks of vacation, I was ready to push the website migration forward.
However, with other development work blocking parts of my capacity before and during the Berlin Major (and our dog being sick for a few weeks), I couldn’t focus all of my energy on the migration, unfortunately. So, on the Monday after the Berlin Major, I started using a new short-term planning system for myself, which has helped me to focus on the important next steps of the migration and regulate my output.
I made good progress and could already estimate a possible release date. Three weeks after the major’s playoffs, I had checked off enough tasks on the migration that I teased the release of SiegeGG New. While I didn’t meet all my goals to release it to all users, I enabled SiegeGG New on Wednesday and Thursday for German users that week. Back then, everyone in any region could’ve tried it out at new.siege.gg.
As of September 13th, the public SiegeGG website is fully powered by the Nuxt 3 app. And, while the old site is still functional, we’ll soon start removing functionality from it to reduce our maintenance scope.
What we’ve learned
While the overall migration is still in full swing, it’s time for a preliminary conclusion.
I started my work on SiegeGG UI in late March. When I’m posting this, that’s exactly 6 months (à 30 days) ago. Had I only focused on migrating all SiegeGG web products to Vue, the migration would’ve complete by now. However, the old lesson “life always gets in your way” holds true, as always. Be it personal life, or other work responsibilities; they’ll always distract you and thwart your plans.
Another thing, I unfortunately didn’t account for enough, was the effect of the migration on my peers and our users. I excitedly communicated our migration efforts to the team (and publicly) but I didn’t talk enough about how their workflow could or would be affected. Specifically our CMS (content management system) would stay behind on the old Laravel-based website for the time being. This led to some fair stress for multiple team members as everyone on the team relied on features only available in the CMS.
After we’ve spent multiple months on the Laravel to Nuxt migration, I felt excitement (and pressure) about finally delivering.
Delivering is something you can’t reasonably do while you’re changing the programming language or architecture of your software. For a few months, we couldn’t add new features or improve existing ones on the SiegeGG website. If we did, it would’ve doubled our work. That’s why I initially hesitated to agree to a complete migration.
After SiegeGG New has been live for about a week, many new and related problems have surfaced. For example, logging in to our CDN no longer worked because the OAuth2 API is still part of the Laravel app. What’s more, I accidentally didn’t migrate a few features. Other features aren’t part of SiegeGG New because it fundamentally works differently, such as the stats “Maps” and “Disables” on our competitions. I’m out of capacity for at least the next week but new issues pop up daily.
Closing thoughts
Over the course of about six months, we’ve migrated two SiegeGG products from Laravel/Blade to Nuxt/Vue with only one person actively working on the code. More than that, SiegeGG Pro is in a state where we can offer free 1 month trials to professional Rainbow Six esports teams.
I’m looking optimistic towards a future where we’ll finally be able to work on the features and design improvements of the SiegeGG website again. This time on faster, better scaling software. Even if the way there was pretty long and a bit draining.