新的前端框架Svelte有哪些創新？ - Jannik

banq發表於2021-04-28
前端框架

Svelte是一種構建使用者介面的全新方法。傳統的框架（如React和Vue）在瀏覽器中完成大部分工作，而Svelte則將其轉變為在構建應用程式時發生的編譯步驟。
它類似於React或Vue，但主要區別在於它是編譯器。這意味著Svelte特定的程式碼被編譯（考慮到轉換）為JavaScript，該JavaScript可被瀏覽器執行。Svelte可以擴充套件和更改JavaScript語法，因為編譯器最後將其編譯為JavaScript。因此，Svelte可以擺脫JavaScript語法提供的一些限制。

是一個編譯器
Svelte不僅是另一個JavaScript框架，還是一個編譯器，不需要將整個執行時系統載入到客戶端，除了大幅度提升效能之外還有許多優點，這些就是使Svelte與眾不同的原因。
原因之一是Svelte不使用虛擬DOM（vDOM）：Svelte不依賴vDOM和DOM之間的差異來更新DOM。其他提到的框架，例如React，Vue和Angular （編輯：Angular使用增量DOM）確實使用vDOM。您可以在Sveltes部落格文章中找到有關此問題的詳細資訊。虛擬DOM純屬開銷。
Svelte是一個編譯器，在構建時就知道應用程式中的情況可能會發生什麼變化，而不是在執行時等待完成工作。
 

融入微前端架構
Svelte是微前端MFE架構的絕佳選擇。MFE基本的概念是，不同的團隊可以分別開發前端的不同部分。團隊還可以選擇他們要使用的技術堆疊。因此，客戶端可能最終載入了不同版本的Angular，Vue，React等：某些微型前端實現可能導致依賴關係重複，從而增加了使用者必須下載的位元組數。
Svelte（也使用它的不同版本）不會帶來增加客戶端必須載入的位元組數量的不利影響。
 

很棒的REPL
Svelte有一個很棒的REPL。您可以毫不費力地開始玩耍並嘗試一些事情。這太棒了！試試看。
 

內建功能
Svelte內建了一些功能，無論如何，您幾乎都需要在任何應用程式中（至少是較大的應用程式）。
首先，無需其他依賴項或各種選擇之間的決定。

import { writable } from 'svelte/store';

export const count = writable(0);

export const increment = () => {
    count.update(n => n + 1);
}

就是這樣。您可以匯入count並increment遍歷您的應用程式。簡單的！

 

工具集合SvelteKit
SvelteKit完全採用無伺服器範例，並將在所有主要無伺服器提供商的支援下啟動，其“介面卡” API可以針對我們不正式迎合的任何平臺。
在撰寫本文時，該SvelteKit目前處於測試階段。
 

相關文章