Modernit Web-sovellukset

Abstract

Tässä työssä käsitellään modernien ja skaalautuvien web-sovellusten kehittämistä erilaisten sovelluskehysten avulla. Työssä tutkittiin mahdollisuutta siirtää perinteisten web-sovellusten esityslogiikka ja liiketoimintalogiikka palvelimelta selaimelle. Logiikan siirtäminen selaimelle vähentäisi palvelimelle kohdistuvaa kuormaa ja parantaisi sovelluksen suorituskykyä. Työssä tutustuttiin asiakaspuolen Single-Page Application sovelluskehitysmalliin, sekä siihen liittyviin tekniikoihin ja toteutusmalleihin.

Single-Page Applicationit (SPA) ovat HTML5 web sovelluksia tai sivuja, jotka suoritetaan asiakaspään selaimessa. SPA-sovelluksissa kaikki ohjelmakoodi suoritetaan selaimessa tai haetaan palvelimelta erikseen tarvittaessa. Perusajatuksena selainpuolen sovelluksissa on se, että mitä tahansa käyttäjä tekeekin sivuilla, se ei vaadi sivuston uudelleenlatausta. SPA-sovellukset poikkeavat merkittävästi perinteisestä monisivuisesta toteutustavasta, jossa selain hakee uutta sisältöä palvelimelta jokaisesta käyttäjän interaktiosta.

Ongelma perinteisissä palvelinpuolen web-toteutuksissa on se, että jokaisen painalluksen aiheuttama sivulataus voi merkittävästi häiritä käyttökokemusta. Perinteisissä web-sovelluksissa käyttäjä joutuu odottamaan joka painalluksella, että koko sivusto on latautunut. Tämä tarkoittaa myös sitä, että mahdollisesti suuri määrä samaa dataa ladataan useita kertoja. Single-Page Applikaatioissa data haetaan käyttämällä XHR Ajax kutsuja ja päivittämällä ainoastaan tiettyjä osioita sivusta, täten tehden käyttökokemuksesta sulavamman.

Tutkittujen tekniikoiden demonstroimiseksi toteutettiin yksinkertainen asiakashallintajärjestelmä. Sovellus toteutettiin JavaScript-ohjelmointikielellä ja käyttäen asiakaspuolen Backbone.js- ja palvelinpuolen Node.js-sovelluskehyksiä.

This Bachelor’s Thesis deals with building modern and scalable web applications by using certain application frameworks. The possibility to move most of the presentation logic and business logic of the application’s to the clients browser was studied thus reducing the server load and improving performance of the application. This work concentrates on the Single-Page Application programming model and on the different technologies related to it.

Single-Page Applications (SPA) are web applications or websites which run in client’s browser. In SPA applications all the program code exists in clients browser’s or are fetched separetly from the server as required. The basic idea behind an SPA is that regardless of what interactions users make in the application, the page does not get reloaded. SPAs differ radically from the classic multipage applications where the browser requests data from the server with every single user interaction. The problem with the classical server side web-applications is that it tends to disrupt the user experience. In classical web applications the user will have to wait for entire page to finish loading. This often means requesting the same data content over and over again. In SPA applications, on the other hand, requests are made using XHR Ajax calls and updating only necessary partions of the page, thus making the user experience more fluid.

To demonstrate the researched methods, a simple CRM (customer relationship manager) application was made. The application was created using the JavaScript programming language and Backbone.js and Node.js application frameworks for both server and client side implementations.