Web components as application building blocks

Abstract

The evolution of the web towards an application platform and its integration with mobile technologies has set the new requirements for the web standards. The web has experienced a rush to the client-side. Even though the client-side complexity has increased radically, the underlying technologies have provided few possibilities to modularize an application. The web page document object model, DOM, has not provided any isolation between the different parts of the document. Even if we have well modularized JavaScript frameworks on top of DOM, the final composed DOM structure vanishes these boundaries. In this work, we investigate the new Web Component specification that tries to solve these problems. We evaluate the Web Components from the perspective of dynamic content support, encapsulation, consistent interfaces and component hierarchy and evaluate how the current problems could be solved with the new specification. As a case study, we re-implemented an existing web-page menu component with the Web Component technologies and investigated how problems were solved in that particular case. The use case showed that the different parts of the Web Component specification could be combined to achieve a good modularization even on the DOM tree level. We raise some concerns about the performance impact and drawbacks related to the weak modularity which the polyfilled version of the technology could cause when the browser does not support specification natively.

Webin kehittyminen kohti sovellusalustaa ja mobiiliteknologian yhdistyminen olennaiseksi osaksi webiä on asettanut uusia vaatimuksia web-standardeille. Webpalvelut ovat yhä enemmän sovellusmaisia ja asiakaspuolen kompleksisuus on kasvanut huomattavasti. Vaikka sovelluksien koko on kasvanut, webin perusteknologiat ovat tarjonneet hyvin vahan mahdollisuuksia modularisoida ohjelmaa asiakaspuolella. Web-sivujen objektimalli, DOM, ei ole tarjonnut minkäänlaista eristystä eri osien välillä samassa dokumentissa. Modulaariset JavaScript-sovelluskehykset ovat yrittäneet ratkaista ongelmaa, mutta nykyisen standardin tekniset rajoitteet estävät halutun lopputuloksen saavuttamisen. Esittelemme tässä työssä Web Component -spesifikaation, joka yrittää paikata nykyisten teknologioiden puutteita. Selvitämme spesifikaatiota dynaamisen sisällön, kapseloinnin, komponenttien yhtenäisen rajapinnan ja komponenttihierarkian näkökulmista. Tarkastelen kuinka hyvin nykyisen standardin ongelmat voidaan ratkaista uuden spesifikaation tarjoamilla teknologioilla. Työn soveltavassa osassa toteutimme jo olemassa olevan komponentin uudestaan käyttäen Web Component -teknologioita ja tarkastelimme kuinka alkuperäisen toteutuksen ongelmat voitiin ratkaista tämän komponentin tapauksessa. Näytämme kuinka eri Web Component -teknologioita voidaan yhdistellä ja saavuttaa modulaarinen rakenne myös dokumentin DOM-rakenteessa. Tarkastelemme myös suorituskykyä ja heikompaan modulaarisuuteen liittyviä haittapuolia, jos joudumme käyttämään siirtymävaiheen ns. polyfill-toteutusta teknologiasta.