Yksisivuisten sovellusten kehittäminen komponentti-viitekehyksillä

Abstract

Verkkosovellusten käyttöliittymien kehityksessä käytetään usein kehitystä tukevia front end-viitekehyksiä. Vain yhdestä tiedostosta koostuvien komponenttien sisältäviä viitekehyksiä kutsutaan yksitiedostoisiksi komponentti-viitekehyksiksi. Opinnäytetyön tarkoituksena oli erotella komponentti-viitekehyksien Vue.js:n, Marko.js:n, Svelte:n ja React:in vahvuuksia ja heikkouksia testaamalla edellä mainituilla viitekehyksillä toteutettujen prototyyppien suorituskykyä. Prototyypit sisälsivät kolme eri rasite-testiä: komponentin sisäisen reaktiivisuus, komponenttien välinen reaktiivisuus ja komponenttien dynaaminen luominen.

Testien tuloksien mukaan Vue oli suorituskyvyltään heikoin ja vaati eniten manuaalista optimointia; Marko oli suoritusnopeudeltaan huomattavasti parempi kuin Vue, mutta käytti hybridirenderöinnin takia enemmän palvelimen resursseja; Svelte oli suorituskyvyltään ja muistinkäytöltään paras ja React oli keskimäärin tehokas, mutta kärsi vaihtelevasta suoritusnopeudesta ja hitaasta muistinhallinnasta.

Vue:n ja React:in suuren käyttäjien määrän takia, niillä on myös suurin tuki, minkä takia ne sopivat tällä hetkellä näistä viitekehyksistä parhaiten yleiseen yrityskäyttöön. Svelte sopi näistä viitekehyksistä parhaiten yksinkertaisten yksisivuisten verkkosovellusten kehitykseen ja Marko vaikutti sopivan vain hybridirenderöinnistä riippuvien verkkosovellusten kehittämiseen. Verrattuna muihin tiedostorakenteisiin, komponentti-viitekehyksillä kehitettyjen ohjelmistojen ylläpito pysyy helpompana koodin rivien määrän kasvaessa, mutta se että käyttääkö yksitiedostoisia komponentti-viitekehyksiä on makukysymys. Jatkotutkimuksena voitaisiin joko toteuttaa samoja prototyyppejä eri viitekehyksillä tai tulevaisuudessa seurata Svelte:n käytön kehitystä, sen vuonna 2021 saavuttaneen nopean suosion nousun takia.

With the increasing number of web frameworks, it has become increasingly difficult to be aware of their differences. The objective of the thesis was to find the differences between four frameworks: Vue.js, Marko.js, Svelte and React, while focusing on the differences of their performance abilities. The empirical data of the performance of the frameworks was gathered with performance tests, which were carried on four prototypes developed with each framework.

The results show that Svelte uses the least memory while also performing the fastest while Vue performs the slowest. Still, due to the wide community support around Vue, it is still a useful framework, when performance is not paramount. The use of Svelte is expected to rise dramatically (Stack Overflow 2021), so it will likely become a viable framework for commercial usage in a few years. React uses the most memory but is also a useful framework due to the wide community support it has. The performance of Marko is adequate, but due to lack of community support, it is the least preferable framework out of the four tested in the thesis.