Design and implementation of a single page web-application - Case Online Music Diary

Abstract

Practicing a musical instrument can be challenging not only motorically but mentally as well. One way to help with motivational problems is to keep records of practicing, which helps in tracking the progress. In this thesis we design and implement a prototype for a web application that allows people to save and browse their musical practicing and other interesting online material. The application also enables sharing and commenting these practice logs with other users of the system and the visualization of the practice data. In addition, the application has features designed to facilitate communication as well as material and recording sharing between focused groups of users. We chose to implement the prototype as a Single-Page Web Application (SPA) because of their benefits, such as smaller server side resource requirements per user and enhanced user experience when compared to the traditional web application model. In order to select a suitable SPA technology for implementing the application we formulate a set of criteria for the technology to be selected, and compare four different SPA solutions, Backbone.js, AngularJS, EmberJS and CanJS, from which we select the best match for the criteria to be used in the prototype implementation. The prototype is evaluated by showing how it fulfils the requirements made from the original problem description. Furthermore, this thesis proposes further research topics on the SPA technologies and a set of best practice principles for working with Backbone.js.

Musiikin harjoittelu voi olla hankalaa niin motorisesti kuin henkisestikin. Yksi keino auttaa motivaation kanssa on tallentaa harjoittelu jollain tavalla, mikä helpottaa edistyksen seurannassa. Tässä työssä kehitämme prototyypin web-ohjelmasta, joka mahdollistaa musiikillisen harjoittelun sekä muun online-materiaalin tallentamisen ja katselun. Ohjelma mahdollistaa myös näiden merkintöjen jakamisen ja kommentoinnin muiden käyttäjien kanssa, sekä harjoitteludatan visualisoinnin. Tämän lisäksi ohjelma mahdollistaa käyttäjäryhmien keskeisen kommunikaation ja materiaalien sekä nauhoitusten jakamisen. Prototyyppi haluttiin implementoida ns. yhden sivun web-sovelluksena, Single-Page Web Application (SPA), koska tämänkaltaiset ohjelmat kuluttavat vähemmän palvelinresursseja käyttäjää kohden ja tarjoavat paremman käyttökokemuksen verrattuna perinteiseen web-ohjelmamalliin. Sopivan SPA-teknologian valitsemiseksi muodostamme kriteerit, joita apuna käyttäen arvioimme neljä SPA-ratkaisua, Backbone.js, AngularJS, EmberJS ja CanJS, joista valitsemme parhaiten kriteerejä vastaavan ratkaisun käytettäväksi prototyypin implementoinnissa. Prototyyppi-implementaatio arvioidaan näyttämällä, että se vastaa alkuperäisestä ongelmakuvauksesta johdettuihin vaatimuksiin. Tämä työ ehdottaa myös aiheita jatkotutkimukselle koskien SPA-teknologioita sekä kokoelman periaatteita Backbone.js:n kanssa työskentelyyn.