React and Vue performance comparison

Abstract

Tämän opinnäytetyön tavoitteena oli mitata ja vertailla React- ja Vue JavaScript -kirjastojen suorituskykyä. Opinnäytetyö alkaa molempien kirjastojen lyhyellä kuvauksella. Sen jälkeen alustetaan siihen, kuinka suorituskykyä mitattiin ja mitä käytettiin sen mittaamiseen.

Kahdentyyppistä testiä tehtiin testaamaan näitä kirjastoja. Ensimmäinen on ranking-testit ja toinen on pienemmät testit. Ranking-testeissä testauksen kohteena oli ranking-niminen selainsovellus. Ranking sovelluksesta otettiin mittauksia käyttäen Lighthouse nimistä työkalua. Pienempien testien testikohteena oli kaksi erityyppistä sivua, jotka molemmat listaavat satunnaisteksti kappaleita. Näitä sivuja mitattiin selaimista löytyvää Performance-nimistä rajapintaa käyttäen. Molemista testeistä on omat osionsa, joissa käydään läpi, kuinka testit suoritettiin ja mitä saatiin tulokseksi testeistä.

Lopputulema testeistä oli, että molemmat kirjastot suoriutuvat hyvin, eikä testien otanta ollut tarpeeksi suuri, jotta voisi päätellä, kumpi olisi kaiken kaikkiaan tehokkaampi. React menestyi toisissa testeissä ja Vue taas toisissa. Lisäksi heräsi epäilyjä tulosten paikkaansapitävyydestä niissä testeissä, joissa turvauduttiin kirjastojen omiin funktioihin mittauksia otettaessa.

The objective of this thesis was to measure and compare the performance of React and Vue JavaScript libraries. The thesis starts with a short introduction to both libraries. How the performance was measured and what was used to measure it are discussed next.

Two types of tests were made to test the libraries, Ranking tests and smaller tests. Ranking tests’ test subject was a web application named Ranking. From Ranking application, measurements were taken with the help of a tool called Lighthouse. Smaller tests’ test subjects were two types of pages that display random text paragraphs. These test subjects were tested by using Performance API found in web browsers. Both tests have their own sections, which discuss the details of how the tests were conducted, and what the results were.

As a result of this final year project, it can be concluded that both libraries perform rather well. Moreover, sampling of these test was not enough to determine which library performs better. React thrived in some tests and Vue in others. Finally, it was not clear how accurate the results were in one of the tests. As for that test the measurements relied on library functions.