Building a Faster Clone of the OVH Manager

January 2023

• A Journey into Legacy Code and Modern Solutions

Introduction

In an effort to address performance issues plaguing the OVH Manager, a project was initiated to identify and rectify slowdown bottlenecks. This endeavor focused on rebuilding key functionalities to achieve significant improvements in loading times and user experience on a one-night project time window.

The OVH manager, a tool for managing various web services, had been my bane for too long. I jokingly told a friend, “I could make this faster,” and with that casual challenge, the project was born. Armed with a day (or rather night) of determination, I set out to create a simplified clone, aiming to outpace the sluggish dashboard

Identifying Legacy Constraints

Upon analysis, it became evident that the OVH Manager’s reliance on legacy frameworks such as React and Angular was a significant contributor to its slow performance. The convoluted structure of CSS and non-scoped styles further compounded the issue, necessitating a strategic overhaul of the codebase.

As I delved into the project, it became apparent that the OVH manager’s slow speed was not just a coincidence. To test it reliably, I even put timeout and actionable slowdowns on some endpoints.

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.

Implementing Modern Solutions

To address these challenges, modern solutions were employed, including the adoption of Svelte and SvelteKit for improved efficiency and responsiveness. By leveraging server-side rendering (SSR) and pre-loading mechanisms, loading times were drastically reduced, resulting in a more seamless user experience.

Enhanced Speed and Efficiency

The implementation of pre-loading user data on the server side led to a remarkable threefold increase in loading speed. Additionally, API mocking using SvelteKit’s rest endpoints ensured a seamless transition between user interactions, further optimizing performance.

Pre-loading user data on the server side was the killer feature. This meant users didn’t have to wait data to fetch from the API. It resulted in 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 Recommendations

For organizations grappling with legacy code, the following recommendations emerged from this project:

• Migration to Modern Frameworks: Consider transitioning to modern frameworks like Svelte and SvelteKit to leverage their efficiency and responsiveness.

When encountered 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.

• Optimization of CSS: Streamline CSS structures and adopt scoped styles to minimize complexity and enhance performance.

• Integration of Pre-Loading Mechanisms: Implement server-side pre-loading of critical data to expedite loading times and improve user satisfaction.

Conclusion

The project to rebuild the OVH Manager uncovered critical insights into the challenges posed by legacy code and the potential for modern solutions to address performance issues. By implementing strategic optimizations and embracing contemporary frameworks, significant improvements in loading speed and user experience were achieved. As organizations continue to navigate the complexities of legacy systems, the lessons learned from this project serve as a valuable guide for future endeavors in code optimization and modernization.