Refactoring Legacy Code: Reviving GDocs with Deno and Svelte

February 2024

  • Uniting Legacy Code and Modern Tools

Looking pixel-similar to the original, with better response time


In the world of software development, legacy code can often pose significant challenges, hindering productivity and innovation. Such was the case with GDocs, a documentation generator for Lua that had been abandoned since 2021. Recognizing the potential of this tool and the need for modernization, I embarked on a mission to refactor and revitalize the GDocs codebase, showcasing the power of Deno and Svelte in the process.

Legacy Code Migration with Deno

The journey began with a migration from the outdated Yarn package manager to Deno, a secure runtime for JavaScript and TypeScript. This transition involved removing TypeScript dependencies and replacing external libraries like minimist with Deno’s built-in modules. By leveraging Deno’s streamlined tooling and security features, I aimed to simplify the development process and reduce dependency overhead.

Parsing Optimization and Performance Enhancement

One of the key challenges in the GDocs codebase was the large Node.js cache size and slow build times. Through meticulous optimization of file system reads and code logic, I was able to significantly improve parsing time and reduce build times from minutes to seconds. Deno’s enhanced parsing capabilities and restricted file system access played a crucial role in achieving these performance gains with minimal effort.

Keeping an eye on the bundle size was the key to smaller loading time after trivial fixes

Simplifying the HTML Generator with Svelte

The next hurdle to overcome was the complex HTML generator in GDocs, which relied heavily on React and large chunks of embedded database content. I conducted a proof-of-concept experiment with Svelte and its SPA routing capabilities, aiming to replicate the existing routing behavior while simplifying the codebase. The transition from React to Svelte proved to be straightforward, allowing for the removal of unnecessary build steps and dependencies.

Legacy React
Deno Node Modules Size (MB)524
Number of Dependencies1521
Deno Node Modules Size (MB)70.4
Number of Dependencies124

The drastic reduction in both node modules size and the number of dependencies reflects the efficiency and optimization achieved through the migration process.

Implementing Search Functionality

One of the pivotal enhancements in the revamped GDocs lies in the introduction of a powerful search feature. The migration to Deno and Svelte facilitated the implementation of a swift and precise search algorithm. By implementing a tailored search algorithm and leveraging Svelte’s reactive framework, users can now enjoy near-instantaneous search results. This overhaul not only accelerates the search process but also empowers users to discover relevant documentation swiftly and effortlessly.

Fast and accurate search

Streamlining CSS and Theming

To further streamline the codebase, I opted to switch from CSS-in-JS and complex styling frameworks to plain CSS with variables. By injecting theme variables at build time, I minimized CSS generation overhead and improved runtime performance. This decision also facilitated faster development and reduced the overall complexity of the project.

Performance Metrics and Optimization Results

The performance improvements achieved through the refactoring process were substantial. The initial rewrite with Svelte reduced load times from over a second to mere milliseconds, with significantly reduced data transfer and resource usage. Further optimizations, such as inlining SVGs and removing third-party fonts, pushed load times even lower, resulting in a highly responsive and efficient application.

It *is* fast, perfect 100 score

Legacy React SPA PSI

Legacy React SPA PSI PageSpeed Insights

Optimized Svelte Rewrite PSI

Optimized Svelte Rewrite PageSpeed Insights

Key Performance Indicators (KPIs):

MetricLegacy React SPAInitial Svelte RewriteOptimized Svelte Rewrite
Load Time (ms)181033354
DomContentLoaded (ms)168015052
Finish (ms)177036771
Total Transferred Data832 KB185 KB51.1 KB
Resources Used (KB)2700 KB362 KB224 KB

The KPIs provide a clear indication of the efficiency gained through the Svelte rewrite of GDocs. The load time was drastically reduced from 1.81 seconds to just 54 milliseconds in the optimized version, with significant improvements in DomContentLoaded and Finish times as well. Moreover, the total transferred data and resources used were significantly minimized, leading to a more streamlined and faster user experience.


The successful refactoring of GDocs using Deno and Svelte serves as a testament to the power of modern tools and techniques in revitalizing legacy codebases. By embracing simplicity, performance, and security, I was able to breathe new life into an abandoned project, demonstrating the transformative impact of strategic refactoring and migration efforts. As we continue to evolve in the world of software development, initiatives like this underscore the importance of adaptability and innovation in driving progress and success.

Also Read

  • Hotel Booking Engine


    Re-Implementing UX from popular booking website to make a smooth and responsive booking UX (even on mobile !) and see where it goes

    • AstroJS
    • REST
    • DatePicker
    • PoC
  • SuperH Emulator


    A simple yet powerful CPU emulator, capable of emulating a subset of SuperH instructions.
    It is built in Python with TKinter Canvas that provide a cool GUI.

    • SuperH Emulator
    • Python
    • TKinter
    • Canvas
    • CPU ISA
  • OVH Legacy analysis


    Re-Implementing the OVH Manager control panel in order to understand why it's so slow. Spoiler alert, Legacy code is to blame there !

    • SvelteKit
    • REST
    • Legacy
    • PoC

Want more ?

I've got a lot of other awesome projects

See them all !