JavaScript-kirjasto React: Edut selainpuolen kehityksessä
Viitala, Aleksi (2021)
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-05-14
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202105044344
https://urn.fi/URN:NBN:fi:tuni-202105044344
Tiivistelmä
Selainpuolen kehityksen vaativuus on lisääntynyt viime vuosikymmeninä web-applikaatioiden interaktiivisuuden ja käyttöliittymien tarpeiden kasvaessa. Etenkin käyttöliittymien tarpeiden kasvu on tuonut mukanaan suuren määrän erilaisia ohjelmistokehyksiä ja kirjastoja, jotka helpottavat web-käyttöliittymien kehittämistä. Työkalujen yleistyminen on vaikuttanut web-applikaatioiden toteuttamisprosesseihin merkittävästi.
Opinnäytetyön tutkimuksen motiivina on kehysten ja kirjastojen käytön yleistymisen merkittävä vaikutus web-käyttöliittymäkehitykseen. Käsiteltäväksi web-kehitystyökaluksi on valittu JavaScript-kirjasto React. Työn tavoitteena on selvittää, mitä hyötyjä React tarjoaa selainapplikaatioiden käyttöliittymäkehityksessä verrattuna natiivilla JavaScriptilla toteutettuihin applikaatioihin. Työssä toteutettu tutkimus on tehty kirjallisuuskatsauksena.
Työ koostuu teoriaosiosta sekä analyysia sisältävästä vertailuosiosta. Alussa perehdytään natiivin JavaScriptin käyttöön selainkäyttöliittymien kehityksessä. JavaScriptin käyttöä käsitellään sen käyttöliittymäkehityksessä tärkeimpien rinnakkaistekniikoiden yhteydessä. Käsiteltäviä rinnakkaistekniikoita ovat HyperText Markup Language ja käyttöliittymäkehitykseen tarvittavat web-rajapinnat. JavaScriptin jälkeen käsitellään Reactia ja sen perustavanlaatuisia ominaisuuksia sekä oheistyökaluja. Reactista käsiteltäviä ominaisuuksia ovat muun muassa JSX-syntaksilaajennos, komponentit, synteettiset tapahtumat sekä selainpuolen reititys. Työn loppuosassa vertaillaan React-pohjaisten applikaatioiden eroja puhtaalla JavaScriptilla toteutettuihin applikaatioihin. Vertailun näkökulmina ovat projektien tiedostorakenne, komponentit, hahmonnus ja verkkosivun dokumentin muokkaamisoperaatiot.
Verkkosivujen toteuttaminen todettiin käytännölliseksi sekä tehokkaaksi puhtaalla JavaScriptilla, mikäli applikaation tilaan kytköksissä olevien elementtien määrä on vähäinen. Applikaation tilaan kytköksissä olevan tiedon määrän kasvaessa React-kirjaston käyttö JavaScriptin ohella todettiin erittäin hyödylliseksi. Reactin automaattisen tiedon päivityksen ja uudelleenhahmonnuksen todettiin helpottavan ohjelmoijan työtä ja tekevän sivun dynaamisesta päivittämisestä yksinkertaisempaa sekä vähentävän vaadittavaa työmäärää ohjelmakoodin kannalta. Lisäksi, Reactin tehokas dokumenttioliomallien vertailuun perustuva verkkodokumentin päivitystapa osoittautui paremmaksi lukuisten sivun päivitystapahtumien yhteydessä. Kaiken lisäksi, JSX-syntaksilaajennoksen tarjoama visuaalinen apu komponentin rakenteenmäärittelemisessä todettiin hyödylliseksi ohjelmakoodin luettavuuden kannalta.
Opinnäytetyön tutkimuksen motiivina on kehysten ja kirjastojen käytön yleistymisen merkittävä vaikutus web-käyttöliittymäkehitykseen. Käsiteltäväksi web-kehitystyökaluksi on valittu JavaScript-kirjasto React. Työn tavoitteena on selvittää, mitä hyötyjä React tarjoaa selainapplikaatioiden käyttöliittymäkehityksessä verrattuna natiivilla JavaScriptilla toteutettuihin applikaatioihin. Työssä toteutettu tutkimus on tehty kirjallisuuskatsauksena.
Työ koostuu teoriaosiosta sekä analyysia sisältävästä vertailuosiosta. Alussa perehdytään natiivin JavaScriptin käyttöön selainkäyttöliittymien kehityksessä. JavaScriptin käyttöä käsitellään sen käyttöliittymäkehityksessä tärkeimpien rinnakkaistekniikoiden yhteydessä. Käsiteltäviä rinnakkaistekniikoita ovat HyperText Markup Language ja käyttöliittymäkehitykseen tarvittavat web-rajapinnat. JavaScriptin jälkeen käsitellään Reactia ja sen perustavanlaatuisia ominaisuuksia sekä oheistyökaluja. Reactista käsiteltäviä ominaisuuksia ovat muun muassa JSX-syntaksilaajennos, komponentit, synteettiset tapahtumat sekä selainpuolen reititys. Työn loppuosassa vertaillaan React-pohjaisten applikaatioiden eroja puhtaalla JavaScriptilla toteutettuihin applikaatioihin. Vertailun näkökulmina ovat projektien tiedostorakenne, komponentit, hahmonnus ja verkkosivun dokumentin muokkaamisoperaatiot.
Verkkosivujen toteuttaminen todettiin käytännölliseksi sekä tehokkaaksi puhtaalla JavaScriptilla, mikäli applikaation tilaan kytköksissä olevien elementtien määrä on vähäinen. Applikaation tilaan kytköksissä olevan tiedon määrän kasvaessa React-kirjaston käyttö JavaScriptin ohella todettiin erittäin hyödylliseksi. Reactin automaattisen tiedon päivityksen ja uudelleenhahmonnuksen todettiin helpottavan ohjelmoijan työtä ja tekevän sivun dynaamisesta päivittämisestä yksinkertaisempaa sekä vähentävän vaadittavaa työmäärää ohjelmakoodin kannalta. Lisäksi, Reactin tehokas dokumenttioliomallien vertailuun perustuva verkkodokumentin päivitystapa osoittautui paremmaksi lukuisten sivun päivitystapahtumien yhteydessä. Kaiken lisäksi, JSX-syntaksilaajennoksen tarjoama visuaalinen apu komponentin rakenteenmäärittelemisessä todettiin hyödylliseksi ohjelmakoodin luettavuuden kannalta.
Kokoelmat
- Kandidaatintutkielmat [8996]