Comparative Analysis of React, Svelte, and Solid.js in Data-Intensive Applications

Abstract

JavaScript frameworks and libraries have become essential tools for building interactive web applications. While React dominates the industry, alternative frameworks and libraries such as Svelte and Solid.js offer different architectural approaches that may provide performance benefits. However, existing benchmarks primarily test synthetic scenarios rather than real-world applications with complex state management and varying data volumes. This thesis addresses this gap by comparing the performance of React, Svelte, and Solid.js through three functionally identical prototypes of a health tracking application interface, evaluating their bundle size, initial load time, runtime navigation speed and scaling behavior.

The prototypes were built with a Node.js backend and MongoDB database. Four test datasets with varying data volumes were created to evaluate performance under different load conditions. Performance measurements were collected using the Performance API in controlled browser environments. The results showed that Svelte produced the smallest bundle size, while Solid.js demonstrated the fastest runtime navigation performance. All libraries scaled sub-linearly with increasing data volumes, with Solid.js maintaining the most consistent performance.

These findings demonstrate the trade-offs between frameworks in their bundle size and runtime efficiency. The aim in the thesis is to provide practical guidance insight of the way of handling things for developers building data-intensive web applications for each framework.

JavaScript-frameworkeista ja kirjastoista on tullut keskeisiä työkaluja vuorovaikutteisten web-sovellusten rakentamisessa. Vaikka React hallitsee markkinoita, vaihtoehtoiset kirjastot kuten Svelte ja Solid.js tarjoavat erilaisia arkkitehtonisia lähestymistapoja, jotka voivat tuoda suorituskykyetuja. Olemassa olevat vertailuanalyysit kuitenkin testaavat pääasiassa synteettisiä skenaarioita eivätkä todellisia sovelluksia, joissa on monimutkaista tilanhallinnointia ja vaihtelevia datamääriä. Tämä opinnäytetyö täyttää tämän aukon vertailemalla Reactin, Svelten ja Solid.js:n suorituskykyä kolmen identtisen terveyden seurantasovelluksen prototyypin avulla, arvioimalla niiden paketin kokoa, alkulatausaikaa, navigointinopeutta ja skaalautumiskäyttäytymistä.

Prototyypit rakennettiin Node.js-taustajärjestelmällä ja MongoDB-tietokannalla. Neljä testiaineistoa eri datamäärillä luotiin arvioimaan suorituskykyä erilaisissa kuormitusolosuhteissa. Suorituskykymittaukset kerättiin Performance API:n avulla kontrolloiduissa selainympäristöissä. Tulokset osoittivat, että Svelte tuotti pienimmän paketin koon, kun taas Solid.js oli suorituskyvyltään tehokkain. React oli suorituskyvyltään heikoin kolmesta, mutta pysyi hyväksyttävien viitearvojen sisällä. Kaikki kirjastot skaalautuivat kohtalaisesti kasvavilla datamäärillä, mutta Solid.js oli parhaiten skaalautuva.

Nämä havainnot osoittavat, että frontend-kirjaston valinta sisältää kompromisseja suorituskyky metriikoiden ja ekosysteemin koon välillä. Tutkimus tarjoaa käytännön ohjeistusta kehittäjille dataintensiivisten web-sovellusten rakentamisessa.