Architettura Jamstack

Con il termine Jamastack, ci si riferisce ad un’architettura di un’applicazione web basata su JavaScript, APIs e Markup (JAM).

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"

Mathias Biilmann (CEO & Co-founder of Netlify).

Facendo una ricerca su Google si trovano numerose definizioni di Jamstack, molto spesso ci si riferisce ad un approccio architetturale per la creazioni di applicazioni web, nello specifico però i concetti chiave sui quali ci possiamo focalizzare sono i seguenti:

  • Disaccoppiamento: front end e back end sono totalmente disaccoppiati. Il front end interagisce con il back end solo tramite api.

  • Staticizzazione: Il front end è generato staticamente durante una fase di build, producendo un insieme di files html, css, e js ottimizzati per il rendering parziale o totale del sito. Con questo approccio il sito può essere servito direttamente tramite CDN senza l’ausilio di nessun server dedicato.

  • Dinamicità e personalizzazioni: una volta servito il sito pre-renderizzato attraverso la CDN (in maniera veloce e sicura), tramite l’utilizzo di javascript ed api back end si può completare l’esperienza utente aggiungendo dinamicità e personalizzazioni.

Vantaggi

Vantaggi

Performance

Le performance sono ottimizzate in quanto vengono serviti contenuti pre-renderizzati in fase di build attraverso una CDN, in questo modo si minimizzano rispettivamente il tempo di rendering della pagina e quello di serving dei contenuti.

Sicurezza

Non ci si deve preoccupare di server o problemi di vulnerabilità di database.

Costi

I costi per il serving statico di file da una CDN sono di gran lunga inferiori a quelli necessari per il mantenimento di un’infrastruttura server.

Migliora l’esperienza dei dev

Gli sviluppatori possono focalizzarsi sullo sviluppo del front end senza preoccuparsi di altri problemi, come ad esempio quelli che nascono lavorando su un’architettura monolitica. Questo approccio si traduce in maggiore velocità di sviluppo e sviluppatori più felici.

Scalabilità

Pre-built front end + CDN === scalability Cosa c’è di più scalabile del serving di file da una CDN?

Web Vitals

Nel mondo web di oggi l’attenzione ai web vitals (codificati da Google) è più che mai fondamentale, per chi non conoscesse questo termine, ci si riferisce a tre parametri fondamentali: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS), tutti misurabili mediante Pagespeed Insights, questi misurano le performance di un sito web e ne determinano anche la bontà per l’indicizzazione.

Un’applicazione basata su architettura Jamstack, sviluppata in modo adeguato e seguendo le best practices per l'ottimizzazione delle performance, migliora in maniera drastica i punteggi relativi ai web vitals.

Come si compone un Jamstack

La prima cosa da affrontare per la realizzazione di un sito jamastack è la generazione dei file statici, per fare ciò ci sono diversi approcci, andiamo a vederli in seguito.

Generazione file statici

Generazione file statici

Handmade

La prima soluzione, probabilmente la più “banale”, è quella di generare i file statici (html, css e js) a mano senza l’aiuto di nessun strumento specifico. Questa è sicuramente la soluzione con la massima flessibilità, ma come sappiamo, non sempre le cose fatte a mano producono risultati migliori, per non parlare poi dei tempi di sviluppo!

Site Builders

I site builders sono gli strumenti più adatti ai non tecnici, non richiedono skills da developer ed è possibile realizzare un sito statico attraverso strumenti visuali semplici ed intuitivi. Tra i più conosciuti si può citare stackbit e builder.io.

Il contro di questa soluzione è la difficoltà/assenza di aggiungere personalizzazioni al di fuori di quello permesso dalla piattaforma utilizzata.

Static site generator

Molti siti Jamstack sono realizzati utilizzando dei generatori di siti statici, alcuni dei più conosciuti sono sicuramente Gatsby (con il quale abbiamo realizzato questo sito web), Next.js e Hugo.

Uno static site generator molto flessibile ed interessante è Nuxt.js (basato su Vue.js), lo abbiamo provato direttamente per lo sviluppo di un e-commere headless e ne siamo rimasti colpiti positivamente, c’è da aggiungere che è molto di più di un “semplice” static site generator, supporta diverse modalità tra le quali anche il SSR (server side rendering).

Uno degli ultimi arrivati nel mondo dei site generator è sicuramente Hydrogen, realizzato da Shopify e basato su React: è un framework per lo sviluppo di e-commerce focalizzato su performance e personalizzazioni, sfruttando a pieno le storefront api di Shopify.

Headless CMS

Headless CMS

A meno che non si voglia creare un sito con contenuti completamente statici, un’altro strumento indispensabile da inserire in un’architettura Jamstack è senza ombra di dubbio un CMS headless, un servizio che permette di gestire i contenuti da visualizzare nel proprio sito, naturalmente tutto accessibile tramite API!

I cms headless più conosciuti sul mercato sono Contentful, sanity.io, Dato CMS, Netlify CMS e molti altri.

Headless commerce

Headless commerce

Con questo termine ci si riferisce ad un servizio per la gestione di un e-commerce (gestione prodotti, ordini, pagamenti ecc..) totalmente accessibile mediante api.

Negli ultimi anni il mondo dell'e-commerce ha iniziato ad orientare la propria attenzione verso il mondo headless, in questo modo sono nati prodotti specifici come ad esempio Commerce Layer, startup italiana che sta avendo grande successo, oppure altri prodotti già noti come Shopify, hanno iniziato a sviluppare la propria soluzione headless (storefront api).

Deployment e hosting

Deployment e hosting

L’ultima parte di questa elaborata architettura è quella del deployment, anche questa fondamentale per l’ottimizzazione delle performance.

Una volta generati i nostri file statici (html, css , js e assets), è necessario pubblicarli mediante un servizio di hosting per renderli disponibili a tutti gli utenti, in questo ambito ci sono numerose soluzioni che si differenziano tra di loro per prezzi e performances, noi ne citiamo alcuni con i quali abbiamo fatto esperienza diretta e che ci sono sembrati degni di nota: Vercel, Cloudflare e Netifly.

Shopify headless

Una nota conclusiva la vogliamo dedicare a Shopify ed al già citato e neonato Hydrogen: questo framework, basato su React, ci fornisce gli strumenti necessari per la realizzazione del front end di un e-commerce che sfrutta a pieno le potenzialità delle storefront api di Shopify.

Con Hydrogen, Shopify ha voluto dare a tutti gli sviluppatori uno strumento molto potente per la realizzazione di e-commerce custom ad alte performance, cosa che fino a questo momento non era possibile fare utilizzando la versione cloud di Shopify.

Vista la nostra curiosità per le novità del mondo front end e per le performance, abbiamo deciso di divertirci un po’ con Hydrogen e abbiamo realizzato un demo e-commerce  che potete trovare a questo indirizzo: https://bitforce-headless-shopify.herokuapp.com

Provare per credere, i web vitals per questo e-commerce sono a dir poco sbalorditivi (vedi l'immagine a fianco).

Vi invitiamo ad approfondire l'argomento Hydrogen, andando a leggere il nostro blog dedicato a questo indirizzo(https://www.headless-shopify.com/) e consultare il sito https://hydrogen.shopify.dev/