Single-page application -arkkitehtuuri
Karppanen, Timo (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2022060716242
https://urn.fi/URN:NBN:fi:amk-2022060716242
Tiivistelmä
Tässä opinnäytetyössä tutkittiin verkossa toimivaa single-page application (SPA) – arkkitehtuurin toimintaa ja pyrittiin selvittämään, mitä tekniikoita tämä arkkitehtuuri todella tarvitsee toimiakseen mahdollisimman yksinkertaisella toteutuksella. Työssä käytiin läpi kaikki ajankohtaiset tekniikat, joita tämä arkkitehtuuri vaatii toimiakseen määritetyllä tavalla. Opinnäytetyössä tutustuttiin myös asiakaspuolen JavaScript-ohjelmistokehyksiin, joita hyödynnetään tämän arkkitehtuurin toteuttamiseksi modernissa web-kehityksessä.
Työssä rakennettiin kolme kappaletta samantyylisiä SPA-arkkitehtuuriin perustuvaa web-sovellusta, jotka toteutettiin tämän hetken suosituimmilla asiakaspuolen JavaScript-ohjelmistokehyksillä. Suosituimmiksi asiakaspuolen JavaScript-ohjelmistokehyksiksi valikoitui Angular, React ja Vue. Tämän lisäksi työssä rakennettiin vielä yksi samantyylinen SPA-arkkitehtuuriin perustuva web-sovellus, jonka toteutuksessa käytettiin erilaisten JavaScript-ohjelmistokehyksien sijasta puhdasta JavaScript-ohjelmointikieltä, johon edellä mainitut JavaScript-ohjelmistokehykset perustuvat.
Yksinkertaisella toteutuksella rakennettu puhdas JavaScript web-sovellus paljasti tämän arkkitehtuurin perustoiminnallisuuden kannalta tärkeimmät piirteet. Arkkitehtuurin tärkeimmiksi piirteiksi määräytyivät olevan reititys, modulaarisuus sekä history-ohjelmointirajapinnan käyttö.
Näitä kolmea tärkeintä arkkitehtuurin piirrettä tarkastellaan opinnäytetyön lopussa suoritetussa vertailussa, jossa vertaillaan suosituimmalla JavaScript-ohjelmistokehyksellä tehtyä web-sovellusta vastaavanlaiseen puhtaalla JavaScriptillä toteutettuun web-sovellukseen. Suosituimmaksi JavaScript-ohjelmistokehykseksi valikoitui React. Työssä osoitetaan myös konkreettisesti JavaScript-ohjelmistokehyksien hyödyllisyys modernien SPA-arkkitehtuuriin perustuvien sivujen toteutuksessa.
Työssä rakennettiin kolme kappaletta samantyylisiä SPA-arkkitehtuuriin perustuvaa web-sovellusta, jotka toteutettiin tämän hetken suosituimmilla asiakaspuolen JavaScript-ohjelmistokehyksillä. Suosituimmiksi asiakaspuolen JavaScript-ohjelmistokehyksiksi valikoitui Angular, React ja Vue. Tämän lisäksi työssä rakennettiin vielä yksi samantyylinen SPA-arkkitehtuuriin perustuva web-sovellus, jonka toteutuksessa käytettiin erilaisten JavaScript-ohjelmistokehyksien sijasta puhdasta JavaScript-ohjelmointikieltä, johon edellä mainitut JavaScript-ohjelmistokehykset perustuvat.
Yksinkertaisella toteutuksella rakennettu puhdas JavaScript web-sovellus paljasti tämän arkkitehtuurin perustoiminnallisuuden kannalta tärkeimmät piirteet. Arkkitehtuurin tärkeimmiksi piirteiksi määräytyivät olevan reititys, modulaarisuus sekä history-ohjelmointirajapinnan käyttö.
Näitä kolmea tärkeintä arkkitehtuurin piirrettä tarkastellaan opinnäytetyön lopussa suoritetussa vertailussa, jossa vertaillaan suosituimmalla JavaScript-ohjelmistokehyksellä tehtyä web-sovellusta vastaavanlaiseen puhtaalla JavaScriptillä toteutettuun web-sovellukseen. Suosituimmaksi JavaScript-ohjelmistokehykseksi valikoitui React. Työssä osoitetaan myös konkreettisesti JavaScript-ohjelmistokehyksien hyödyllisyys modernien SPA-arkkitehtuuriin perustuvien sivujen toteutuksessa.