Building a Faster Clone of the OVH Manager

January 2023

• A Journey into Legacy Code and Modern Solutions

Introduction

Ever experienced the frustration of waiting for a website to load, only to find out it’s slower than a snail on vacation? That’s what I encountered while using the OVH manager. After upgrading my internet speed and still facing sluggish loading times, I decided to embark on an impulsive experiment: could I create a faster version of the OVH manager myself? Little did I know, this seemingly whimsical endeavor would lead me down a rabbit hole of legacy code, CSS chaos, and a newfound appreciation for modern web development.

Unveiling the Slow Behemoth

The OVH manager, a tool for managing various web services, had been my bane for too long. It moved at a glacial pace, even with fiber internet. I jokingly told a friend, “I could make this faster,” and with that casual challenge, the project was born. Armed with a day of determination, I set out to create a simplified clone, aiming to outpace the sluggish behemoth I had come to loathe.

A Tangle of Legacy Design

As I delved into the project, it became apparent that the OVH manager’s slow speed was not just a coincidence. The design was a mishmash of legacy frameworks like React and Angular, woven together in a perplexing dance. My clone, on the other hand, was a showcase of modernity, employing Svelte and the promise of SvelteKit for server-side rendering (SSR).

CSS Confusion and Code Reincarnation

The greatest challenge came from the tangled web of CSS. The OVH manager’s class names and non-scoped styles were like a riddle I had to decipher. Reusing their UI CSS framework introduced an array of familiar bugs. It was like reliving the same code-related nightmares, a déjà vu of quirky behavior.

The Speed Revolution: Pre-Loading and API Mocking

The crown jewel of my faster clone was pre-loading user data on the server side. This meant users didn’t have to twiddle their thumbs while waiting for data to fetch from the API. The result? A threefold boost in speed, transforming the experience from sluggish to snappy.

I even mocked the OVH manager’s API using SvelteKit’s rest endpoints, creating a seamless illusion of interacting with the native UI.

Migration advices

Before we wrap up this journey, let’s take a moment to reflect on the lessons learned and offer some migration advice for those venturing into the realm of legacy code resurrection.

Embrace the Power of Web Components

When you encounter components or functionalities that resist the migration to SvelteKit, consider the versatile world of web components. These standalone units of code are like Lego blocks for the web, providing a clean way to encapsulate and reuse elements across frameworks. They can seamlessly integrate with SvelteKit, offering a bridge between old and new while maintaining performance.

Harness the Magic of Prerendering

For a significant performance boost, consider the magic of prerendering. By generating static HTML versions of your dynamic pages, you reduce the need for runtime data fetching and enhance the initial load speed. This strategy can be particularly effective for content that doesn’t change frequently like the documentations, giving your users a lightning-fast first impression.

The AngularJS Puzzle: HTMX and Turbo-inspired Solutions

Finally, let’s address the AngularJS template puzzle. If you find yourself dealing with legacy AngularJS templates that seem like an insurmountable challenge, fear not. The world of HTMX and Turbo-like behaviors enable you to load already compiled HTML templates, eliminating the need for complex runtime interactions. By adopting this approach, you can achieve a significant boost in performance and streamline your codebase without sacrificing functionality.

Lessons Learned and Humble Reflections

This quirky project took me on a rollercoaster ride of frustrations and triumphs. The legacy code I tackled and the bugs I unintentionally recreated made me realize the complexity that developers at OVH must have navigated. Now, as I wait for the OVH UI to load, I’m struck by a newfound understanding. Instead of complaints, I’m met with a knowing smile – a testament to the strange journey that led me to a deeper appreciation for the world of web development.

So, the next time you find yourself drumming your fingers on the table as a website crawls to life, just remember – there might be a dev out there, like me, who’s been through the rabbit hole and back, turning frustration into fascination.