The request

Develop a responsive web application (mobile first) with the aim of comparing motorway travel times with those of alternative urban roads.

The main features:

• The application is web-based and responsive, therefore adaptable to devices such as smartphones, tablets and desktops.
• The application is developed using the web-component logic.
• The data useful for the operation of the application itself are made available via web services directly from the Open Data Hub of the NOI.
• The development of the web application complied with an “agile” methodology (scrum), for which biweekly sprint sessions were planned.
• The development of the application used three distinct distribution environments: development, testing and production.
• The application provides for multilingualism.

The solution

Being a primary requirement, the fact that the application must be a web component, our solution sees the use of a “web component compiler” called Stencil, which provides a higher level of abstraction in terms of API than make it easy to write fast components. APIs such as Virtual DOM, JSX, and asynchronous rendering makes it easy to create fast and powerful components while maintaining 100% compatibility with web components.

Along with Typescript and Stencil, we used other tools, such as: @ stencil/sass to organize CSS via Sass-mixins and @ stencil/store to maintain and synchronize the state of components within the final web component.

To view and manage the map we have integrated the open-source Leaflet library. The latter is the leading JavaScript library for interactive maps optimized for mobile devices.