Svelte : teknologiaan tutustuminen

Abstract

Opinnäytetyössä tutustutaan Svelte sovelluskehyksellä tapahtuvaan web-sovelluksen kehitykseen konkreettisen esimerkin avulla ja vertaamalla sitä Reactilla tapahtuvaan sovelluskehitykseen. Työssä luodaan molemmilla sovelluskehyksillä toiminnallisesti ja visuaalisesti identtiset sovellukset, joiden toimintaa ja testausta tukemaan rakennetaan myös tietokanta ja API ohjelmointirajapinta.

JavaScript-pohjaisia sovelluskehyksiä on jo vakiintuneessa käytössä monia ja uusien tulokkaiden on usein vaikeaa vakiinnuttaa omaa paikkaansa näiden joukossa. Yleensä uudet kehykset pyrkivät ratkaisemaan muista kehyksistä löytyvän ongelman tai tuovat uuden tavan rakentaa sovelluksia. Svelte on kasvattanut suosiotaan ja vakiinnuttanut asemaansa sen suosion noustu version 3 julkaisun jälkeen vuonna 2019. Se pyrkii tarjoamaan oman tyylinsä kirjoittaa koodia sekä kevyemmät ja nopeammat sovellukset.

Molemmat sovelluskehykset ovat JavaScript pohjaisia. Niiden suurimmat erot löytyvät tiedosto rakenteesta, jossa yksi Svelte tiedosto sisältävää komponentin logiikan, käyttöliittymän ja tyylin ohjelmakoodin selkeästi eroteltuna omiin osioihinsa. Reactissa tyyli määritetään eri tiedostossa. Svelte tuottaa myös pienempiä tiedostoja. Svelte pitäisi toimia Reactia tehokkaammin, mutta tuloksissa React sovellus pärjäsi paremmin lataus- ja renderöintitesteissä, kun taas Svelte oli parempi vasteaikaa mitattaessa.

The thesis aims to explore web development using the Svelte framework. It aims to do that with the help of a concrete example and by comparing Svelte application to an application developed with React. In the thesis, functionally and visually identical Svelte and React web applications are created with both frameworks. Also, a database and API are built to support their operations and testing.

There are already many JavaScript-based frameworks in established use, and it is often difficult for newcomers to get traction among them. Usually, new frameworks aim to solve a problem found in other frameworks or introduce a new way of building applications. Svelte has grown in popularity and established itself since it released version 3 in 2019. Svelte aims to offer its own style of building interfaces. Its strengths are light weight and fast applications with small bundle size.

Both frameworks are based on JavaScript. Their biggest differences can be found in the file structure. Svelte puts the component's logic, user interface and style program code inside same file clearly separated into their own sections. In React, the style is defined in a different file. When testing Svelte produced smaller files. Svelte should work more efficiently than React, but in the results, the React application performed better in loading and rendering tests, while Svelte performed better in terms of response time.