Is Vue 3 the best choice? After two weeks of migrating from Vue 2 to Svelte: faster code execution and better experience

Finishing | Dongmei, Nuclear Cola

Should I choose Vue 3 or Svelte?

The problem of architectural selection is a difficulty that every web developer cannot avoid.

The architecture is the foundation of the entire IT system, and a wrong selection may cause huge financial and human losses. Now with the rise of various new applications, it is very difficult for developers to choose Bootstrap, Angular, React, Vue or Svelte. And with the release of Vue 3 and the upcoming end of maintenance of Vue 2, many companies have begun to consider upgrading. More than one of them has chosen to migrate from Vue to Svelte and is satisfied with the performance of Svelte.

Sophie is a UI/UX designer/front-end developer. After knowing that Vue 2 is about to stop maintenance, her team struggled in choosing a new architecture, the reason for the final choice, the whole process of migration and migration After effects and benefits.

Why migrate?

Sophie said that the reason for the migration is that on the one hand, he knew that Vue 2 was about to stop maintenance, and on the other hand, he wanted to improve the developer’s working experience, especially the core indicators of type checking, performance and build time. The reason why React is not considered is that its learning process is too time-consuming, and it does not provide an out-of-the-box solution. Vue and Svelte have a significantly greater advantage in this regard. In addition, the single-file components of Vue and Svelte share the same concept: the logic is expressed by JS, the structure is based on HTML, and the style is defined by CSS.

After conducting a series of related studies, Sophie’s team finally chose Svelte.

The debate about which is better, Vue 3 or Svelte, has always been a hot topic in front-end circles. Vue author You Yuxi also created a repository on GitHub last year to compare Svelte and Vue 3 components.

For the sake of fairness, You Yuxi chose todomvc for construction comparison, and then listed a series of steps. The final conclusion is:

• Svelte single component is about 70% larger than Vue 3 single component in normal mode (this 70% refers to the size comparison of current todomvc components, and does not mean that all Svelte components are 70% larger than Vue 3 components), in SSR mode Down 110%;

• In theory, if an app contains more than 15.04 / 0.78 roughly equal to 19 todomvc sized components, then the Svelte app will end up being bigger than the Vue app. In SSR scenarios, this threshold will be lower. For a project, when writing more than 19 components (SSR mode is 13 components), the advantage of Svelte compared with Vue 3 does not exist.

Warehouse Address:

https://ift.tt/iym14ok

Why choose Svelte?

Compared with Vue 3, Svelte has obvious advantages

In Sophie’s project, her team believes that Svelte has the following advantages over Vue 3:

First, Svelte has a higher retention rate. The figure below shows the retention rate of different frameworks in the past five years. The retention rate formula is: will use again / (will use again + will not use again). This part of the developer data comes from the JS Status Survey, and it can be seen that Svelte ranks second in terms of retention rate, while Vue ranks fourth.

In the 2021 front-end development framework retention rate list, Svelte ranks second and Vue 3 ranks fourth.

From this point of view, developers who have used Svelte are generally willing to use it again.

Second, Svelte’s type mechanism is more complete.

Svelte has a simpler component design process and built-in typed events, resulting in a better type experience that is more in line with human needs.

Third, restrict global access. When using Svelte, enums can be imported from other files and used in templates; Vue 3 cannot do this.

Front-end stack Escape Benchmark summary

Fourth, the syntax is more concise. Sophie said that she personally thinks that Svelte’s syntax is more elegant and easier to use than Vue. At the same time, you can refer to the following code to experience the difference between the two.

Svelte:

 <script> let firstName = ""; let town = ""; $: fullName = "Full name: " + firstName + ' ' + lastName; const reset = () => { firstName = ""; lastName = ""; } </script> <main> <div> <label>First name</label> <input type="text" bind:value={firstName}> <label>Last name</label> <input type="text" bind:value={lastName}> <button on:click={reset}>Reset</button> </div> <div> {fullName} </div> </main> <style> main{ background-color: white; } </style>

Vue:

 <template> <main> <label>First name </label> <input type="text" v-model="firstName"/> <label>Last name </label> <input type="text" v-model="lastName"/> <div> Full name: </div> <button @click="handleReset">Reset</button> </main> </template> <script setup> import { ref, computed } from 'vue' const firstName = ref('') const lastName = ref('')
 const fullName = computed(() => { return firstName.value + " " + lastName.value; })
 function handleReset() { firstName.value = "" lastName.value = "" } </script> <style scoped> main{ background-color: white; } </style>

Fifth, no extra HTML div <template> . In Svelte, developers can directly write their own HTML.

Sixth, styles are automatically scoped in Svelte. This is great news for maintainability and helps avoid unintended CSS effects. Since each component is styled independently of the other, the problem only affects that specific component, not its parent or child components.

Seventh, updating data does not require computed properties. Using Svelte feels more like writing pure JavaScript code. Developers only need to focus on writing arrow functions:

 const reset = () => {firstName = "";lastName = "";}

In Svelte only single brackets are required:

 //Svelte {fullName}
 //Vue

Please note that the conclusions here only apply to the specific code templates mentioned above, and are not a complete account of the differences in the framework itself.

Eighth, it is easier to add pure js plug-ins. The following is a use case of syntax highlighting integration of Svelte and Prism.js:

 // Prism.svelte <script> import Prism from 'prismjs';
 export let code; export let lang = 'javascript'; </script>
 <pre><code class="language-{lang}">{@html Prism.highlight(code, Prism.languages[lang], lang) }</code></pre> // App.svelte <script> import Prism from './Prism.svelte'; let code = 'export const hello =\n\t(name) => {console.log(`Hello ${name}!`)};'; </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-dark.min.css" integrity="sha512-Njdz7T/p6Ud1FiTMqH87bzDxaZBsVNebOWmacBjMdgWyeIhUSFU4V52oGwo3sT+ud+lyIE98sS291/zxBfozKw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <Prism {code} />

Ninth, code can be compiled without a virtual DOM . Another major difference between Svelte and Vue is that it reduces the number of layers between the browser and the application, thereby enabling performance optimization and faster task completion.

Tenth, automatic update . By declaring variables, Svelte can automatically update developer data. This avoids having to wait for changes to be reflected in the virtual structure, resulting in a better development experience.

Of course, Svelte also has shortcomings

Of course, Svelte also has its own shortcomings, such as a small community. This is inevitable, after all, Svelte was just born in 2019. But as more and more developers appreciate its high quality and user-friendly design, the support and technical community will surely grow. In addition, there are already regularly released and fairly complete update notes on GitHub, which are always available for reference.

All in all, even though Svelte Kit was still in development at the time of the migration, Sophie and the team finally decided to give the holy vote to Svelte and Svelte Kit after considering various factors.

Escape Benchmark on front-end stack

Migration method

When : The Sophie team chose to migrate in August because application usage was low at this time.

Time-consuming: The whole migration process took a total of two weeks, and all files were migrated from Vue to Svelte.

Number of developers involved in the migration : Two full-time front-end developers were involved in the migration for two weeks, and one full-time developer was involved for a week. So a total of 3 developers were used.

Workflow : First, use the concept tool to split the migration project into work orders directed to each developer. After that, the technical team started creating new components in Storybook, and finally the individual developers rewrote the pages they were responsible for in Svelte.

Sophie said that as a start-up company, their migration work is not particularly complicated, and there are not many files that need to be rewritten, so the progress is fast. Admittedly, migrating a project from Vue to Svelte Kit, which is still under active development, was a bit of a risk, with the result that breaking changes were required only a month after the migration was complete. However, the professional team of Svelte Kit has a strong business and provided the Sophie team with a command (npx svelte-migrate routes) and a very complete migration guide to help them quickly adapt to this update.

In addition, in September this year, the Svelte Kit team announced that the framework has officially entered the release candidate stage, which means that its stability has finally been guaranteed.

Organization of files and components

Sophie’s team has benefited greatly from the “folder-based routing” design of the Svelte Kit. They can use this to split the page into subpages to reuse standard variable names like “loading”, “submit”, etc. Additionally, layouts are integrated directly into associated routes, increasing the level of organization within the tree and making access less difficult.

Lessons Learned During Migration

According to Sophie, in addition to the aforementioned benefits, there are a few other key factors worth exploring:

• Higher performance, smoother experience . After the compilation was completed, the technical team immediately felt the “slimming” effect of the application. Compared with other frameworks, Svelte improves loading speed and helps applications say goodbye to the “runtime” that was once embedded outside the logic code.

• Better developer experience . Svelte Kit uses the Vite bundler, a next-generation JavaScript build tool that leverages in-browser ES modules and “compile-to-native” bundlers to bring teams the best development experience in the latest JS technologies.

• Faster code execution . Say goodbye to virtual DOM, and also reduce one layer when performing changes on the page.

• Get Server Side Rendering (SSR) up and running . If the end user’s network connection is poor, or JavaScript is not enabled, the Svelte platform can still function efficiently with the help of SSR, ensuring that the user continues to load web pages when they are not connected to the Internet.

• The code is more concise and easy to understand . Svelte greatly optimizes the readability and maintainability of component-oriented code by combining logic (JS), structure (HTML) and styling (CSS) in the same file. It is unique in that all elements are compiled in the same .svelte file.

• Fixed type checking . Since migrating to Svelte, type checking can finally solve a series of problems in the past. Previously, Sophie’s tech team had to deal with a lot of recurring Sentry notifications, but that’s no longer the case – those annoying false positives are gone (see image below).

Sentry error notification example on Discord

Sophie said that they are very satisfied with the effect of the migration, she said: “Overall, from Vue to Svelte has brought us a more pleasant developer experience, allowing us to focus on releasing functions faster and better on the Escape platform. This not only saves the project team itself, but also improves the experience of end users.”

The text and pictures in this article are from InfoQ