Refactoring Legacy Code: Reviving GDocs with Deno and Svelte

February 2024

Uniting Legacy Code and Modern Tools

Introduction

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.

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 Dependencies	1521

Svelte
Deno Node Modules Size (MB)	70.4
Number of Dependencies	124

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.

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.

Legacy React SPA PSI

Optimized Svelte Rewrite PSI

Key Performance Indicators (KPIs):

Metric	Legacy React SPA	Initial Svelte Rewrite	Optimized Svelte Rewrite
Load Time (ms)	1810	333	54
DomContentLoaded (ms)	1680	150	52
Finish (ms)	1770	367	71
Total Transferred Data	832 KB	185 KB	51.1 KB
Resources Used (KB)	2700 KB	362 KB	224 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.

Conclusion

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.