為何我們前端從Vue 2遷移到Svelte？

banq發表於2022-12-02
前端Vue

在使用 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只排在第四位。

為何我們前端從Vue 2遷移到Svelte？
這表明，過去使用過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則沒有這樣的功能。

為何我們前端從Vue 2遷移到Svelte？


語法
就個人而言，我覺得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仍在積極開發中。(見下文)

為何我們前端從Vue 2遷移到Svelte？


我們選擇哪種方法來處理遷移？
時間：我們選擇在8月進行遷移，當時使用該應用程式的人較少。

時間長度：我們花了兩週時間將所有檔案從Vue遷移到Svelte。

開發人員的數量：兩名前端開發者全職工作了兩週，另一名開發者全職工作了一週，所以有三名開發者參與。

工作流程：首先，我們使用Notion工具將我們的票據歸屬給團隊的開發人員。然後，我們開始在Storybook中建立我們的新元件，最後，每個開發人員被賦予一些頁面，在Svelte中重寫。

作為一家初創公司，遷移比較簡單，因為我們沒有一千多份檔案需要重寫，所以我們可以快速執行。然而，我們冒著風險，在SvelteKit還在積極開發的時候就開始遷移，這導致我們在遷移後一個月才不得不做出重大的改變。但是SvelteKit專業的知識團隊為我們提供了一個命令（npx svelte-migrate routes）和一個解釋得非常清楚的遷移指南，真正幫助我們快速適應新的更新。

此外，在9月份，SvelteKit團隊宣佈，該框架終於進入了候選釋出階段，這意味著它的穩定性得到了保證。
 

相關文章