Lo stack JAM, spesso stilizzato come Jamstack o JAMStack, si riferisce all'utilizzo di JavaScript, API e Markup per sviluppare siti Web e applicazioni incentrati sul cliente. Un sistema basato su Jamstack eseguirà tutta la sua logica sul client, eliminando i componenti lato server.
Il termine è stato coniato da Netlify e descrive un approccio di sviluppo web che offre prestazioni più elevate, migliore sicurezza e un migliore esperienza per gli sviluppatori. Invece di incorrere in un round trip del server ad ogni caricamento di pagina, i siti Jamstack sono autosufficienti all'interno del browser.
I siti statici utilizzano il Jamstack?
I siti statici creati solo con HTML, CSS e JavaScript sono intrinsecamente lato client senza programmazione di back-end. In questo modo, soddisfano i criteri di Jamstack.
Jamstack va oltre i semplici siti Web e blog. Considerando che i siti statici utilizzano solo il “markup” aspetto, forse con un po' di JavaScript, un'app Jamstack potrebbe avere ancora un backend e un archivio dati persistente.
La differenza rispetto alle applicazioni web tradizionali sta nel modo in cui i dati raggiungono il punto vendita. In un sistema legacy, potresti avere un modulo HTML che crea record in un database SQL quando invii la pagina. Hai bisogno di uno stack di backend personalizzato con un'infrastruttura di supporto.
Pubblicità
Un'applicazione Jamstack ridurrà la complessità lato server inviando dati tramite API. Puoi comunque implementare il tuo backend, ma è anche comune utilizzare una soluzione ospitata da terze parti come Netlify o Firebase di Google. Ora l'unica infrastruttura di cui hai bisogno è un server web di base per fornire il tuo codice HTML e JavaScript al browser dell'utente.
I componenti chiave
< p>Ecco un riepilogo dei tre componenti costitutivi di Jamstack:
-
- JavaScript – L'intera esperienza è supportata da JavaScript all'interno del browser dell'utente. Puoi utilizzare qualsiasi framework desideri, indipendentemente dal fatto che tu preferisca React, Vue, Angular o la tua soluzione Vanilla.
- API< /forte>– I dati entrano ed escono dal browser dell'utente tramite API. Se è necessario inviare un modulo, i suoi valori di input devono essere acquisiti da JavaScript e inviati al tuo backend o a un servizio di terze parti. Ciò migliora l'esperienza dell'utente consentendo di visualizzare gli spinner di caricamento e le barre di avanzamento quando si verificano i dati recuperati.
- Markup– Il contenuto viene creato da formati di markup leggibili dall'uomo come HTML e Markdown. Questi possono essere serviti al browser così come sono per l'analisi tramite JavaScript. Non è necessario ospitare un complicato CMS per creare e modificare i contenuti. Aggiungeresti un nuovo post sul blog scrivendo un file Markdown e inviandolo al repository di controllo del codice sorgente del tuo progetto.
L'approccio generale vede il markup e JavaScript atterrare nel browser dell'utente dal tuo server web. Il JavaScript quindi media tra il tuo utente e le tue API di archiviazione di backend per facilitare qualsiasi altra interazione di dati richiesta.
Un'esperienza di sviluppo più fluida
L'utilizzo di Jamstack ti consente di concentrarti sulla fornitura di funzionalità e sul miglioramento dell'esperienza utente. Non è necessario dedicare tempo alla configurazione o alla manutenzione di costose infrastrutture di backend. Invece, puoi utilizzare le API platform-as-a-service per recuperare e salvare i dati della tua app.
Jamstack si abbina bene ai flussi di lavoro di sviluppo e distribuzione basati su Git. Poiché il tuo stack è in realtà solo un server web, puoi rappresentare tutto come un semplice file di testo nel tuo repository. Le pipeline di distribuzione continua ti aiutano a spedire gli aggiornamenti rapidamente, senza dover eseguire nuovamente il provisioning dei server.
La maggior parte delle volte non ospiterai autonomamente alcun componente dell'infrastruttura. I sistemi Jamstack vengono comunemente distribuiti direttamente su un host di file statico come Netlify, Firebase, GitHub Pages o persino un semplice bucket S3. In alternativa, puoi containerizzare la tua applicazione con Docker e avviarla in un cluster Kubernetes.
In entrambi i casi, non stai copiando manualmente i file o modificando le impostazioni del server – stai scrivendo il codice e ti unisci al tuo ramo principale per la distribuzione. Un ultimo pezzo di solito è un CDN come Cloudflare che si trova davanti alla tua soluzione server web, memorizzando nella cache i contenuti per migliorare ulteriormente le prestazioni per gli utenti finali.
Componenti disaccoppiati
< p>Jamstack ti consente di disaccoppiare i singoli componenti della tua applicazione. In un sito Web tradizionale basato su CMS, il codice, i contenuti e gli stili convivono in un unico sistema. È necessario disporre dell'intero CMS per svolgere qualsiasi singola funzione.
Pubblicità
L'utilizzo di Jamstack separa completamente questi componenti. Il tuo server web serve il codice mentre i fornitori di piattaforme esterne gestiscono i tuoi dati. Questo ti dà una maggiore flessibilità per cambiare pezzi del tuo stack quando le tue esigenze cambiano.
Anche l'utente finale beneficia di un'esperienza più resiliente. Anche se l'archivio dati non funziona, puoi comunque fornire il markup principale e JavaScript per visualizzare una pagina di errore corretta. I tempi di caricamento sono più rapidi poiché il browser recupera solo il codice, non i dati, al primo contatto con il tuo server.
Una differenza fondamentale rispetto agli approcci con rendering del server è che i siti Jamstack sono sempre pre-costruiti. Stai offrendo risorse completamente statiche, invece di combinare codice e dati su ogni richiesta ricevuta dal server. Il tuo processo di compilazione eseguirà la fase di compilazione una volta per distribuzione, creando il markup che il tuo server web invia ai browser. Ciò aumenta l'efficienza e le prestazioni.
Gli svantaggi
Lo svantaggio più significativo di Jamstack può essere lo stesso modello di aggiornamento basato su codice che spesso lo rende così attraente. Spesso è più difficile per gli autori e gli editori di contenuti essere coinvolti, poiché di solito hanno bisogno di imparare a scrivere il markup in HTML o Markdown. Questo può scoraggiare gli scrittori non tecnici che hanno familiarità con un'esperienza grafica WYSIWYG.
Un'altra limitazione è la tua dipendenza intrinseca da piattaforme di terze parti. Jamstack incoraggia l'uso di API e provider di hosting esterni che potrebbero scomparire o modificare la loro offerta durante la notte. Mentre l'esecuzione della tua infrastruttura comporta problemi di manutenzione, ti dà anche la certezza che il tuo stack rimarrà funzionante a lungo nel futuro.
Pubblicità
È anche possibile diventare troppo grandi per Jamstack. L'implementazione di funzionalità dinamiche pesanti può causare problemi se la piattaforma che stai utilizzando non è in grado di soddisfare i tuoi requisiti. Potresti finire per avvitarti sul tuo backend a metà della vita del tuo prodotto. Se servi principalmente testo, immagini e alcune semplici chiamate API, Jamstack dovrebbe funzionare bene per te. Per scenari più complessi, potrebbe essere più complicato trovare soluzioni pronte all'uso da inserire nel codice JavaScript e nel markup.
Scarica gli strumenti
< p>Puoi creare app Jamstack con nient'altro che un editor di testo e un terminale. Seleziona un provider di hosting, installa la sua CLI, scrivi alcuni file HTML ed esegui il comando deploy per pubblicare il tuo sito.
In pratica, la maggior parte delle persone sceglie di utilizzare un qualche tipo di scaffold per renderlo più facile da ottenere cominciato. Se stai creando un'app Web, puoi utilizzare un framework JavaScript per beneficiare del routing e della navigazione lato client. Per i siti Web statici, probabilmente vorrai utilizzare un generatore di siti statici come Jekyll, Hugo o Gatsby che ti permetta di mantenere il tuo tema separato dal tuo contenuto.
Le funzioni dinamiche vengono aggiunte integrando API di terze parti, ospitando i propri microservizi o affidandosi a funzioni serverless create con una piattaforma cloud pubblica. Le soluzioni basate su JavaScript sono prontamente disponibili per implementare moduli, ricerca, e-commerce e altre funzionalità complesse, senza dover scrivere una riga di codice di backend. Puoi trovare elenchi pubblici di servizi ideali con cui potresti integrarti su GitHub.
Conclusione
Il Jamstack è un approccio allo sviluppo di app web che favorisce l'inserimento di quanto più codice possibile nel client. JavaScript e markup vengono inviati al browser; i dati raggiungono quindi i tuoi servizi di backend tramite le interazioni API.
La popolarità di Jamstack è cresciuta con i miglioramenti delle API del browser osservati negli ultimi anni. JavaScript è anche maturato in modo significativo come linguaggio, aiutato da dialetti come TypeScript. Questi sviluppi hanno reso il targeting esclusivo del frontend una proposta più realistica per molti più team.
Pubblicità
L'utilizzo di un approccio Jamstack spesso semplifica la tua app, facilitando uno sviluppo più rapido e una maggiore scalabilità. Con meno endpoint lato server da proteggere, il tuo stato di sicurezza migliora e il carico di manutenzione è ridotto. Jamstack non può soddisfare tutte le applicazioni, ma vale la pena considerare quando si lavora su sistemi front-end con funzionalità di backend relativamente rilassate.
Infine, non farlo stress nel fare le cose al 100% “alla maniera di Jamstack” – l'approccio è aperto all'interpretazione. Il concetto è davvero quello di mettere al primo posto il frontend utilizzando la potenza di JavaScript e delle API. Ciò non significa che non puoi eseguire la tua infrastruttura o scrivere il tuo backend.
Concentrati sul disaccoppiamento dei componenti nel tuo stack, accelerando i tempi di caricamento del client e recuperando i dati in modo asincrono tramite API nel momento in cui il browser ne ha bisogno. Queste tecniche aiutano a creare applicazioni più resilienti con una migliore esperienza utente, sfruttando appieno le capacità del Web moderno.