Svelte - Yksinkertainen on kaunista

Kirjoittanut Rasmus Lempinen | Aug 8, 2023 7:55:52 AM

Web-kehityksen, etenkin front-endin, maailma elää vilkasta elämää ja uusia ohjelmistokehyksiä (engl. Framework) tuntuu ilmestyvän jatkuvasti. Näistä uusista teknologioista kuitenkin vain murto-osa kykenee saavuttamaan sen seuraavan tason, joka vaaditaan, että ne otetaan vakituiseen käyttöön esimerkiksi yritysmaailman projekteissa.

Yksi vakuuttava haastaja front-end -kehityksen maailmassa on Svelte. Svelte on kerännyt viime vuosina kasvavissa määrin suosiota web-kehittäjien keskuudessa yksinkertaisuutensa ja tehokkuutensa ansiosta. Se on vuonna 2022 sijoittunut mm. State of JavaScriptin kiinnostavimpien web-ohjelmistokehysten kyselyssä 1. sijalle, ja StackOverflown rakastetuimpien web-ohjelmistokehysten kyselyssä 2. sijalle, joten Svelten potentiaali ei ole jäänyt kehittäjäyhteisön keskuudessa huomiotta. Svelteä myös ladataan tasaisesti kasvavaan tahtiin npm:stä, jossa kirjaston latauksia tehdään tällä hetkellä jo yli puoli miljoonaa viikossa, joka on noin 60 % enemmän kuin tasan vuosi sitten.

Tässä blogissa tutustutaan Svelteen ohjelmistokehyksenä, sen perusperiaatteisiin sekä niihin osa-alueisiin joissa se loistaa, ja myös asioihin, joissa sillä on vielä parannettavaa. Blogissa pohditaan myös voisiko Svelte horjuttaa esimerkiksi valta-asemassa olevaa Reactia tulevaisuuden web-käyttöliittymien pohjana.

Mikä ihmeen Svelte?

Svelte on JavaScriptiin perustuva web-sovellusten front-end -kehityksessä käytettävä avoimen lähdekoodin viitekehys. Sen alkuperäinen kehittäjä on Rich Harris, joka loi Svelten ensimmäisen version vuonna 2016 helpottaakseen omaa työtään datan visualisoinnin parissa.

Svelte on kuitenkin vuosien saatossa kehittynyt työkaluksi, jota voidaan hyödyntää kaikilla front-end kehityksen osa-alueilla.

Svelteä voidaan kutsua ohjelmistokehyksen lisäksi myös kääntäjäksi (engl. Compiler), sillä sen tarkoituksena on kääntää rakennetut komponentit ”puhtaaksi” JavaScriptiksi jo koontivaiheen (engl. Build) aikana. Tämän seurauksena mitään Svelte-spesifiä koodia ei tarvitse sovelluksen suorituksen (engl. Runtime) aikana lähettää käyttäjän selaimeen saakka, toisin kuin esimerkiksi suositummissa ohjelmistokehyksissä, Reactissa ja Vuessa. Käännösvaiheen ansiosta Sveltellä pystytään tuottamaan todella hyvin optimoituja, tehokkaita ja pienen koon omaavia web- sovellusten käyttöliittymiä.

Sveltellä on myös muita perustavanlaatuisia ominaisuuksia, jotka erottavat sen muista markkinoilla enemmän tunnetuista ohjelmistokehyksistä. Kotisivuillaan Sveltestä tuodaan esiin kolme sen tärkeimmistä pääpiirteistä:

1. Vähemmän koodia

a. Svelten tarkoituksena on vähentää koodin määrää, jonka kehittäjät joutuvat tuottamaan. Ideaalisesti vähemmän koodia tarkoittaa yleensä vähemmän tilaisuuksia tehdä virheitä ja täten tuoda bugeja sovellukseen. Koodin vähyys myös auttaa yksinkertaistamaan koodia ja helpottaa sen ymmärtämistä. Rich Harrisin arvion mukaan (v. 2019) React-komponentti on koodimäärällisesti keskimäärin 40 % suurempi vastaavaan Svelte-komponenttiin verrattuna.

2. Ei virtuaalista DOMia

a. Toisin kuin React ja Vue, Svelte ei hyödynnä laisinkaan virtuaalista DOMia, vaan se päivittää DOMia suoraan. Tämän mahdollistaa Svelten koontivaiheessa luotu optimoitu JavaScript, jonka ansiosta Svelte-sovelluksen ei tarvitse odottaa muutoksia suorituksen aikana tietääkseen, miten DOM päivitetään eri tilanteissa.

3. Aidosti reaktiivinen

a. Svelten tilamuuttujat ovat vain yksinkertaisesti muuttujia. Jos haluat uudelleenmääritellä jonkin muuttujan arvon ja käyttöliittymän reagoivan siihen, tarvitsee muuttujalle vain asettaa uusi arvo ”=”-merkillä. Tämän lisäksi reaktiivisia toisista muuttujista riippuvia lauseita määritellään ”$”-merkillä. Svelte ei monimutkaista tilamuuttujien määrittelyä ja uudelleenasettamista, kuten esimerkiksi React ja sen käyttämä useState-hook.

Näiden lisäksi Svelteen on sisäänrakennettuna kehittäjäkokemusta parantavia ominaisuuksia, kuten mm. direktiiveillä (engl. Directive) käytettävät animaatiot, tiedostokohtaiset (engl. Scoped) tyylit ja globaaliin tilanhallintaan käytettävät storet. Esimerkkejä Svelten syntaksista löytyy seuraavasta osiosta.

Svelte vastaan React

Svelte-sovellukset ovat esimerkiksi Reactista tuttuun tapaan komponenttipohjaisia. Mikä tekee Sveltestä helposti lähestyttävän on se, että sen syntaksi on hyvin lähellä ”puhdasta” JavaScriptiä, minkä ansiosta sen kirjoittaminen tuntuu web-kehittäjälle luonnolliselta. Svelte pyrkii selkeyttämään komponenttien rakennetta ”yhden tiedoston” (engl. Single file component) taktiikalla sisällyttämällä kaikki komponentin rakennuspalaset samaan tiedostoon. Svelte- komponentit koostuvat kolmesta tutusta osasta: script, markup ja style, joista jokainen on vapaaehtoinen.

Tehdään seuraavaksi yksinkertainen esimerkkikomponentti sekä Sveltellä että Reactilla. Komponentin tarkoitus on iteroida lista nimiä ja näyttää ne käyttäjälle. Lisätään vielä toiminnallisuus, joka mahdollistaa uusien nimien lisäyksen listaan. Toteutetaan kyseinen komponentti ensin Sveltellä, jolloin se näyttäisi suurin piirtein seuraavanlaiselta:

Svelten reaktiivisuus näkyy esimerkissä hyvin, sillä script-osassa määritelty muuttuja newName voidaan yhdistää input-kentän arvoon suoraan bind-direktiivillä. Tällöin input-kentän muutokset heijastuvat suoraan newName-muuttujan arvoon ilman erillistä onChange-funktion määrittelyä.

Svelte-komponentit eivät myöskään hyödynnä JSX:ää, kuten React, vaan ne käyttävät Sveltelle ominaista syntaksia. Esimerkissä käytetään Svelten each blokkia, joka on työkalu listojen interointiin komponentin markdown-osuudessa. Each blokki onkin Svelten ainoa tapa listojen iterointiin komponentin markdownin seassa. Tämä on huomattava ero Reactiin, jossa JSX mahdollistaa suoraan vapaan JavaScriptin käytön komponentin sisällä. Muita samantapaisia logiikkablokkeja Sveltessä ovat ehdollisiin lauseisiin if, else if ja else sekä asynkroniseen logiikkaan käytettävät await, then ja catch.

Sama komponentti toteutettuna Reactilla näyttäisi vastaavasti suunnilleen tältä:

Kuten huomataan, on koodia määrällisesti jo huomattavasti enemmän. Sama komponentti saatiin toteutettua Sveltellä 278 merkillä, kun Reactilla se vaati 525 merkkiä eli lähes kaksinkertaisen määrän. Tämä on tietysti vain yksi esimerkki eikä se tarkoita sitä, että React-koodia olisi aina määrällisesti näin radikaalisti enemmän, mutta se antaa kuitenkin hieman suuntaviivaa kyseisten ohjelmistokehysten eroihin.

Koodimäärän eroavaisuuteen vaikuttaa mm. Reactissa vaadittava kaksisuuntainen datan sitominen (engl. Two-way binding) ja komponentin tilanhallintaan käytettävä useState-hook. Kehittäjän on siis itse erikseen asetettava input-kentän arvo, kun käyttäjä siihen kirjoittaa (esimerkissä handleChange-funktio). Sveltessä tämä tapahtuu automaattisesti. Huomattavaa on myös se, että React-komponentin täytyy palauttaa vain yksi ylätason elementti, joka kyseisessä esimerkissä tarkoittaa komponentin rungon ympäröintiä ”turhalla” fragment (<></>) merkinnällä. Svelte-komponenteille samanlaista rajoitetta ei ole.

Tämä osio oli vain lyhyt pintaraapaisu Svelten syntaksista ja sen ominaisuuksista. Lisätietoa ja lukemattomia muita esimerkkejä löytyy helposti Svelten dokumentaatiosta.

Paljon hyvää, jonkin verran kehitettävää

Tehokkuus ja yksinkertaiset perusperiaatteet tekevät Sveltestä houkuttelevan ja varteenotettavan haastajan web-käyttöliittymien toteutuksessa. Svelten opettelun aloittamisen kynnys on matala, sillä siihen on helppo hypätä mukaan pelkällä HTML, CSS ja JavaScript osaamisella syntaksin yksinkertaisuuden ansiosta. Yksinkertaisuus mahdollistaa myös monien yleisimpien JavaScript- kirjastojen helpon integroinnin Svelte-projekteihin sekä yleisen JavaScript-dokumentaation hyödyntämisen kehityksen tukena. Jatkuvat korkeat sijoitukset kehittäjäyhteisön kyselyissä puhaltavat lisää tuulta purjeisiin, tuovat näkyvyyttä ja luovat lisää innostusta Svelten ympärille.

Svelten koontivaiheessa luotu optimoitu JavaScript-koodi ja siitä seuraava pieni pakettikoko tukee myös paremmin kestävän kehityksen periaatteita verrattuna suositumpiin ohjelmistokehyksiin. Mitä vähemmän koodia joudutaan ajon aikana viemään käyttäjän selaimeen, sitä vähemmän sovelluksen käytöstä aiheutuu päästöjä.

Mikään ohjelmistokehys ei kuitenkaan ole täydellinen. Svelten suhteellisen pieni (mutta todella intohimoinen) kehittäjäyhteisö, ja adaptointi ison maailman projekteissa verrattuna front-end - kehysten jätteihin tarkoittaa vähäisempiä resursseja, kolmannen osapuolen kirjastoja ja selkeitä parhaiden käytäntöjen suuntaviivoja. Haasteita saattaa tuoda myös JSX-tuen puuttuminen ja sitä korvaava Svelten oma syntaksi, joka saattaa tuntua rajoittavalta ainakin kokeneemmista React- kehittäjistä. Ekosysteemi ja kehittäjäkanta kuitenkin kasvavat jatkuvasti ja suuremmat kolmannen osapuolen työkaluja kehittävät yhteisöt, kuten TanStack ovat luoneet kehittämistään kirjastoista Svelte-yhteensopivia.

Komponenttikirjaston valinnassa saattaa Svelte-kehittäjällä mennä sormi suuhun, sillä selkeää Material UI:n tapaista vakioratkaisua ei tunnu vielä olevan muodostunut. Suurin osa vastaan tulevista komponenttikirjastoista tuntuu olevan joko beta-vaiheessa tai sen kehitys on hylätty kokonaan. Potentiaalisia vaihtoehtoja kuitenkin on muutamia, kuten ohjelmistokehysriippumaton daisyUI ja IBM:n avoimen lähdekoodin design systemiin perustuva Carbon Components Svelte. Kunniamaininnan ansaitsee myös SkeletonUI, joka on aktiivisessa kehityksessä ja todella kustomoitavissa, mutta on vahvasti sidottu Svelteen ja on yhteensopiva ainoastaan Svelten metaohjelmistokehys SvelteKitin kanssa.

Svelten tulevaisuus

Suurin kysymys, johon tämäkin blogi pyrkii vastaamaan, on se, onko Svelte valmis käytettäväksi suurissa yritystason projekteissa. Svelten tulevaisuuden kannalta merkittävä muutos tapahtui loppuvuodesta 2021, kun Svelten luoja Rich Harris siirtyi Vercelille jatkamaan Svelten

kehitystyötä kokoaikaisesti. Vercel toimii ainoastaan tukijana Svelten taustalla, minkä ansiosta se pysyy edelleen itsenäisenä avoimen lähdekoodin projektina.

Rich Harris itse oli pitkään sitä mieltä, että Svelte ei välttämättä ole sopinut isompiin yritysmaailman projekteihin. Hän on kuitenkin muuttanut mielipiteensä Vercelin tuoman tuen ansiosta, jonka seurauksena muutama Vercelin asiakas, mukaan lukien Schneider Electric, on siirtynyt käyttämään Svelteä. Siitä, onko ison Vercelin tapaisen yrityksen taustalla olemisesta pitkässä juoksussa enemmän hyötyä vai haittaa, voi olla monia mielipiteitä, mutta tähän mennessä Svelten suunta on näyttänyt edelleen positiiviselta. Muita esimerkkejä isommista yrityksistä, jotka hyödyntävät Svelteä ainakin jossain määrin ovat Ikea, Apple Music, The New York Times, IBM ja Philips. Lisää esimerkkejä löytyy Svelten omilta sivuilta.

Vastaus kysymykseen ”onko Svelte valmis yritysmaailman projekteihin” on siis kyllä. Uuden projektin teknologiavalintoja tehdessä on kuitenkin aina muistettava realiteetit ja punnittava juuri kyseisen projektin kannalta tärkeitä asioita. Jatkossa näitä valintoja tehdessä on kuitenkin hyvä pitää mielen päällä muitakin vaihtoehtoja kuin esimerkiksi se sama vanha React, ja miettiä olisiko aika antaa Sveltelle mahdollisuus.

Jäikö jotain hampaankoloon?

Jos kiinnostuit Sveltestä enemmän, suosittelen tutustumaan saatavilla oleviin resursseihin. Tässä lista omista suosikeista:

Svelte kotisivut
Svelte dokumentti
Svelte Society, Svelte-yhteisön kokoelma kaikesta Svelteen liittyvästä
Svelte Legos, npm-kirjasto, joka sisältää Svelte työkaluja laidasta laitaan
SvelteKit, Svelte-pohjainen metaohjelmistokehys

Tutustu aiheeseen lisää verkkosivuillamme:

Digitaaliset tuotteet ja palvelut

Tutustu ohjelmistosuunnittelun asiantuntijoihimme:

Tutustu Knowitlaisiin

Näytä koko julkaisu