Introduzione

JAMstack è una definizione data a una tipologia di architettura per lo sviluppo di soluzioni web. Non si tratta di un linguaggio o di uno strumento, ma di una pratica per la realizzazione di progetti web.
Lo stack JAM garantisce prestazioni migliori, maggiore sicurezza e meno costi di delivery.
Inoltre è abbastanza ‘nerd’ quindi una modalità interessante e divertente per gli sviluppatori.

Il sito https://jamstack.org/. contiene informazioni di dettaglio rispetto allo stack JAM.

Architettura

La definizione di JAMstack è stata coniata da Mathias Biilman, CEO di Netlify.

• JavaScript: la logica dell’applicazione risiede sul client oppure in funzioni serverless.
• API: le funzionalità (autenticazione, dati, pagamenti, ecc.) vengono fornite da servizi esterni o microservizi accessibili via API.
• Markup: i contenuti (HTML/CSS/JS) sono pre-renderizzati, spesso con strumenti come Gatsby, Next.js, Nuxt.js, Hugo, ecc.

1. L’utente richiede la pagina da un browser.
2. I file statici (HTML, CSS, JS) sono già pre-renderizzati e distribuiti tramite un CDN (Content Delivery Network).
3. Il JavaScript nel browser, se necessario, chiama le API (o funzioni serverless) per manipolare dati, autenticarsi, ecc.
4. Queste API possono risiedere su servizi esterni (es. Firebase, FaunaDB, AWS Lambda, ecc.) oppure su un tuo backend minimalista.

In questo modo, gran parte del sito è statica e servita via CDN, risultando molto veloce da caricare e facile da scalare a seconda del traffico.

Componenti

L’architettura JAM è definita da specifici servizi che permettono la sua realizzazione.

Serve un componente applicativo che genera il contenuto HTML/CSS da renderizzare. Una rete CDN per distribuire effettivamente il contenuto. Un tool per la gestione dei contenuti (headless CMS).

Static Site Generator (SSG)

Rappresenta uno strumento per generare HTML statici a partire da contenuti dinamici (markdown, api, database). Contenuti generati e caricati poi in CDN per essere serviti all’utente.

Alcuni esempi sono per esempio:

• Gatsby → https://www.gatsbyjs.com/
• Hugo → https://gohugo.io/
• Jekyll → https://jekyllrb.com/

Headless CMS

Un Headless CMS è un sistema di gestione dei contenuti (CMS) che non genera direttamente le pagine web, ma fornisce i contenuti tramite API.

Alcuni esempi:

• Strapi → https://strapi.io/
• Contentful → https://www.contentful.com/
• Tyna → https://tina.io/

CDN (Content Delivery Network)

Una CDN è una rete globale di server che distribuisce i contenuti di un sito in modo geograficamente ottimizzato.

Quando un utente accede al sito, la CDN serve i file statici dal server più vicino a lui, migliorando la velocità e le prestazioni.

Alcuni esempi:

• Cloudflare → https://www.cloudflare.com/it-it/
• Netlify → https://www.netlify.com/
• AWS Cloudfront → https://aws.amazon.com/it/cloudfront/

Conclusioni

Usare lo stack JAM permette di realizzare applicazioni web più sicure, seo oriented e soprattutto economiche.

Non serve un vero server per gestire il sito che viene generato e deployato su CDN.