Verkkosivun sisällön päivittäminen virtuaalista DOMia käyttäen

No Thumbnail Available

Files

URL

Journal Title

Journal ISSN

Volume Title

Perustieteiden korkeakoulu | Bachelor's thesis
Electronic archive copy is available locally at the Harald Herlin Learning Centre. The staff of Aalto University has access to the electronic bachelor's theses by logging into Aaltodoc with their personal Aalto user ID. Read more about the availability of the bachelor's theses.

Date

2024-06-04

Department

Major/Subject

Tietotekniikka

Mcode

SCI3027

Degree programme

Teknistieteellinen kandidaattiohjelma

Language

fi

Pages

21

Series

Abstract

Interaktiivisen verkkosivun muuttaminen selaimessa tapahtuu DOM-rajapinnan (Document Object Model) kautta JavaScript-kielellä. Tämä rajapinta on kuitenkin hankalakäyttöinen, ja sitä on pyritty abstrahoimaan eri tavoilla, joista yksi on virtuaalinen DOM. Työn tavoitteena on selvittää, mikä virtuaalinen DOM on ja miten se toimii, sekä miten selainsivua päivitetään virtuaalisen DOMin avulla. Työ keskittyy sisällön näyttämiseen verkkoselaimissa, vaikka virtuaalinen DOM -käsitettä käytetään muissakin konteksteissa. Työ on toteutettu kirjallisuustutkimuksena. Työn aineistoon kuuluu virtuaaliseen DOMiin liittyviä tieteellisiä artikkeleita sekä verkkoteknologian standardeja ja peruskirjallisuutta. Lisäksi aineistoon kuuluu selainpuolen kirjastojen – kuten Reactin – dokumentaatioita sekä niihin liittyviä verkkojulkaisuja. Virtuaalinen DOM on selaimen DOMin tietoja vastaava tietorakenne, joka ei kuitenkaan välttämättä ole samanrakenteinen. Muutokset virtualisoituun DOMiin siirtyvät automaattisesti selaimen DOMiin. Virtuaalisen DOMin suoritustehokkuus ei kuitenkaan ole triviaali, vaan suorituskyvyn ja käytettävyyden takaamiseksi sitä pitää optimoida esimerkiksi esilaskennalla tai vuoronnuksella. Virtuaalisen DOMin tarkemmasta toiminnasta ei työssä löytynyt yleislaatuista sisältöä, vaan julkaisut keskittyivät johonkin tiettyyn toteutukseen. Tämän takia työssä otettiin tarkastelun kohteeksi selainpuolen React-kirjasto. React-käyttöliittymä rakennetaan React-komponenteista, jotka sisältävät käyttöliittymän tilan ja toiminnallisuuden. Nämä komponentit hahmonnetaan DOMin rakennetta vastaaviksi kevyiksi JavaScript-olioiksi. Tilan muuttuessa uutta ja vanhaa edellämainittua DOMia vastaavaa rakennetta verrataan toisiinsa, ja eroista tehdään tarvittavat DOM-rajapinnan kutsut käyttöliittymän saattamiseksi vastaamaan uutta tilaa.

Description

Supervisor

Savioja, Lauri

Thesis advisor

Hellas, Arto

Keywords

virtuaalinen DOM, DOM, hahmonnus, verkkokäyttöliittymä, React, selainsovellus

Other note

Citation