L'approccio JAMstack 🚀

L'approccio JAMstack 🚀

Ci piace sperimentare, per questo abbiamo fatto alcuni test riguardo a questo nuovo metodo di sviluppo.

Quanti di voi hanno già visto questa pagina?

Se consideriamo che una pagina web è formata da html+css+javascript e che la maggior parte dei siti web non sono poi così dinamici da richiedere frequenti calcoli lato server/database perchè questo dovrebbe impedire la visualizzazione del sito?

Essendo sviluppatore web da diversi anni, penso spesso che le tecnologie attualmente in uso siano più degli adattamenti derivanti sviluppi industriali che non tecnologie nate e pensate per il web.

Ecco perchè abbiamo voluto analizzare questa "nuova" e drastica architettura di sviluppo web.

Cos'è la JAMSTACK?

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”
— Mathias Biilmann (CEO & Co-founder of Netlify).

L'idea di fondo è che le pagine web vengano costruite lato client (direttamente nel browser) utilizzando javascript per richiedere i dati dinamici tramite apposite chiamate api, mentre tutti i dati non dinamici dovrebbero essere pregenerati staticamente in fase di sviluppo.

Diversamente dai vecchi stack monolitici, le pagine web non vengono più calcolate/generate dal server ad ogni richiesta http ma, ad ogni modifica del sito, un processo rigenera tutte le pagine in semplici file .html (quindi file statici) pubblicandoli su una CDN (ossia dei server particolarmente performanti e che non necessitano particolari manutenzioni sistemistiche).

Perchè questo nuovo metodo è interessante?

1. Massime performance = Migliori posizionamenti nelle SERP

File statici + CDN: Grazie a questo approccio una pagina web viene servita tra circa mezzo decimo di secondo e i 2/3 decimi.

Tecniche PWA: Semplificando il concetto, quando un utente visita la pagina web, ogni risorsa statica (immagini, font, la pagina web stessa) viene inserita nella memoria del browser (cache - grazie ai service worker), così che la prossima volta l'utente visita la stessa pagina, viene servita la pagina precedentemente scaricata.
Gli spider di Google verificano la presenza di queste tecniche attribuendo al sito un miglior posizionamento.

Prefetching: Quando un utente visita la pagina web, scarica anche le altre pagine principali (quelle a cui è stato associato l'attribuito "prefetching"), questo permette all'utente di muoversi tra le pagine del sito senza tempi di attesa.

Rendering lato client: Abbiamo recentemente testato Gatsby (un PWA Generator che ha recentemente ottenuto un finaziamento di ben 15 milioni di $) basato su React (famosa tecnologia javascript utilizzata da Facebook), è particolarmente interessante perchè ad ogni cambio pagina, viene ridisegnata SOLO la porzione di pagina che cambia (ad esempio header e footer rimangono inalterati), questo migliora la user-experience dell'utente aumentando il numero di pagine visitate e quindi maggiori possibilità di ottenere una "lead" dal sito.

Da alcune recenti ricerche, sembra che, anche se non ufficiale, google stesso monitori l'engagement del sito sfruttando le metriche di analytics al fine di favorire il posizionamento delle pagine che hanno dimostrato un buon coinvolgimento del traffico.


Abbiamo inoltre notato con piacere quanto sia facile migliorare le performance di caricamento delle immagini grazie a plugin che generano immagini ultra-compresse in base64 per poi caricare progressivamente quelle ad alta definizione in lazyloading.

Utilizzando i giusti tool non è poi così complicato ottenere il massimo delle performance su Google Audis:

2. Maggior sicurezza:

I vecchi CMS monolitici (es: Wordpress, Drupal, Magento, Prestashop) sono soggetti ad attacchi nel backend e richiedono frequenti aggiornamenti di sicurezza.
L'approccio JAMSTACK generalmente utilizza dei CMS Headless o Git che sono molto meno diffusi e più sicuri.

3. Miglior esperienza di sviluppo:

La separazione tra backend/frontend (ossia la separazione di dati/grafica del sito) permette di organizzare il team in aree di sviluppo definite migliorandone l'esperienza di sviluppo.


Utilizzando servizi di hosting come Netlify/Zeit NOW, pubblicare le modifiche di un sito sarà particolarmente facile, quando committiamo le modifiche al nostro sito, questo viene automaticamente rigenerato e pubblicato sulla CDN eliminando la necessità di quei tristi e rischiosi deploy manuali tramite ftp.

Quali vantaggi porta al cliente finale?

Queste tecniche di sviluppo sono sicuramente più costose nelle tasche del cliente finale ma, se l'obbiettivo è quello di "farsi trovare su google" superando la concorrenza, questa metodologia può portare ottimi risultati nel lungo periodo.

Per un sito performante e mobile-first è molto più semplice ottenere un buon posizionamento nelle SERP dei motori di ricerca, ne avremo un quindi maggior traffico in entrata e di maggior qualità (questo perchè tale traffico arriva generalmente da ricerche sulla coda lunga di 3/4 parole chiave).

In un modo frenetico come quello attuale l'utente ha bisogno di trovare subito le risposte che cerca, il 40% degli internauti si spazientisce se il tempo di caricamento supera i 2 secondi (consideriamo che da mobile un sito si carica mediamente in 3/4 secondi), se il tempo di caricamento supera i 3 secondi il bounce-rate (probabilità che un utente lasci il sito prima che finisca di caricarsi) può arrivare al 60/70%.

Proprio grazie alle ottime performance l'utente percepirà una maggior serietà da parte dell'azienda, sarà più invogliato a navigare tra le pagine del nostro sito piuttosto che in quello di un competitor, aumentando notevolmente le conversioni.

Ovviamente il primo fattore di ranking di un sito dipende dalla qualità dei suoi contenuti, gli altri fattori rilevanti su cui noi tecnici possiamo lavorare con discreta facilità sono l'esperienza mobile e le performance (aspetti ampiamente considerati e ottimizzati in ambito PWA).

Secondo alcuni recenti studi non c'è una correlazione diretta tra l'utilizzo di tecniche PWA e il posizionamento nelle SERP, ciò nonostante, sembra che i miglioramenti indiretti dell'esperienza utente potrebbero migliorare anche il posizionamento delle singole pagine web.

Considerando l'elevata competizione tra i milioni di siti online, non ti sembra limitante basare la tua strategia web applicando tecniche che non rispecchiano quello che la tua audience desidera e perdendo potenziali clienti?

Quando JAMSTACK conviene e quando no?

Volendo riassumere è sicuramente un ottimo approccio per la creazione di siti "corporate" (siti aziendali di qualità e professionali) o agganciato a piccoli ecommerce.

Questo nuovo approccio tecnico presenta pregi e difetti (soprattuto legate al tempo richiesto per la generazione di tutte le pagine statiche) e per questo va fatta una valutazione accurata.

In quest'infografica vengono ben paragonati pregi e difetti dei diversi stack:

Quando NON conviene?

  1. Un sito di dimensioni medio/grandi (es: oltre 300/500 pagine)
  2. Un sito con numerosi Editor che modificano contemporaneamente i contenuti oltre le 20/30 modifiche/ora.
  3. Un sito con svariati componenti come Gallerie, form e commenti vengono aggiunti al sito utilizzando soluzioni di terze parti che può portare ad una frustrante gestione nel tempo, oppure possono essere sviluppate custom (richiedendo quindi l'assistenza di uno sviluppatore, che tutto sommato può essere una buona cosa).
  4. Aggiunta di funzionalità custom:
    Se si adotta un CMS Headless sarà complicato per lo sviluppatore aggiungere funzionalità di backend (es: reportistica) perchè ci si trova costretti ad utilizzare tecniche serverless anche per rilasciare semplici funzionalità (che sarebbero state sviluppate aggratis con i vecchi sistemi).
    Questa metodologia (Faas - Function as a service) apre un enorme capitolo che non posso affrontare in questo post ma rischia di essere controproducente se affrontata nel modo errato.

Conclusioni

L'utilizzo di questa nuova architettura sta crescendo rapidamente, sembra sufficientemente matura da aver attirato diversi "big" del web e pure le community di Wordpressari tendono a spostarsi verso questo nuovo approccio.

Ritengono che il drastico approccio proposto dall'architettura Jamstack porti ottimi benefici per siti corporate e, grazie a questi nuovi PWA generator, il processo di sviluppo non è poi così complicato fintanto che non si collegano troppi microservizi, altrimenti potrebbe rivelarsi un'arma a doppio taglio.

Note interessanti

Considerando pro e contro di questa metodologia sono nati nuovi CMS Git based (es: Netlify CMS), quando un editor modifica il contenuto di una pagina, questo viene salvato all'interno del sito statico e viene lanciato un commit sul repository di sviluppo.

Sostanzialmente questa procedura semplifica il mantenimento per il singolo sviluppatore e massimizza la sicurezza del sito (anche se consigliabile solo per piccoli progetti).

Un'altro interessante approccio molto usato consiste nel mantenere un vecchio CMS come Wordpress come fonte di gestione dei dati e, grazie ai connettori e plugin GraphQL, si può ottenere un buon bilanciamento tra costi/flessibilità e performance.

Fonti:

https://medium.com/progressivewebapps/case-study-how-implementation-of-pwa-by-canadian-store-helped-to-increase-conversions-and-revenue-c66cd5bcdf63

https://pagepro.co/blog/2019/10/09/how-gatsbyjs-can-help-your-business-to-overtake-competition/

https://serverless.css-tricks.com/
https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf

Show Comments