Standardoidut teknologiat verkkosovellusten modulaariseen kehittämiseen

Abstract

Insinöörityön tarkoituksena oli tutkia uuden teknologian, webkomponenttien, käyttöä verkkosovellusten modulaarisessa kehittämisessä ja toteuttamisessa. Työssä haluttiin selvittää, mitä uusia ulottuvuuksia webkomponentit tuovat sovelluskehitykseen ja mitä yleisiä webkehityksessä esiintyviä ongelmia ne voivat ratkaista. Lisäksi työssä perehdyttiin kahteen erilaiseen webkomponenttikirjastoon, joiden ominaisuuksia vertailtiin tarkoituksena selvittää, kumpi soveltuisi paremmin verkkosovelluksen toteuttamiseen.

Webkomponenttikirjastoista vertailuun valittiin Mozillan X-Tag ja Googlen Polymer. Molemmilla kirjastoilla toteutettiin pienet esimerkit, ja vertailun lopputuloksena valittiin Googlen Polymer varsinaisen työn toteutukseen. Koska webkomponenttien tavoitteena on tuoda muun muassa modulaarisuutta verkkosovelluksiin, toteutetussa sovelluksessa oleellista oli sen modulaarinen rakenne ja toiminnallisuuksien jakaminen selkeiksi erillisiksi uudelleen käytettäviksi komponenteiksi.

Toteutettu sovellus hyödynsi webkomponenttiteknologioita, joiden avulla merkintäkieli (HTML), komentosarjakieli (JavaScript) ja tyylit (CSS) saatiin tiivistettyä erillisiksi uudelleen käytettäviksi komponenteiksi. Työssä huomattiin webkomponenttien ja Polymerin käytössä sekä hyviä että huonoja puolia. Toiminnallisuuksien ja tyylien kapseloiminen uudelleen käytettäviksi komponenteiksi vähensi modulaarisuuteen liittyviä ongelmia, mutta sivun latausaika liitännäisten kanssa kasvoi melko suureksi. Tulevaisuudessa tärkeä kehityskohde on webkomponenttien tuen saaminen kaikkiin moderneihin selaimiin.

Insinöörityön perusteella webkomponentit tuovat modulaarisen verkkosovelluksen kehitykseen hyviä ratkaisuja. Ne tarjoavat uusia mahdollisuuksia toteuttaa sovelluksia erillisistä uudelleen käytettävistä komponenteista, joiden toiminta on muista komponenteista riippumatonta. Webkomponentit voivat yleisesti kasvattaa suosiotaan lähivuosina, jos niiden tuki saadaan lisättyä kaikkiin selaimiin.

The purpose of this thesis was to study a new technology called web components, and their role in designing and developing modular web applications. In this project the intention was to find out what new possibilities web components can bring to application development, and which common problems they can resolve. In addition, this thesis focused on two different web component libraries, comparing their features, trying to find out which library was better for implementing a web application.

From web component libraries Mozilla’s X-Tag and Google’s Polymer were chosen to comparison. I created small examples with both libraries. After comparing these two libraries and their features, I chose to use Google’s Polymer to implement the actual project. Because web components aim to more modular web applications, it was essential in my application that it had modular structure and that all the functions were divided into separate reusable components.

The application was made using web component technologies which allow developers to encapsulate markup (HTML), scripts (JavaScript) and stylesheets (CSS) into reusable packages. The findings of this study indicate that there are pros and cons when using web components and Polymer. Encapsulating functions and stylesheets into reusable components reduced the common problems which appear with modular development, but because of large polyfills it also increased page download time a lot. In the future, it is important that web components will be implemented in all browsers so that there is no need for polyfills.

In conclusion, web components can bring good solutions to modular web application design and development. Web components offer new possibilities to develop applications using reusable components that work without conflicting with any other parts. Web components can become very popular in the future, if their support will be implemented in all modern browsers.