Puhtaan JavaScriptin ja Reactin vertailua yhden sivun sovelluksessa
Hiltunen, Veikko (2021)
Hiltunen, Veikko
2021
Tieto- ja sähkötekniikan kandidaattiohjelma - Bachelor's Programme in Computing and Electrical Engineering
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2021-04-28
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202104273731
https://urn.fi/URN:NBN:fi:tuni-202104273731
Tiivistelmä
Nykyään kirjastojen (engl. libraries) ja sovelluskehysten (engl. frameworks) käyttäminen on entistä yleisempää web-kehityksessä. Niiden vaikutuksesta kehityksestä on tullut yksinkertaisempaa ja helpompaa, mikä on johtanut puhtaan JavaScriptin käytön laskemiseen. Puhtaalla JavaScriptillä tarkoitetaan pelkistettyä JavaScriptiä, jota käytetään ilman ylimääräisiä kirjastoja tai sovelluskehyksiä. Tässä kandidaatintyössä vertaillaan puhtaan JavaScriptin ja Reactin eroja yhden sivun sovelluksessa, kehittämällä yksinkertainen nettisivu. Kehitettävällä nettisivulla kuvataan ostoslistaa, johon voidaan lisätä ostettavia tuotteita.
Työ jakaantuu kolmeen eri vaiheeseen. Ensimmäisessä vaiheessa kehitetään ostoslistasovellus ja vertaillaan kehityseroja kehittäjän näkökulmasta. Toisessa vaiheessa mitataan ostoslistasovelluksen tuotelistan renderöintiin kulunutta aikaa sivua päivittämällä ja tuotelistaa kasvattamalla. Kolmannessa vaiheessa mitataan sovellusten tiedostokokoja käyttämällä webpack-pluginia. Pluginin avulla voidaan mitata, kuinka paljon tietoa joudutaan siirtämään sivun lataamisessa ja mistä tieto koostuu.
Kehityseroja tarkastelemalla Reactin voidaan todeta olevan kehittäjäystävällisempi vaihtoehto puhtaaseen JavaScriptiin verraten. Reactissa käyttöliittymä rakennetaan uudelleenkäytettävien komponenttien avulla, millä mahdollistetaan tiedon siirtäminen helposti komponenttien välillä. Reactissa käyttöliittymää päivitetään synkronisesti tiedon muuttuessa, mikä on haasteellista puhtaalla JavaScriptillä kirjoitettaessa. Renderöintiviive mittauksessa JavaScriptillä tehtävä sovellus on yli 5-kertaa nopeampi React sovellukseen verraten. Erot renderöintiviiveiden välillä ovat millisekuntejen luokkaa, joten käyttäjän näkökulmasta eroja on lähes mahdoton huomata. Sovellusten tiedostokokojen ero on yli 12-kertainen JavaScriptin eduksi. Ero johtuu React sovelluksen lukuisista eri moduuleista, joita se tarvitsee ohjelman suoritukseen.
Työ jakaantuu kolmeen eri vaiheeseen. Ensimmäisessä vaiheessa kehitetään ostoslistasovellus ja vertaillaan kehityseroja kehittäjän näkökulmasta. Toisessa vaiheessa mitataan ostoslistasovelluksen tuotelistan renderöintiin kulunutta aikaa sivua päivittämällä ja tuotelistaa kasvattamalla. Kolmannessa vaiheessa mitataan sovellusten tiedostokokoja käyttämällä webpack-pluginia. Pluginin avulla voidaan mitata, kuinka paljon tietoa joudutaan siirtämään sivun lataamisessa ja mistä tieto koostuu.
Kehityseroja tarkastelemalla Reactin voidaan todeta olevan kehittäjäystävällisempi vaihtoehto puhtaaseen JavaScriptiin verraten. Reactissa käyttöliittymä rakennetaan uudelleenkäytettävien komponenttien avulla, millä mahdollistetaan tiedon siirtäminen helposti komponenttien välillä. Reactissa käyttöliittymää päivitetään synkronisesti tiedon muuttuessa, mikä on haasteellista puhtaalla JavaScriptillä kirjoitettaessa. Renderöintiviive mittauksessa JavaScriptillä tehtävä sovellus on yli 5-kertaa nopeampi React sovellukseen verraten. Erot renderöintiviiveiden välillä ovat millisekuntejen luokkaa, joten käyttäjän näkökulmasta eroja on lähes mahdoton huomata. Sovellusten tiedostokokojen ero on yli 12-kertainen JavaScriptin eduksi. Ero johtuu React sovelluksen lukuisista eri moduuleista, joita se tarvitsee ohjelman suoritukseen.
Kokoelmat
- Kandidaatintutkielmat [8709]