Svelte og Svelte-rammeverket SvelteKit har fått veldig vind i seilene de siste par-tre årene, kanskje spesielt som et alternativ til React og React-rammeverk som Next.js.
I den siste State of JS-undersøkelsen tronet Svelte på toppen over teknologier utviklere er interessert i.
Svelte, React, Vue, Astro, Remix? Dette tror norske eksperter på i 2023
Men hva er egentlig Svelte og SvelteKit, og hvorfor er det noe du som utvikler skal bry deg om?
Vi har snakket med Dag Erik Løvgren, som er seniorkonsulent i Miles og spesialist på Svelte.
- Dag Erik, kan du forklare hva Svelte er for en fersk utvikler?
- Svelte er, i likhet med React og Vue, et komponent-rammeverk for webutvikling. Det prøver å løse mange av de samme problemene, men har en litt annen tilnærming. Der hvor for eksempel React og Vue sender koden for selve rammeverket til nettleseren og gjør jobben sin derfra, fungerer Svelte heller som en kompilator, svarer Løvgren.
- Svelte kompilerer koden du skriver ned til vanlig JavaScript som kirurgisk kan gjøre oppdateringene som trengs på DOM-en, og sender ingen rammeverk-kode til nettleseren. Dette gir Svelte et stort fortrinn i både "bundle size" og ytelse. Dermed funger Svelte veldig bra for animasjonstunge applikasjoner og embedded devices.
«I Svelte skriver man både HTML-malen, JS-koden, og CSS-stylingen i én og samme fil.»
- Utvikleropplevelsen har også et stort fokus hos Svelte. Man skriver vanlig HTML, JavaScript/TypeScript, og CSS uten noen spesiell syntaks. Reaktiviteten får man ut av boksen uten å måtte tenke på for eksempel "dependency arrays": Hvis variabel B er avhengig av A og A oppdaterer seg, så oppdaterer også B seg.
- I Svelte skriver man både HTML-malen, JS-koden, og CSS-stylingen i én og samme fil, en `.svelte`-fil. Dette kan være nytt for noen, men det venner man seg fort til, og nå skulle jeg ønske vi kunne gjøre det slik i alle rammeverk!
- Svelte er et alternativ, men som en kompilator kan det levere mindre bundles og mer effektive løsninger. Det gir brukerne en bedre opplevelse, i tillegg til å forenkle og gjøre det mer gøy å skrive for utvikleren.
Hvorfor snakker alle om Vite? Her er alt du må vite om Vite!
- Hva er det SvelteKit gir deg, som du ikke får med Svelte alene?
- Hvis man har erfaring med React og Next.js, så kan man se på Svelte og SvelteKit som omtrent tilsvarende, svarer Løvgren.
- SvelteKit er applikasjonsrammeverket til Svelte. Svelte leverer selve funksjonaliteten for å bygge applikasjonen din, mens SvelteKit tar seg av alt rundt man trenger for å lage en fullverdig og effektiv web-app. Blant annet gir det deg ruting (både SPA og MPA), rask bygging og en dev-server (ved hjelp av Vite), SSR, SSG, og mye mer.
- Svelte kan fint stå på egne ben, men da krever det en del konfigurasjon og oppsett hos utvikleren for å lage en fullverdig applikasjon.
- Med SvelteKit blir mange av disse tingene håndtert eller overlatt til enkel konfigurasjon, og man står igjen med en applikasjon som funker i alle slags miljøer og oppsett, og kan konsentrere seg om å levere funksjonalitet til brukerne.
- Er det noen vits å lære Svelte, hvis alle bruker React likevel?
- Etter min mening er det alltid en fordel å lære noe nytt! Det er lett å gå seg fast i vante mønstre, og jobber man alltid i samme språk og rammeverk blir dette enda lettere. Ved å prøve ut et annet rammeverk kan man bli tvunget til å gjøre ting på en litt annen måte, og kanskje det gir idéer til hvordan man kan forbedre koden man skriver til daglig? Det har hvert fall jeg opplevd ved flere anledninger.
- Det er ikke tvil om at React er veldig utbredt i dag, men hele 21 % av utviklerne som svarte på State of JS 2022 hadde brukt eller bruker Svelte, så det er ikke så lite som man kanskje kan tenke.
- Selv har jeg brukt det i noen små applikasjoner på jobben, i tillegg til mange hobbyprosjekter. Jeg vet også om flere bedrifter her i Norge som faktisk har det som sitt hovedrammeverk for frontend.
Hva er greia med Terraform og infrastruktur som kode? - Bratt læringskurve
- I React har du veldig mange verktøy, pakker og plugins. Er det noe du går glipp av om du velger Svelte?
- Man vil nok ikke få tak i like mange pakker, eller alle pakkene man er vant til å bruke i React. Dette vil jeg si at spesielt gjelder komponent-biblioteket, men utenom det er det et godt utvalg av pakker for Svelte eller pakker som er rammeverk-agnostiske.
- Behovet for plugins og verktøy for bygging og deployment blir i stor grad håndtert hvis man bruker SvelteKit, og jeg har sjeldent opplevd at det er noe som mangler der, svarer Løvgren.
- Svelte leverer også veldig gode plugins for blant annet IntelliJ og VSCode (spesielt god i VSCode) som er til stor hjelp, spesielt når man begynner å lære Svelte.
«Jeg ville definitivt kalt det produksjonsklart.»
- Hvor stabilt og modent er Svelte?
- Svelte er nå på versjon 3, og SvelteKit på versjon 1. Svelte ble laget tilbake i 2016, så det har begynt å få noen år på baken. I versjon 1 og 2 var det kanskje litt umodent, men med versjon 3 har det virkelig funnet formen sin.
- Det finnes fortsatt bugs, som i all programvare, men skikkelige show-stoppere er det ikke mye av. Jeg ville definitivt kalt det produksjonsklart. Det eneste jeg kan peke på er at det finnes noen utfordringer med TypeScript-støtten i HTML-templatene man skriver, men det påvirker ikke sluttproduktet og jobbes med av Svelte-teamet.
- SvelteKit er litt ferskere. Versjon 1 kom først ut i desember 2022, så der kan det nok enda være noen "barnesykdommer".
- Men med skaperen av Svelte, Rich Harris, ansatt hos Vercel kan man se mye til utveksling av erfaring og idéer mellom SvelteKit og Next.js. Med full backing av SvelteKit fra Vercel vil jeg si man er i trygge hender om man velger SvelteKit i applikasjonen sin.
– Astro gir deg superkrefter! mener Stian, som svarer på alt vi lurer på
- Når holder det med "bare" Svelte, uten SvelteKit?
- I de fleste tilfeller vil jeg nok anbefale å bruke SvelteKit. Det forenkler veldig mye, og man får en applikasjon som er skalerbar og klar for deploy til hvor som helst uten å måtte bruke tid på oppsettet.
- Unntaket er kanskje hvis man har et veldig spesifikt miljø man skal kjøre applikasjonen i, og trenger mer kontroll over rammene rundt selve applikasjonen.
- Ren Svelte kan også være et godt alternativ hvis man har en applikasjon som kjører et annet rammeverk, men man trenger en komponent som for eksempel er veldig animasjonstung.
- Det er ikke noe i veien for å putte en bit Svelte inn i en applikasjon som kjører et annet rammeverk, spesielt fordi Svelte ikke bundler med noe av rammeverk-koden!
- Hva er de største fordelene med Svelte fremfor React?
- La oss ta SvelteKit først: Her vil jeg si det nesten er et 1-1-forhold mellom SvelteKit og Next.js. De løser omtrent de samme problemene, og på veldig like måter. Så der vil jeg si man stiller ganske likt, svarer Løvgren.
- Fordelene med å velge Svelte er:
- Det er gøy å skrive! Utvikling skal være gøy. Har vi det gøy, jobber vi bedre og lager bedre ting. Svelte føles utrolig letthendt å skrive, og man opplever mer flyt i arbeidet.
- Utvikleropplevelsen. Blant annet måten Svelte har implementert reaktivitet på gjør det veldig enkelt å holde oversikt over hva som oppdaterer seg når i koden. Måten Svelte lar deg skrive all HTML, JS, og CSS i én fil gjør det også veldig lett å bygge og tenke i komponenter.
- Enkelt med animasjoner. Svelte leverer innebygd funksjonalitet for animasjoner som er enkle å bruke, også for å animere ting ut og inn av DOM-en. Dette gjør det enkelt å lage spennende brukergrensesnitt som oppleves levende for brukeren. Hvis noen har vært frustrert over å prøve å animere ting som forsvinner ut av DOM-en i React, men opplever at det alltid bare forsvinner brått, så er Svelte for deg!
Nå bruker han Remix til alt: – Det løser mange vanskelige ting med React
«Med Svelte må man regne med å skrive litt mer selv, på godt og vondt.»
- Er det noen ulemper?
- Mengden av pakker og spesielt komponent-pakker kan være en hindring. Med Svelte må man regne med å skrive litt mer selv, på godt og vondt.
- Ellers er det lite ulemper jeg kan komme på. Men kanskje jeg enda er nyforelsket i Svelte, selv etter 3 år?
- I Svelte har du ingen virtuell DOM, slik du har i React. Kan du si litt om det?
- Vi har nok alle hørt uttrykket "The Virtual DOM is fast". Og det stemmer på en måte. Den virtuelle DOM-en er raskere enn den vanlige DOM-en. Men den kommer i tillegg til den vanlige DOM-en.
- En virtuell DOM fungerer som en kopi av den vanlige DOM-en, som et rammeverk kan gjøre diffs på mellom hver render for å se om det er noe i den vanlige DOM-en som må oppdateres. Men det å gjøre denne diffen koster. Så uttrykket burde egentlig være "The Virtual DOM is usually fast enough", i hvert fall ifølge skaperen av Svelte, Rich Harris.
- Svelte løser dette på en annen måte. Ved å fungere som en kompilator kan Svelte finne ut, ved compile-time, hva som kan endre seg i DOM-en, og legge på vanlig JavaScript for å håndtere dette. Da slipper Svelte å gjøre noen diff mot en virtuell DOM hver render, den lar bare JavaScript-en håndtere endringene når de skjer. Dette blir derfor mer effektivt, for man slipper overheaden av den virtuelle DOM-en og diffing – med noen få unntak.
- For min del håper jeg andre rammeverk ser til Svelte for inspirasjon, for her tror jeg det kan være mye å hente i både effektivitet og bundle size. Men la oss se hva fremtiden bringer!
Derfor velger de Rust: - JavaScript brukte minutter, Rust brukte sekunder
- Bruker dere Svelte i noen prosjekter der du jobber?
- Hos oss har vi brukt det i noen få, små prosjekter, mest for å teste det ut og se hvordan det ville passe inn i vårt utviklingsmiljø, svarer Løvgren.
- Man trenger veldig få ting for å få applikasjonen opp å kjøre, kontra for eksempel en React-applikasjon. Man trenger for eksempel ingen konfigurasjon for å få TypeScript eller SASS til å fungere, man trenger bare å installere pakkene så fungerer det. Svelte har derfor vært idéell for for eksempel 404-sider eller landingssider.
- Vi har hatt svært god erfaring med de prosjektene vi har brukt det i, men firma-spesifikke og React-baserte designbibliotek kan nok gjøre steget ut til de store prosjektene vanskelig for øyeblikket. Men jeg lever hvert fall i håpet – og bedriver selvfølgelig lobbyvirksomhet på vegne av Svelte.
«Vi har hatt svært god erfaring med de prosjektene vi har brukt det i.»
- Er det vanskelig å lære Svelte?
- Jeg følte Svelte var veldig enkelt å lære seg. Med erfaring fra andre frontend-rammeverk fra før føltes ikke læringskurven bratt. En litt annen måte å skrive på, men den kommer man fort inn i, og så lærer man seg å bruke strukturene i rammeverket over tid.
- SvelteKit har også en læringskurve, men hvis man har jobbet i andre applikasjonsrammeverk før, som Next.js eller Remix, burde mye av det være lett gjenkjennelig.
- Svelte har selv en veldig god interaktiv tutorial som tar deg gjennom alle featurene de har. I tillegg kan jeg anbefale en workshop min kollega, Alexander Castillo, og jeg har laget. Den tar for seg en del av de samme tingene i Sveltes egen tutorial, men med en litt morsommere innpakning: Gather your Party with Svelte.
