Cos'è JAMstack?

Cos'è JAMstack?

JAMstack è un approccio allo sviluppo Web frontend (la creazione di contenuti e interfacce con cui gli utenti interagiscono). Consente agli sviluppatori di creare rapidamente e di servire in modo efficiente agli utenti siti Web statici.

In un'applicazione Web JAMstack, la maggior parte possibile di codice HTML viene precompilata e archiviata in una rete di distribuzione di contenuti (CDN). Invece di eseguire un'applicazione backend monolitica sul lato server per generare contenuti dinamici, i componenti dinamici dell'applicazione si basano su API. L'ideale sarebbe che ciò si traducesse in un'esperienza utente molto più veloce e in un'esperienza di sviluppo molto più semplice.

Cosa significa il termine "JAMstack"?

JAM sta per JavaScript, API, Markup.

• JavaScript è il linguaggio di programmazione utilizzato dalle applicazioni Web
• Un'API (interfaccia di programmazione dell'applicazione) è un modo per richiedere dati dal programma o dall'applicazione di qualcun altro
• La markup è un codice (HTML e CSS) che fornisce istruzioni di formattazione ai browser

Stack si riferisce alla combinazione di tutti questi elementi in un modo che consente agli sviluppatori di creare applicazioni e siti Web.

Un sito Web o un'applicazione JAMstack viene costruito utilizzando solo questi tre elementi. Il sito Web statico che l'utente vede è costruito con codice di markup HTML e CSS. JavaScript viene utilizzato per qualsiasi funzionalità dinamica necessaria e per chiamare le API. Le API forniscono il backend dell'applicazione.

Supponiamo che Bob crei un'applicazione Web che fornisce aggiornamenti sui risultati del calcio europeo. Bob crea un'applicazione backend che viene eseguita su un server da lui gestito e controlla costantemente i punteggi delle ultime partite. Quando un utente apre l'applicazione Web, il server di Bob genera pagine HTML che visualizzano quei punteggi e poi invia tali pagine all'utente. Tuttavia, l'applicazione Web di Bob è un po' lenta: prima che un utente possa visualizzare queste pagine, deve attendere che l'applicazione backend venga eseguita, che venga generato l'HTML e che questo raggiunga il suo dispositivo.

Supponiamo ora che Bob ricostruisca la sua applicazione web utilizzando un approccio JAMstack. Invece di scrivere un'intera applicazione backend, crea una serie di pagine HTML leggere che memorizza in una CDN. Quando un utente apre l'applicazione, la CDN gli consegna immediatamente le pagine HTML corrispondenti, poiché la CDN è molto più vicina all'utente rispetto al server di Bob. L'applicazione effettua anche una chiamata API per compilare la pagina con i punteggi delle partite di calcio in diretta. Ora l'applicazione web di Bob si carica molto rapidamente per l'utente e, dal punto di vista di Bob, c'è molto meno bisogno di scrivere codice per gestire il lavoro di backend, lato server, di aggiornamento dei punteggi.

Cos'è un sito Web statico?

Un sito Web statico è composto da una o più pagine web statiche, ovvero file HTML che vengono caricati nel browser nello stesso modo, indipendentemente da chi carica il file. Poiché le pagine Web statiche sono composte esclusivamente da HTML, senza alcun codice aggiuntivo da eseguire nel browser, possono caricarsi in tempi estremamente rapidi. Per vedere come appare il codice HTML, fai clic con il pulsante destro del mouse su una pagina web mentre utilizzi il browser Chrome e seleziona "Visualizza sorgente pagina".

Al contrario, le pagine Web dinamiche sono diverse ogni volta che vengono caricate. Per offrire un'esperienza utente più interattiva e personalizzata, le pagine Web dinamiche cambiano in base all'apertura della pagina da parte dell'utente, alla posizione in cui la pagina viene caricata, all'ora del giorno e a qualsiasi altro input di dati variabili. Quando viene caricata una pagina Web dinamica, il codice deve essere eseguito sul server Web che ospita la pagina Web oppure all'interno del browser dell'utente. Questa dipendenza dall'esecuzione del codice può rallentare l'esperienza dell'utente.

Le pagine Web dinamiche non sono l'unico modo per creare un'esperienza utente modernizzata. Un sito Web JAMstack prevalentemente statico può comunque offrire agli utenti un'esperienza dinamica e personalizzata, generando occasionalmente nuovi contenuti statici o richiamando le API per compilare contenuti aggiornati.

In che modo le applicazioni JAMstack gestiscono le funzioni di backend?

Nello sviluppo delle applicazioni, il backend è il codice che viene eseguito su un server dietro le quinte. Solitamente l'utente non è consapevole di cosa accade nel backend mentre utilizza un sito Web o un'applicazione. Anche se JavaScript e la markup determinano il modo in cui un'applicazione JAMstack appare all'utente, necessita comunque di funzioni di backend per funzionare. JAMstack gestisce questa operazione richiamando le API tramite JavaScript.

Grazie all'utilizzo delle API, gli sviluppatori JAMstack non devono creare le proprie applicazioni backend. Possono basarsi su API già esistenti per far funzionare i loro siti Web e le loro app.

Quando gli sviluppatori vogliono creare funzionalità personalizzate per un'applicazione, possono creare una nuova API. Le API possono essere riutilizzate in vari contesti, quindi quando gli sviluppatori creano le proprie API per il backend, dovrebbero dover realizzare quella funzionalità solo una volta per poterla utilizzare in applicazioni future.

In che modo JAMstack è correlato ai microservizi?

L'utilizzo delle API consente agli sviluppatori JAMstack di adottare un approccio di microservizi al backend. In un'architettura di microservizi, il backend di un'applicazione è suddiviso in blocchi più piccoli che vengono eseguiti a comando, proprio come un'applicazione JAMstack chiama varie API quando necessario, ma per il resto non ha bisogno del supporto del backend.

È anche possibile creare un'applicazione JAMstack che utilizzi un backend parzialmente o completamente serverless. Le funzioni serverless sono piccoli frammenti di codice riutilizzabili che vengono eseguiti su richiesta. Tuttavia, un'architettura serverless spesso richiede un approccio più pratico al backend da parte dello sviluppatore, poiché essenzialmente sta costruendo l'applicazione backend da solo invece di chiamare le API (sebbene non debbano preoccuparsi del provisioning dei server).

Quali sono i vantaggi dell'utilizzo di JAMstack?

• Prestazioni: quasi tutto il contenuto di un'applicazione JAMstack è costituito da file HTML statici forniti da una CDN. Questo è il modo più veloce per fornire contenuti Web agli utenti finali.
• Scalabilità: se un'applicazione è "scalabile", significa che risponde bene a notevoli incrementi di utilizzo. Poiché il frontend di JAMstack è veloce e il backend è leggero, le applicazioni JAMstack sono spesso estremamente scalabili.
• Migliore esperienza per gli sviluppatori: JAMstack consente agli sviluppatori di concentrarsi sulla creazione di un'esperienza utente frontend coinvolgente, senza doversi preoccupare dei problemi di backend o di prestazioni.

Cloudflare consente agli sviluppatori di creare applicazioni ospitate direttamente sulla CDN globale di Cloudflare. Scopri di più su Cloudflare Pages, la nostra piattaforma JAMstack per la creazione di siti Web statici. Puoi anche scoprire di più sull'implementazione di un sito Gatsby, un sito Hugo, un'applicazione React e altro con Cloudflare Pages e guardare una panoramica video di Cloudflare Pages della società di analisi Redmonk.