Dopo qualche mese di sviluppo ho finalmente pubblicato la nuova Galleria Fotografica per questo sito. Il progetto è stato realizzato interamente in JavaScript, sia per quanto riguarda i componenti lato server che quelli lato client.

Tra le feature principali ci sono:

• Interfaccia responsive ispirata al Material Design
• Supporto alle gesture come swipe e pinch-to-zoom
• Visualizzazione full-screen
• Visualizzazione dei dati EXIF
• Visualizzazione su mappa dei dati geografici
• Download singolo e multiplo
• Condivisione sui maggiori social network
• Supporto multilingua (italiano e inglese)

Vediamo di seguito alcuni degli strumenti e dei moduli utilizzati per lo sviluppo del progetto.

Ambiente di sviluppo

L’intero progetto è stato realizzato con l’IDE Visual Studio Code di Microsoft e la stesura del codice è stata portata avanti lavorando sia su ambiente Windows che MacOS. I task di compilazione e minificazione del codice client sono stati automatizzati con Gulp, per il quale è facile trovare moduli per compilare, minificare e ripulire il codice JavaScript. Da non dimenticare Sass per la compilazione e la minificazione degli stili CSS.

Server

Node.jsContenuti e API sono forniti dal web framework Express eseguito da Node.js. Tra i vari moduli usati c’è il view engine Pug, usato per renderizzare le poche viste create lato server. Il processore d’immagini GraphicsMagick invece si occupa della creazione on-demand delle miniature per le foto. La galleria crea le miniature alla prima richiesta, per poi salvarle in una cache locale di ogni singola galleria. Le statistiche d’uso e i log delle richieste vengono memorizzate in documenti JSON su di un server MongoDB locale.

Client

ReactL’interfaccia utente è stata sviluppata utilizzando React con architettura Flux. Il codice lato client è stato scritto in ECMAScript 2015 per poi essere compilato con Babel. Polyfill completa la compatibilità dei browser con le nuove tecnologie JavaScript. La nuova galleria, oltre che avere un’interfaccia responsive, permette di scorrere le foto tramite swipe e di ingrandirle tramite pinch-to-zoom. Il supporto alle gesture è fornito dalla libreria Hammer.js.

Il nuovo progetto Galleria Fotografica è in continuo aggiornamento e nuove feature potranno arrivare in futuro. Come sempre, ogni consiglio o critica è ben accetto per la crescita del progetto.

Buona visione su https://foto.stefanoginobili.it.