为何我们前端从Vue 2迁移到Svelte?

22-12-02 banq

在使用 Vue 2 作为我们的前端框架将近两年之后,宣布不再维护此支持,因此我们决定迁移到一个新的框架。但是选择哪一个:Vue 3 还是 Svelte?

请注意,我们迁移后的目标也是为了改善我们的开发者体验,特别是类型检查、性能和构建时间。我们没有考虑React,因为它需要花费太多时间来学习,而且与Vue和Svelte相比,它没有提供一个开箱即用的解决方案。
Vue和Svelte两者都有相同的单文件组件的概念:逻辑(JavaScript)、结构(HTML)和样式(CSS)在同一个文件中。

因此,我们进行了一些研究,最终选择了Svelte。下面是对原因和方法的解释。

Svelte与Vue 3的比较
Svelte的保留率更好。对于我们的新前端,我们不得不从市场上的两个框架中选择,即Svelte和Vue 3。下面是过去五年中不同框架的保留率(会再次使用/(会再次使用+不会再次使用))的说明。数据是在JS调查领域的开发者中收集的,我们可以看到,Svelte排在第二位,而Vue 3只排在第四位。


这表明,过去使用过Svelte的开发者中,愿意再次使用它的人要比不愿意的人多。

Better typing for Svelte.

                    Vue2    Vue3    Svelte
Component-level typing    Yes    Yes    Yes
Cross-component typing    No    Yes    Yes
Typed events           No    No    Yes


Svelte提供了更好的类型体验,更简单的组件设计过程和内置的类型事件,使其对我们非常友好。

限制性的全局访问。在Svelte中,可以从其他文件中导入枚举,并在模板中使用它们,而Vue 3则没有这样的功能。




语法
就个人而言,我觉得Svelte的语法比Vue更优雅,更方便用户。你可以查看下面的代码块,自己看一下。

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: {{fullName}} 
    </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>


没有额外的HTML div <template>。在Svelte中,你可以直接编写你自己的HTML。

样式在Svelte中是自动作用域化的,这对维护性来说是个好点,有助于避免CSS的副作用。每个组件的样式都是孤立的,只影响该组件,不影响其父级或子级。

不需要计算属性来更新数据,在Svelte中,感觉更像是用纯javascript编码,你只需要专注于编写一个箭头函数。

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


在Svelte中,只有单括号是必要的:

//Svelte
{fullName}

//Vue
{{fullName}}


请注意,这个分析是基于上述具体的代码模板,并不打算对框架的差异进行详细解释。如需进一步信息,请随时上网查询。

添加纯js插件更简单。下面是一个使用Svelte和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} />


编译代码时没有虚拟DOM。Svelte和Vue的主要区别在于减少了浏览器和应用程序之间的层数,这使得任务的完成更加优化和快速。

自动更新。在声明变量的帮助下,Svelte可以自动更新你的数据。这样一来,你就不需要等待变化反映在你的虚拟结构中,从而获得更好的用户体验。

Svelte也有其缺点
当然,Svelte也有缺点,比如说社区相对较小,因为它是在2019年才出现的。但是,随着越来越多的开发者可能会接受它的品质和用户友好的内容,支持以及社区在未来可能会发展和壮大。在Github上已经有定期的和非常好的解释的更新,可以很容易地访问。

因此,在回顾了这一分析结果后,我们决定继续使用Svelte和Svelte Kit,尽管在迁移时SvelteKit仍在积极开发中。(见下文)




我们选择哪种方法来处理迁移?
时间:我们选择在8月进行迁移,当时使用该应用程序的人较少。

时间长度:我们花了两周时间将所有文件从Vue迁移到Svelte。

开发人员的数量:两名前端开发者全职工作了两周,另一名开发者全职工作了一周,所以有三名开发者参与。

工作流程:首先,我们使用Notion工具将我们的票据归属给团队的开发人员。然后,我们开始在Storybook中创建我们的新组件,最后,每个开发人员被赋予一些页面,在Svelte中重写。

作为一家初创公司,迁移比较简单,因为我们没有一千多份文件需要重写,所以我们可以快速执行。然而,我们冒着风险,在SvelteKit还在积极开发的时候就开始迁移,这导致我们在迁移后一个月才不得不做出重大的改变。但是SvelteKit专业的知识团队为我们提供了一个命令(npx svelte-migrate routes)和一个解释得非常清楚的迁移指南,真正帮助我们快速适应新的更新。

此外,在9月份,SvelteKit团队宣布,该框架终于进入了候选发布阶段,这意味着它的稳定性得到了保证。
 

1