Svelte och SvelteKit – Kan det utmana Vue, React och Angular?

8 Jun 2021 - 4 minuters läsning

Frontend rör sig otroligt snabbt, kanske speciellt på webben och det kommer nya ramverk varje år.

Ett av de mest populära och snabbast växande är ett relativt nytt ramverk som heter Svelte (som nu blir SvelteKit). I den här artikeln går vi igenom allt från vad Svelte är och jämför med andra ramverk till vilka för- och nackdelar det har.

Graf över intresset för olika ramverk.

Svelte, Sapper SvelteKit

Om du har hört talas om Svelte så har du säkerligen också hört om Sapper och SvelteKit. Så här kommer en liten förklaring av vad de är och hur de hänger ihop.

Svelte skiljer sig från de flesta andra ramverk genom att det är ett så kallat compiler-as-framework och är egentligen både ett bibliotek med en egen syntax och flera egna komponenter men samtidigt en kompilator som genererar Vanilla JavaScript i compile time.

Sapper är ett backend-ramverk baserat på NodeJS som kompletterar Svelte med SSR (Server-Side Rendering) och i de fall det är möjligt, även SSG (Static Site Generation).

Men vad är SvelteKit kanske du tänker då?

I oktober 2020 annonserade Svelte-grundaren Rich Harris att Sapper 1.0 aldrig skulle släppas. Istället bygger det community som ligger bakom Svelte och Sapper, med Rich Harris i spetsen, nu ett nytt ramverk som kommer ersätta de båda - SvelteKit. Redan nu finns SvelteKit tillgängligt för test, men rekommenderas inte för produktionslanseringar.

Jämförelse med Vue, React och Angular

En stor skillnad mot ramverk som Vue, React och Angular är att Svelte är väl förberett för att fungera i micro-frontendlösningar då Svelte kompilerar på komponentnivå och inte holistiskt.

Svelte använder sig heller inte av en virtual DOM för att göra batch updates som Angular, Vue och React. Istället ser Svelte till att hitta det optimala sättet att göra uppdateringar direkt i DOM-trädet redan i compile time.

Resultatet av att kompilera Svelte blir därför en betydligt mindre bundle än vad som är möjligt med andra ramverk eftersom det i runtime inte finns någon referens kvar till Svelte eller någon annan runtime. Det som blir kvar är helt enkelt JavaScript.

Benchmark for boot-up time and download time.

Fördelar och nackdelar med Svelte

Det är svårt att hitta rent funktionella nackdelar med Svelte men det tål att sägas att det community som utvecklar ramverket fortfarande är ganska litet och det kommer såklart med en viss risk. Dokumentationen är bra, men inte på samma nivå som med äldre och mer utvecklade ramverk.

En annan nackdel med Svelte skulle kunna vara att det saknas många komponenter och tillhörande bibliotek som för många är självklara inom React, Vue eller Angular.

Fördelarna med Svelte är dock väldigt många. Här är några av de främsta:

Mindre kod
Enligt flera mätningar, både kvantitativa och kvalitativa så behöver utvecklare skriva ungefär 40 procent mindre kod med Svelte i jämförelse med React. Utvecklarupplevelsen är bland annat av denna anledning, helt oslagbar. För den som är van vid Vanilla JavaScript är det dessutom väldigt intuitivt.

Ett konkret och vanligt exempel på kod i Svelte i relation till sin kopia i React är följande:

import React, { useState } from "react";

export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
{" "}
<input type="number" value={a} onChange={handleChangeA} />{" "}
<input type="number" value={b} onChange={handleChangeB} />{" "}
<p>
{a} + {b} = {a + b}
</p>{" "}
</div>
);
};

Ovanstående är en bit kod i React som binder värden i två respektive inputfält till variablerna a & b och skriver ut variablernas värde och deras summa i ett matematiskt uttryck.

<script>

let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a + b}</p>

Ovanstående kod är motsvarigheten i Svelte.

Snabbt växande community
Även om det än så länge är helt ojämförbart i storlek och antalet utvecklare så växer communityt snabbt. Både andelen utvecklare som deltar i vidareutvecklingen av Svelte men också som dokumenterar, skriver komponenter och som använder ramverket i sina egna alster.

Mindre bundle size
Som vi varit inne på så blir slutprodukten av Svelte betydligt mindre i storlek än vad som är möjligt med ramverk som refererar till en runtime/lib. Resultatet av det är att slutanvändaren laddar ned innehållet snabbare och får en snabbare upplevelse.

Använder mindre minne
Mycket på grund av avsaknaden av en V-DOM men också flera andra anledningar så använder Svelte mindre minne jämfört med andra ramverk. Något som är en stor fördel för mobila enheter som inte har samma mängd arbetsminne som en traditionell dator.

Kräver mindre CPU
Svelte använder dessutom inte bara mindre minne utan är även mer sparsam med processorkraft. Detta är inte minst viktigt på enheter som saknar flerkärniga processorer där man ogärna vill låsa UI-tråden för att uppdatera element på en webb.

Sammanfattning om Svelte

Det råder en ganska het debatt om V-DOM vara eller inte på många håll. Mycket på grund av andra populära ramverk som fortfarande använder V-DOM men som är extremt slimmade och optimerade. Ett sånt exempel är Inferno JS som är mycket likt React på många sätt.

Ett resonemang runt det kan vara att världen på webben går emot mer micro-frontends och ett mer komponentbaserat tänk där vi inte gärna bygger och underhåller stora monolitlösningar där en V-DOM kanske (?) fortfarande spelar en viktig roll.

Svelte gör det på ett annorlunda sätt och är i allra högsta grad en värdig utmanare med ett växande community. För det är ett ramverk som gör det möjligt att bygga både snabbare, effektivare och mindre webbgränssnitt. Vill du få en längre genomgång så kan du titta på video nedan där jag djupdyker i Svelte och delar mina tankar. Och hör gärna av dig om du har frågor eller funderingar.

Referensmaterial

Svelte (officiella sajten)
Sapper (officiella)
SvelteKit (officiella)

Name

Skriven av

Marcus Nordquist