New User Interface Architecture for NetWiser Product with AngularJS

Abstract

The topic of the thesis was to develop a new user interface for a product called NetWiser. The need for a new user interface originated from the problems experienced with the technology of the old user interface. A decision was made to replace the old Java applets based user interface with a new JavaScript based user interface. In practice, the technology switch meant a complete redevelopment of the user interface application component. A complete redesign of the user interface layout was excluded from the scope of the thesis. The thesis was also limited to cover only one of the many NetWiser user interfaces.

The research consisted of two parts. In the first part a JavaScript framework was selected among 48 JavaScript frameworks and libraries as the technology to develop the new NetWiser user interface. The research compared JavaScript frameworks based on basic and technological project requirements. At the end, five most suitable JavaScript frameworks were studied by comparing an example application source code developed with each of the frameworks. Finally, AngularJS was selected as the most suitable framework.

The second part of the research studied the best practices related to AngularJS application development. The findings of the research were utilized in the development of the new NetWiser user interface. The development consisted of setting up a development environment with proper tools, replacing the used technology and improving some of the user interface components.

The selection of AngularJS as the development framework was a success. AngularJS provides a comprehensive set of features for web application development. The community behind AngularJS is big enough to support professional web application development. The new NetWiser user interface was developed using AngularJS. The application functionality was successfully verified using automated and manual tests. Feedback from the organization stakeholders and a customer was positive.

Opinnäytetyön aiheena on uuden käyttöliittymän kehittäminen NetWiser tuotteelle. Käyttöliittymän kehittämisen tarve sai alkunsa havaituista ongelmista tuotteen vanhan käyttöliittymän teknologian kanssa. Vanha Java applet -pohjainen käyttöliittymä päätettiin korvata uudella JavaScript-pohjaisella käyttöliittymällä. Teknologianvaihto tarkoitti koko käyttöliittymäsovelluksen uudelleenkehitystä. Käyttöliittymän ulkoasun rakenteen uudelleensuunnittelu päätettiin jättää pois opinnäytetyöstä. Opinnäytetyötä rajattiin sisällyttämällä vain yhden NetWiser käyttöliittymän uudelleenkehitys.

Opinnäytetyön tutkimus koostuu kahdesta osasta. Ensimmäisessä osassa valitaan JavaScript-sovelluskehys 48 JavaScript-sovelluskehyksen ja -kirjaston joukosta uudeksi NetWiser tuotteen käyttöliittymä teknologiaksi. Tutkimus vertailee JavaScript-sovelluskehyksiä projektivaatimusten näkökulmasta. Lisäksi viiden sopivimman JavaScript-sovelluskehyksen avulla kehitetyn esimerkkisovelluksen lähdekoodeja vertaillaan toisiinsa. Lopuksi AngularJS valittiin sopivimmaksi sovelluskehykseksi NetWiser käyttöliittymäprojektiin.

Tutkimuksen toisessa osassa selvitettiin AngularJS-sovelluskehyksen parhaita käytäntöjä sovelluskehityksessä. Tutkimuksen tuloksia käytettiin uuden NetWiser käyttöliittymän kehitysprojektissa. Kehitysprojekti koostuu projektiympäristön asentamisesta kunnollisten työkalujen avulla, teknologianvaihdosta sekä muutamien käyttöliittymäkomponenttien vaihdosta nykyaikaisiin versioihin.

AngularJS-sovelluskehyksen valinta käytettäväksi teknologiaksi osoittautui onnistuneeksi. AngularJS tarjoaa laajan valikoiman ominaisuuksia Internet-sovellusten kehittämiseen. AngularJS-sovelluskehyksen parissa toimiva yhteisö on rittävän laaja tukeakseen ammattimaista sovelluskehitystä. Uusi NetWiser käyttöliittymä kehitettiin käyttäen AngularJS-sovelluskehystä. Sovelluksen toimivuus varmistettiin onnistuneesti automaattisten sekä manuaalisten testien avulla. Palaute asiakkaalta ja yrityksen sidosryhmältä oli positiivista.