Jamstack: la rivoluzione del sito web statico che ribalta lo sviluppo web

Jamstack è una filosofia di sviluppo web sempre più popolare che mira ad accelerare sia il processo di sviluppo web che i tempi di download delle pagine web. Attingendo al movimento devops e alle tecniche di integrazione continua / consegna continua (CI / CD) che stanno diventando la norma in molte organizzazioni, Jamstack capovolge le tecniche di lunga data per la creazione di pagine web interattive, spostando l'esecuzione del codice in fase di caricamento dai server web e verso JavaScript nel browser e servizi esterni a cui si accede tramite le interfacce di programmazione delle applicazioni (API).

Cos'è Jamstack? Jamstack, definito

Jamstack è un modello di applicazione web basato su tre pilastri, che forniscono le iniziali nel suo nome: JavaScript, API e markup. Le pagine Web per un sito Jamstack sono costituite da un linguaggio di markup standard, quindi possono essere create e testate ovunque, senza dipendenze da app server o tecnologie lato server come Node.js. Qualsiasi funzionalità interattiva è fornita dal codice JavaScript standard che viene eseguito nel browser, che effettua chiamate ad API riutilizzabili su HTTPS per ottenere l'accesso a dati esterni o qualsiasi altra funzionalità che non può essere incorporata nella pagina web stessa.

Per capire perché la filosofia Jamstack è rivoluzionaria, considera lo stack LAMP, che esemplifica il modo in cui la maggior parte degli sviluppatori ha pensato allo sviluppo web per la maggior parte degli ultimi 15 anni. LAMP sta per Linux (il sistema operativo che alimenta la maggior parte dei server Web), Apache (il software del server in esecuzione su quelle macchine Linux), MySQL (il database in cui sono archiviate le informazioni necessarie all'applicazione Web) e PHP / Perl / Python (il linguaggio che il codice lato server è scritto). Quando si punta il browser a un sito Web basato su LAMP, il server Web esegue il codice lato server che genera la pagina Web al volo, attingendo i dati secondo necessità dal database MySQL.

L'architettura LAMP consente la creazione di siti Web dinamici e interattivi, ma richiede anche un server Web potente e maggiore è il traffico che un sito riceve, maggiore è la potenza di elaborazione necessaria sul lato server. Anche con un server completo, la creazione e il caricamento delle pagine Web dinamiche può richiedere molto tempo. In un mondo di persone con tempi di attenzione brevi che navigano sul Web sui loro telefoni, tale ritardo è diventato sempre più inaccettabile.

Jamstack è nato come parte del movimento del "web statico", nato a metà degli anni 2010 come reazione contro questo modello tradizionale di come dovrebbe funzionare un sito web. Per comprendere Jamstack, è necessario comprendere la tecnologia odierna dietro  i siti Web statici.

Siti statici, generatori di siti statici e Jamstack

Se dovessi spiegare a un principiante completo come funziona il web, potrebbe andare qualcosa del genere: da qualche parte nel filesystem di un server web ci sono file HTML, accessibili da indirizzi HTTP, che un browser web scarica e poi interpreta per creare una pagina web . Ma questa è una descrizione di un sito statico:  presuppone che i file HTML esistano già quando il browser web li cerca. Come abbiamo già visto, gran parte del web negli ultimi dieci anni è stato dominato da siti dinamici, che invece generano file HTML al volo in risposta alle richieste web, spesso in base a parametri passati al web server tramite form o nel URL stesso.

Nei primissimi giorni del web, quando le pagine web erano invariabilmente statiche, molti sviluppatori web scrivevano il codice HTML a mano. Man mano che le pagine web diventavano più complesse, arrivarono strumenti come Dreamweaver di Macromedia, che potevano generare quelle pagine HTML statiche a livello di programmazione. Quando il movimento del web statico decollò a metà degli anni 2010, iniziò a emergere una nuova ondata di cosiddetti generatori di siti statici , inclusi Gatsby, Hugo e Jeckyll. A differenza degli strumenti WYSIWYG come Dreamweaver, i generatori di siti statici sono guidati dalla riga di comando e progettati per essere integrati con i processi CI / CD. I file HTML vengono generati dagli strumenti, spesso basati su contenuti scritti in Markdown, e caricati automaticamente in un repository di controllo della versione come GitHub. Poiché questi file sono contrassegnati come pronti per la produzione, le pagine statiche sul sito Web live vengono aggiornate automaticamente.

Una cosa importante da tenere a mente è che statica in questo contesto non significa che si tratti di semplici pagine web 1.0 che non sono interattive. Ricorda, queste pagine possono includere JavaScript avanzato che viene eseguito nel browser ed effettua chiamate API a database, funzionalità lato server o funzioni serverless ospitate. Ma poiché nessuna di queste esecuzioni avviene sul server web stesso, un sito statico non necessita di un host web di tipo industriale completo di database. Molti siti statici vengono distribuiti alle reti di distribuzione dei contenuti, o CDN, in cui il contenuto viene replicato su più server in tutto il mondo per essere consegnato rapidamente agli utenti ovunque.

Mathieu Dionne, responsabile marketing di Snipcart, descrive i primi giorni di questo nuovo mondo di siti statici in un post sul blog e afferma che intorno al 2015, "i fondatori di Netlify ... avevano appena inventato il termine 'Jamstack' per aggirare il problema la connotazione negativa di "web statico". In altre parole, abbiamo descritto il processo Jamstack in questa sezione. Ma ora abbiamo bisogno di discutere brevemente Netlify e il loro ruolo nell'ecosistema.

Cos'è Netlify?

Netlify è una società di cloud computing e web hosting. Il cofondatore di Netlify Mathias Biilmann ha coniato il termine Jamstack ei servizi di Netlify sono personalizzati per i clienti che desiderano creare siti basati sulla filosofia Jamstack.

Netlify afferma di aver risolto un problema specifico che stava trattenendo i siti statici, ovvero l' invalidamento della cache. I siti Web dinamici basati su database possono consumare molte risorse del server, ma puoi essere certo che mostreranno l'ultima versione del tuo sito Web a tutti i visitatori che si fermano. Poiché i siti Web Jamstack sono spesso ospitati su più server distribuiti di una CDN, gli aggiornamenti sono meno semplici. Possono essere necessari da pochi minuti a ore prima che ogni server CDN capisca che la sua versione cache del sito non è più valida. Il CDN di Netfliy fornisce l'invalidamento istantaneo della cache per i file HTML per aggirare questo problema.

Ma Netlify non è l'unico provider di hosting nello spazio Jamstack e non ha alcun tipo di marchio o controllo proprietario sul termine. Sono disponibili numerose soluzioni di hosting e distribuzione Jamstack e la maggior parte dei grandi fornitori di cloud sta entrando in azione, tra cui AWS, Google Firebase e Microsoft Azure.

Jamstack CMS

Se sei una persona che ha a che fare con un sito Web quotidianamente, sai che creare e ospitare il sito Web è solo l'inizio. Hai anche bisogno di un modo per creare nuovi contenuti e aggiungerli al tuo sito. Poiché le persone che lo faranno in genere non saranno programmatori, avranno bisogno di uno strumento intuitivo, ovvero un sistema di gestione dei contenuti o CMS. I CMS tradizionali, come WordPress, offrono un'interfaccia utente back-end in cui è possibile immettere il contenuto del sito Web, gestire un database in cui è archiviato tale contenuto e creare pagine Web dinamiche che presentano quel contenuto in risposta alle richieste del browser.

I CMS per i siti Jamstack funzionano in modo diverso e sono generalmente indicati come headless. Un CMS headless offre un'interfaccia utente per l'immissione e la gestione del contenuto e un database o altri mezzi per memorizzarlo, ma non genera esso stesso codice HTML che un browser possa analizzare. Invece, le pagine HTML statiche del sito Web utilizzano JavaScript per effettuare chiamate alle API del CMS e il CMS restituisce il contenuto in un formato che JavaScript può trasformare in una pagina Web.

Questo sistema separa completamente il contenuto dalla presentazione, che è ovviamente un ideale di lunga data di programmazione. Poiché il CMS dispone di un'API accessibile, più pagine Web possono accedervi facilmente. Ad esempio, se hai creato versioni separate per dispositivi mobili, desktop e smartwatch del tuo sito web, tutte queste versioni possono accedere agli stessi contenuti archiviati nel CMS.

Netlify, come ci si potrebbe aspettare, ha la propria offerta in questo spazio, chiamata NetlifyCMS, ma sono disponibili numerose altre offerte; lo sviluppatore Nebojsa Radakovic li analizza per te in un post sul blog. Ci sono molti promettenti in quella lista, così come un nome molto familiare. Mentre abbiamo utilizzato WordPress come esempio di un CMS tradizionale, WordPress può essere eseguito come un CMS headless per alimentare anche un sito Jamstack.

Conferenza Jamstack

Netlify lavora anche per creare una comunità Jamstack e sponsorizza le conferenze Jamstack. La società ha organizzato eventi a New York, Londra e San Francisco nel 2019 e ha ospitato un evento virtuale nel maggio del 2020. Al momento della stesura di questo documento, è possibile iscriversi all'evento di San Francisco in programma dal 6 al 7 ottobre 2020, tuttavia la pandemia di coronavirus ha ancora i piani della conferenza autunnale nell'aria. 

Se desideri aggiornamenti, puoi seguire la conferenza su Twitter. Puoi anche controllare i discorsi passati sul canale YouTube di Jamstack Conf.

[Anche su: I 6 migliori IDE JavaScript | I 10 migliori editor JavaScript]

Tutorial Jamstack

Stai cercando di andare più a fondo? Dai un'occhiata a questi tutorial Jamstack che ti daranno un'esperienza pratica nella creazione di un sito Jamstack:

  • Lo sviluppatore David Neal ha un buon tutorial introduttivo sulla creazione di un sito Jamstack, iniziando in modo molto semplice e poi diventando sempre più complesso. 
  • Sul blog di LogRocket, l'ingegnere del software Ogundipe Samuel offre uno sguardo approfondito e dettagliato sulla creazione di un sito di e-commerce sui principi di Jamstack. 
  • Netlify offre un tutorial video di più di tre ore che copre molti argomenti, dalle basi agli argomenti più avanzati. 

Una volta acquisiti i concetti di base delineati qui, sarai pronto per iniziare a lavorare con lo sviluppo di Jamstack nella tua vita professionale. Buon apprendimento!