Migrating from Vue 2 to Svelte

Migrating from Vue 2 to Svelte: A Comprehensive Analysis

Introduction

After relying on Vue 2 as our front-end framework for nearly two years, the announcement of discontinuation in support led us to explore alternative frameworks. The choice boiled down to Vue 3 or Svelte, with our primary goals being to enhance developer experience, specifically focusing on type checking, performance, and build times. React was not considered due to the steep learning curve and lack of out-of-the-box solutions, unlike Vue and Svelte. Both Vue and Svelte share the concept of single-file components, incorporating logic (JavaScript), structure (HTML), and style (CSS) in a unified file. This article delves into our decision-making process and the subsequent migration to Svelte.

1. Svelte Versus Vue 3

1.1 Retention Ratio

In our evaluation, Svelte demonstrated a higher retention ratio than Vue 3, based on data from the State of JS survey over the past five years. Svelte secured the 2nd position, indicating a greater willingness among developers to use it again, whereas Vue 3 occupied the 4th position.

1.2 Typing

Svelte outshone Vue 3 in terms of typing. It offered a superior typing experience with easier component design processes and built-in typed events, contributing to a more user-friendly development environment.

1.3 Restricted Global Access

Svelte’s ability to import enums from other files and use them in templates sets it apart from Vue 3, providing a more flexible and convenient development approach.

2. Escape Benchmark about Frontend Stack

2.1 Syntax

The Svelte syntax was deemed more elegant and user-friendly compared to Vue. A side-by-side comparison of code blocks illustrated the concise and clear syntax of Svelte, showcasing its simplicity and readability.

2.2 No Extra HTML Div

Svelte allows direct HTML writing without the need for extra div elements in the template, promoting a cleaner and more straightforward structure. Additionally, Svelte automatically scopes styles, enhancing maintainability and avoiding CSS side effects.

2.3 Computed Properties

In Svelte, the update of data does not require computed properties, providing a more straightforward coding experience. The focus remains on writing arrow functions, simplifying the code structure.

2.4 Simpler to Add Pure JS Plugins

The integration of pure JavaScript plugins, demonstrated through a syntax highlighting example with Svelte and Prism.js, showcased the simplicity and flexibility of adding external functionalities.

2.5 Compiling Code Without Virtual DOM

The reduction in layers between the browser and the app in Svelte results in optimized and faster task completion compared to Vue, which relies on a virtual DOM.

2.6 Automatic Updates

Svelte’s use of declared variables enables automatic updates, eliminating the need to wait for changes to be reflected in the virtual structure and providing a superior user experience.

3. Svelte’s Cons

While Svelte presented compelling advantages, it is essential to acknowledge its cons, including a relatively small community, given its emergence in 2019. However, the community and support may grow over time as developers recognize its merits.

4. Migration Process

4.1 Timing

The migration from Vue to Svelte was initiated in August during a period of lower app usage, ensuring minimal disruption.

4.2 Duration

The migration spanned two weeks, with two front-end developers working full-time for two weeks, accompanied by another developer working full-time for one week, involving a total of three developers.

4.3 Workflow

The migration process involved using the Notion tool to assign tickets to developers, creating new components in Storybook, and distributing pages among developers for rewriting in Svelte.

4.4 Risk Factors

As a startup with a manageable number of files, the migration process was expedited. However, the decision to migrate to SvelteKit during its active development phase posed challenges, necessitating significant adjustments a month after the transition. The SvelteKit team provided a command and detailed migration guide, facilitating adaptation to the new update.

5. Files & Components Organization

SvelteKit’s “folder-based routing” brought organizational benefits, allowing the splitting of pages into sub-pages and facilitating the reuse of standard variable names. Layouts integrated into associated routes enhanced organizational clarity within the project tree.

6. Gains from Migrating to Svelte

In addition to the benefits highlighted earlier, the migration to Svelte yielded several key advantages:

6.1 Increased and Smoother Performance

Compiled Svelte applications demonstrated lightweight characteristics, resulting in faster loading speeds compared to frameworks with embedded runtimes.

6.2 Better Developer Experience

SvelteKit’s utilization of the Vite bundler, a new generation JavaScript build tool, contributed to an enhanced developer experience, leveraging the latest JavaScript technologies.

6.3 Faster Code Execution

The absence of a virtual DOM in Svelte eliminated a layer, accelerating code execution and contributing to faster page changes.

6.4 Up and Running Server-side Rendering (SSR)

SvelteKit’s SSR capability ensured efficient platform operation even for users with limited internet connectivity or disabled JavaScript, allowing the loading of webpages with maintained interactivity.

6.5 Concise and Easy-to-understand Code

Svelte’s compilation of logic, structure, and style into a single .svelte file facilitated the creation of readable, maintainable, and component-oriented code.

6.6 Fixed Type Checking

The migration to Svelte resolved initial type checking issues, eliminating recurrent notifications and Sentry errors, thereby enhancing code stability.

Conclusion

In conclusion, the migration from Vue 2 to Svelte proved to be a strategic decision, driven by the advantages Svelte offered in terms of syntax, typing, and overall development experience. Despite the challenges associated with migrating to an actively developed framework, the benefits of improved performance, better developer experience, and concise code outweighed the initial hurdles. As SvelteKit stabilizes and gains community support, it stands as a robust choice for front-end development.