no image description
3 min read

JAM Stack Architecture

JAMstack è una moderna architettura di sviluppo web. Non è un linguaggio di programmazione o qualsiasi forma di strumento. Si tratta più di una pratica di sviluppo web volta a garantire prestazioni migliori, maggiore sicurezza, minori costi di delivery e migliore esperienza degli sviluppatori.

Se prendiamo alla lettera la documentazione ufficale, la definizione è:

JAMstack è un'architettura di sviluppo web moderna basata su JavaScript lato client, API riutilizzabili e markup precompilato.

Quando parliamo di "The Stack", non parliamo più di sistemi operativi, server Web specifici, linguaggi di programmazione back-end o database.

JAMstack non riguarda tecnologie specifiche. È un nuovo modo di creare siti Web e app che offre prestazioni migliori, maggiore sicurezza, minori costi per avere l'applicazione scalabile e una migliore esperienza di sviluppo.

JAMstack è una tendenza importante nello sviluppo web coniata da Mathias Biilman, CEO e co-fondatore di Netlify.

[object Object]
jam explained

Nella realizzazione di questo sito abbiamo declinato questa architettura utilizzando alcuni fra i migliori strumenti utilizzabili in questo ambito. Di seguito la descrizione per ognuno di essi.

Headless CMS

Una delle declinazioni possibili della componente Markup (M) è l'utilizzo di un gestore di contenuti privo della parte di presentation (headless, appunto) come un Wordpress, Drupal e simili, ma dotato di possibilità di strutturazione dei contenuti e di editing delle relative entry, molto semplice e flessibile. Tra i più quotati Contentful, DatoCMS, Prismic, Sanity, ...

Noi abbiamo scelto Contentful, in particolare perché gestisce i campi rich text in formato json, tipizzando la formattazione in modo che in fase di rendering sulla pagina si possa agevolmente personalizzare il risultato.

Inoltre vengono messe a disposizione non solo le classiche REST Api, ma un altro tassello tecnologico emergente che in questi ambiti diventa un must have: GraphQL.

Definita come specifiche da Facebook e resa open source nel 2015, gli strumenti che la implementano hanno oggi raggiunto una maturità di livello Enterprise, tanto che big company della new economy (Twitter, Paypal, la stessa Facebook, per citane alcune) la utilizzano appieno.

Static Site Generator

Come library di sviluppo per il linguaggio javascript abbiamo scelto React, altra produzione open source di Facebook che in pochi anni ha conquistato stabilmente il mondo degli sviluppatori front-end, che ne apprezzano la semplicità e linearità.

E' venuta facile quindi la scelta dello strumento di generazione delle pagine statiche, trovando in Gastby tutto ciò che è utile per mettere insieme i vari pezzi del puzzle.

[object Object]
gatsby workflow

Global Deployment

Uno dei vantaggi e quindi delle ragioni per orientare gli investimenti in un sito statico, anche se composto da migliaia o decine di migliaia di pagine, è la possibilità di deployment via CDN, quindi velocità di risposta e prossimità con gli utenti.

Fra i tanti servizi disponibili, abbiamo scelto Netlify, e qui si chiude il cerchio, per la sua capacità di integrarsi con gli strumenti di sviluppo sin qui citati, o per meglio dire citando il loro claim:

One workflow. From local developmentto global deployment.

Un progetto win-win

Naturalmente vi è molto altro che è stato utilmente utilizzato per cercare di realizzare al meglio il progetto che avevamo in mente, ma questi descritti sono indiscutibilmente gli strumenti che hanno permesso di fa lavorare il team in parallelo tra produzione di contenuti e realizzazione delle pagine, e le frequenti build hanno permesso quell'approccio agile (con la "a" minuscola per non incorrere nella suscettibilità dei puristi del pattern) che poi significa riduzione dei tempi e dei costi, ovvero rispetto del budget.