La richiesta

Sviluppare un’applicazione web responsive (mobile first) con lo scopo di mettere a confronto i tempi di percorrenza autostradali con quelli della viabilità alternativa urbana.

Le caratteristiche principali:

• L’applicazione è di tipo web based responsive, quindi adattabile a dispositivi quali smartphone, tablet e desktop.
• L’applicazione è sviluppata utilizzando la logica dei web-component.
• I dati utili al funzionamento dell’applicazione stessa sono messi a disposizione via web-services direttamente dall’Open Data Hub del NOI.
• Lo sviluppo dell’applicazione web ha rispettato con metodologia “agile” (scrum), per il quale sono state previste sessioni di sprint bisettimanali.
• Lo sviluppo dell’applicazione ha utilizzato tre distinti ambienti di distribuzione: sviluppo, testing e produzione.
• L’applicazione prevede il multilinguismo.

La soluzione

Essendo come requisito primario, il fatto che l’applicazione debba essere un web component, la nostra soluzione vede l’utilizzo di un “web component compiler” che si chiama Stencil, il quale fornisce un livello di astrazione più alto in termini di API che semplificano la scrittura di componenti veloci. API come Virtual DOM, JSX e rendering asincrono semplificano la creazione di componenti veloci e potenti, pur mantenendo la compatibilità al 100% con i componenti Web.

Insieme a Typescript e Stencil abbiamo utilizzato altri strumenti, quali: @stencil/sass per organizzare CSS via Sass-mixins e @stencil/store per mantenere e sincronizzare lo stato di componenti dentro il componente web finale.

Per visualizzare e gestione della mappa abbiamo integrato la libreria open-source Leaflet. Quest’ultima è la principale libreria JavaScript per mappe interattive ottimizzate per dispositivi mobili.