Frameworkit, Osa 3: Svelte – Kääntäjä nopeuttaa verkkosivun päivittämistä ja säästää ohjelmistokehittäjän työtä

Olemme käsitelleet kahdessa aiemmassa blogitekstissämme kokeilemiamme verkkosivukehitystä helpottavia UI-frameworkeja eli kirjastoja, Flutteria ja Next.js:ää. Kolmantena esittelyvuorossa on Rich Harrisin kehittämä Svelte. 

Svelte on käyttöliittymiä varten kehitetty avoimen lähdekoodin UI-kääntäjä – se ei siis suoranaisesti ole framework, vaan sen sijaan kääntäjä tarjoaa kirjaston tyyppisiä työkaluja käyttöliittymien rakentamiseen. Svelte toimii hieman eri tavalla kuin esimerkiksi React tai Vue, jotka ovat todella suosittuja ja suurilta osin samaan käyttötarkoitukseen suunniteltuja frameworkeja. 

Näiden kirjastojen ajatus on siinä, että verkkosivustolla lähetettävä HTML-rakenne on aluksi hyvin tynkä, ja JavaScriptillä muodostetaan lähetyksen jälkeen malli tavoitellusta rakenteesta, minkä myötä sivustolle luodaan halutut HTML-elementit. Käytännössä sivuston ulkoasu rakennetaan siis itse suorituksen aikana.

TypeScriptillä kirjoitetun Svelten tehokkuus perustuu siihen, että sen kääntäjä lisää käännösvaiheessa käyttäjän kirjoittamaan koodiin viitteitä, jotka päivittävät tarpeen mukaan HTML-rakennetta juuri oikeasta kohdasta. Tämä on yleisesti ottaen tehokkaampaa kuin Reactin ja Vuen tapa, jossa sivun rakenne käydään joka muutoksen jälkeen uudestaan läpi ja tarkastetaan, mihin kaikkialle muutoksen kuuluu vaikuttaa.

• Avoimen lähdekoodin Svelten tavoitteena on mahdollistaa tehokkaiden verkkosivujen kehittäminen ilman turhaa koodia     
• Svelte perustuu sivuston HTML-rakenteen tehokkaaseen päivitykseen ilman Javascriptissa ylläpidettävää kopiota siitä
• Itse kääntäjä on kirjoitettu Microsoftin TypeScriptillä

Vahvuutena verkkosivun nopeampi päivittäminen ja suorituskyvyn lisääminen

Svelte kääntää kaikki sillä kuvattavat HTML-mallit suoraan olemassa olevaksi ja tarkoituksenmukaiseksi koodiksi, joka siirtyy kääntämisen jälkeen tiettyyn polkuun sivustolla. Kääntäjä siis muodostaa suoraan näytettävän mallin ja muodostaa siitä koodin, joka manipuloi rakennetta käyttäjän toiminnan mukaan. Svelte ei siis sinänsä muodosta erillistä, näkyvää HTML-mallia päivittävää rakennetta taustalla vaan päivittää sitä suoraan ilman välikäsiä.

Kääntäjän vahvuus on juuri siinä, että se tarjoaa verkkosivustoille nopeampaa päivittymistä. Lisäksi se on myös itse laitteelle kevyempi: selaimesta ei kulu prosessitehoa taustan virtuaalisen rakenteen käsittelyyn, kun valmiiksi käännetty näytettävä rakenne osaa päivittää itseään suoraan tarvittavalla tavalla.

Myös sivuston Javascriptillä koodattu logiikka on käännösvaiheessa optimoitu niin, ettei ylimääräisiä rakennetta päivittäviä prosesseja tarvitse suorittaa. Sveltessä toiminnallisuuksien koodaus ei vaadi ohjelmoijalta Reactille ominaista erillisten tilanhallintaominaisuuksien opettelua, vaan ohjelmoija voi keskittyä muokkaamaan haluttua dataa, minkä jälkeen kääntäjä lisää kirjoitetun koodin joukkoon tarvittavat, sivun rakennetta päivittävät osat.

Käytännössä kyseessä on uusi käyttöliittymäohjelmointiin ja käyttöliittymien kehittämiseen hyödynnettävä tekniikka, joka mahdollistaa omalta osaltaan tehokkaamman käyttöliittymän rakentamisen. 

• Svelte rikastaa kirjoitetut HTML-rakenteet käännösvaiheessa rakennetta tarkasti päivittävällä koodilla
• Käyttäjälle tämä näkyy verkkosivuston nopeana päivityksenä ja laitteen kuormitusta keventävänä ominaisuutena
• Samalla se mahdollistaa tehokkaamman käyttöliittymien rakentamisen

Svelten tarjoamat hyödyt?

Sveltellä toteutettu sivusto tuntuu käyttäjälleen nopealta. React-sivustoilla käyttäjä saattaa joissakin tilanteissa nähdä pientä “tökkimistä” sivulla esimerkiksi animaatioissa, näkymää vaihdettaessa tai tekstikenttään kirjoitettaessa. Tämä johtuu usein siitä, että sivuston optimointi on jätetty Reactin osalta vähäiseksi. Svelten kääntäjä hoitaa suuren osan optimoinnista automaattisesti, jolloin rakenteen muutokset tapahtuvat mahdollisimman tehokkaasti.

Ohjelmistokehittäjille Svelten hyötyihin puolestaan kuuluu, että se on tekniikkana selkeästi ymmärrettävä. Siinä ei myöskään ole paljoa boilerplate-koodia, eli kääntäjää varten ei tarvitse kirjoittaa runsasta määrää ylimääräisiä, kehittäjien manuaalista työtä lisääviä ja jokaisessa sovelluksessa vaadittavia koodinpätkiä, jotta sovellus toimii. Kehittäjä voi siis kirjoittaa vain juuri sitä, mitä haluaa ohjelman loogisesti käsittelevän käyttäjän tehdessä käyttöliittymässä erilaisia asioita.

Svelten avulla voidaan siis käytännössä minimoida kehittäjän tekemä työ uusien ominaisuuksien valmistumiseksi, eikä selaimen itsessään tarvitse tehdä niin paljon töitä toteuttaessaan sivuston toiminnallisuuksia.

Entäpä kehityskohteet?

Svelten ongelmana voidaan ainakin tällä hetkellä nähdä se, että tähän mennessä sillä tehtyjä käytännön toteutuksia on verrattain vielä vähän. Vaikka tekniikka on toimiva, ei ole kannattavaa lähteä toteuttamaan hyvin räätälöityä sovellusta, joka sisältää teknisesti monimutkaisempia näkymiä tai toimintoja. Kaikki räätälöidyt ominaisuudet pitää nimittäin toteuttaa itse. Toki sekin on täysin mahdollista, mutta kyseinen työ vie ainakin tällä hetkellä rutkasti aikaa – ja tämän työn voi välttää toisilla frameworkeilla.

Jos vertaillaan Svelteä vaikkapa mainittuihin Reactiin ja Vueen, kyseiset frameworkit ovat paljon käytetympiä, ja niissä on huomattavasti enemmän käytettäviä kirjastoja ja koodinpätkiä ohjelmiston muodostamista varten. Ohjelmistojen rakentaminen on siis ainakin vielä yksinkertaisesti nopeampaa kahden muun vaihtoehdon avulla. 

Sveltellä vastaavia kirjastoja ei siis ole vielä olemassa, eikä ole varmaa, tuleeko olemaankaan: Svelten tulevaisuus riippuukin siitä, onko se yksinkertaisesti tarpeeksi hyvä ohjelmistokehittäjien mielestä. Kyseessä on joka tapauksessa lupaava vaihtoehto, mutta vaikka itse ohjelmistokehitys on sen avulla helpompaa, se vaatii enemmän työtä ominaisuuksien kehittämisen puolelta. 

Tekniikkana Svelte on kuitenkin herättänyt kovasti kiinnostusta, ja sitä pitäisikin testailla paljon käytännössä, jotta ohjelmistokehittäjien piireissä leviäisi yleisempään tietoon, onko se vaatimansa työn arvoinen.

• Svelten hyötyjä ovat sivuston nopeus ja sujuva käytettävyys, ja sillä voidaan vähentää myös kehittäjän manuaalista työtä sekä vähentää itse laitteen rasitusta
• Käytännön toteutuksia on kuitenkin tällä hetkellä varsin vähän – käytettävien kirjastojen puute lisää huomattavasti sovelluskehitykseen vaadittavaa työtä muihin frameworkeihin verrattuna
• Tekniikkana Svelte on kuitenkin hyvin lupaava – tulevaisuus näyttää, saako se ohjelmistokehityksessä osakseen laajempaa suosiota