The HeadYes Revolution (Italian Version)

Un breve viaggio alla scoperta dell’approccio headless, delle PWA e delle nuove, moderne soluzioni frontend per Magento.

La scelta degli strumenti giusti per lo sviluppo di soluzioni e-commerce richiede sempre un’accurata analisi che può essere svolta valutando con attenzione tutte le caratteristiche in campo: potenzialità, curva di apprendimento, bilanciamento tra costi e benefici e soprattutto vantaggi correlati alla soluzione da scegliere per i nostri clienti.

In questo articolo condividerò il mio punto di vista, come CTO e come sviluppatore, sulle nuove ed entusiasmanti soluzioni ed approcci disponibili, quali l’ “headless e-commerce” e le PWA, così come sulle nuove, accattivanti opportunità frontend per Magento.

Il nostro punto di partenza

Dalle primissime versioni uscite a cavallo tra il 2015 e il 2016, la piattaforma Magento 2 ha sicuramente fatto dei passi da gigante. 

Tante nuove funzionalità e caratteristiche sono giunte a maturità, mentre le performance, la stabilità e l’efficienza generale sono man mano aumentate.

Ma se vogliamo trovare un “però”, possiamo comunque farlo guardando ai punti deboli dello stack frontend.

Mentre infatti le tecnologie frontend continuano ad evolvere a grande velocità, lo stack frontend di Magento sembra essere rimasto un po’ … bloccato.

In particolare, lo stack JavaScript su Magento 2 (jquery, knockout.js, require.js) comincia a mostrare i segni del tempo e rischia di risultare sempre più datato. Più passa il tempo, infatti, e più diventa penalizzato e poco competitivo a confronto con strumenti e linguaggi più moderni, soprattutto in termini di performance e risultati. 

Come se questo non bastasse, nei mesi passati Google ha rilasciato le nuove metriche dei “Web Vitals”, che richiedono ancora più efficienza alle nostre web application, soprattutto riguardo l’esperienza utente; per stack “datati”, come quello presente su Magento, questo ha rappresentato sicuramente un colpo di grazia.

A quanto pare abbiamo un tallone di Achille.

La rivoluzione “senza testa”

Due termini (relativamente) nuovi stanno, nel frattempo, conquistando la scena, con la promessa di ottime performance e di una user experience migliorata: headless e PWA. Proviamo a capire meglio di cosa si tratta.

I termini “headless” e “PWA” possono essere considerati complementari, ma devono essere trattati separatamente, perché identificano e rappresentano concetti differenti e indipendenti tra loro.

La parola headless identifica un approccio architetturale, più che una tecnologia, e rappresenta un’alternativa sicuramente interessante ai sistemi integrati. 

Ma in cosa consiste un sistema headless e quali sono gli altri principali approcci disponibili?

• L’approccio più tradizionale, definito come coupled (accoppiato), consiste più generalmente in un sistema backend ed uno frontend, tra di loro uniti all’interno della stessa applicazione monolitica. La prima e più ovvia conseguenza di questa stretta convivenza è quella che ogni modifica ad uno dei due sistemi può direttamente interferire con l’altro.
• L’approccio decoupled (disaccoppiato), invece, definisce un’applicazione che è ancora composta da un backend e un frontend, ma questa volta ognuno di essi è totalmente separato dall’altro. Questo approccio offre, ad esempio, la possibilità di effettuare modifiche in un sistema senza che interferisca con l’altro. 
• L’approccio headless (letteralmente: “senza testa”), infine, può essere considerato come un sotto-tipo dell’approccio disaccoppiato; la differenza principale tra i due sta nel fatto che, mentre il “decoupled” nasce con una soluzione frontend preconfezionata, un sistema headless “non ha un sistema frontend predefinito”. Un backend “headless” è pronto per essere utilizzato con uno o più sistemi frontend, che saranno totalmente indipendenti, anche nella tecnologia utilizzata, dal sistema backend.

L’approccio “headless” promette davvero tanto: 

• indipendenza;
• maggiore libertà nello sviluppo per via delle minori conseguenze sul sistema frontend;
• nessun limite nelle integrazioni frontend: possiamo potenzialmente agganciare al nostro sistema headless tutti i sistemi frontend che ci serviranno.

Ma tutto questo, ovviamente, ha anche un prezzo:

• il nostro effort nello sviluppo subirà un incremento;
• le competenze necessarie, rispetto ad un approccio tradizionale, aumenteranno e, come conseguenza diretta:
• avremo bisogno di più persone che lavorino sul nostro progetto.

Ma andiamo ad approfondire la seconda “parola magica” del momento: PWA.

Una PWA (progressive web application) è una web application che aspira a colmare il divario esistente tra una tradizionale applicazione web e un’app installabile sui nostri dispositivi.

Il termine (e l’idea che definisce) è stato coniato nel 2015 all’interno di Google. L’idea si è però potuta trasformare in realtà soltanto nell’arco degli ultimi anni, in particolare da quando i browser si sono evoluti in maniera stabile, offrendo le tecnologie necessarie affinché una PWA potesse funzionare correttamente.

Per ottenere una PWA ci servirà “semplicemente” abilitare i service worker del browser e fornire un file manifest: questo significa che, idealmente, ogni web application può trasformarsi in una PWA.

La promessa è ambiziosa: le PWA sono più “abili” di una web app, sono veloci, possono funzionare offline e sono anche installabili su qualunque dispositivo. Per dirlo con una sola frase, sono: “siti che hanno preso le giuste vitamine.”

Wow

Bene, tutto questo non può che risultare entusiasmante; siamo sicuramente di fronte a qualcosa che andrà a definire nuovi standard sul web, e che cambierà definitivamente quello che potremo far fare alle nostre web application; in breve, avremo la possibilità di costruire dei nuovi super-siti.

Ma facciamo mente locale:

• siamo partiti analizzando i problemi che ci troviamo ad affrontare con lo stack frontend attualmente presente su Magento 2;
• sappiamo, quindi, che è necessario applicare dei cambiamenti in quest’area per ottenere dei risultati interessanti;
• stiamo quindi valutando nuove tecnologie e, fino adesso, abbiamo capito che un approccio “headless”, così come la trasformazione della nostra web app in PWA, ci può offrire nuove possibilità ed aprire nuovi scenari. 

E allora, proviamo a capire: “Siamo pronti a tagliare la testa al nostro Magento?”

• Che benefici potrà portare ai nostri progetti e-commerce?
• Il nostro Magento è pronto a restare senza testa, e ad ottenerne un miglioramento?
• E quali sono le opzioni già a nostra disposizione per farlo?

Andiamo allora a dare un’occhiata alle nuove, scintillanti “ghigliottine” che potremmo prendere in considerazione per tagliare la testa ai nostri progetti Magento: 

Le Ghigliottine Agnostiche:

• Vue Storefront: è un framework agnostico che sta riscuotendo successo e interesse sempre maggiori, grazie alla sua flessibilità e stabilità: il codice è ben documentato, ed ha ormai raggiunto un buon livello di maturità. Permette inoltre di essere utilizzato con diverse piattaforme come, ad esempio, Magento 2 e Shopware.
• FrontCommerce: nonostante sembri avere meno casi di studio ed esempi rispetto a Vue Storefront, ha un supporto stabile per Magento 2, e i suoi risultati finali - anche sulle performance - sono abbastanza buoni.
• Deity Falcon: un altro “big player” nell’ambito dei framework agnostici, supporta, oltre a Magento 2, diverse altre piattaforme.
• Next.js: l’ultimo, ma solo per ordine di arrivo, sembra essere la nuova promessa. Next.js — nella sua “commerce version” — sta già raccogliendo feedback entusiastici dalla community. Nel momento in cui scrivo, però, non supporta ancora Magento 2, e probabilmente dovremo aspettare ancora per avere una buona stabilità, ma sembra candidato a diventare un protagonista importante in questa storia.

Le Ghigliottine dedicate esclusivamente a Magento

• ScandiPwa: è un prodotto interessante sviluppato da Scandiweb, focalizzato su Magento 2, che offre un buon supporto e risultati entusiasmanti sulle performance.
• PWA Studio: è il progetto ufficiale di casa Adobe; voci di corridoio lo vorrebbero come l’unica futura soluzione frontend di Adobe per Magento. È basato su uno stack tutto nuovo ed è composto da un codice ben architettato, oltre ad essere l’unico ad  offrire il grande vantaggio di poter contare sul supporto ufficiale di Adobe.

Pro e Contro

Fin qui abbiamo visto sistemi interessanti e nuove, entusiasmanti, possibilità. Ma quali sono i contro?

Lo stack e le competenze necessarie sono abbastanza “nuove” e, soprattutto, sono differenti da quelle richieste per lo sviluppo su Magento: anche questo può essere entusiasmante, ma: 

• di quante persone avremo bisogno per sviluppare i nostri progetti?
• di quanto aumenterà il costo finale del nostro lavoro?
• i nostri clienti saranno intenzionati a investire molto di più, basandosi semplicemente sulle promesse di una nuova tecnologia?
• e quali saranno alla fine i reali benefici per i nostri clienti?

The Biggest Secret Ever

Durante gli ultimi mesi del 2020, mentre l’analisi su queste nuove opzioni andava avanti, ho avuto l’opportunità di assistere a diversi eventi online, tra cui il Reacticon 3.

Durante l’evento, ho potuto approfondire meglio diversi aspetti delle nuove tecnologie frontend disponibili per le piattaforme ecommerce, ho ascoltato bellissime presentazioni e scoperto qualcosa di nuovo, soprattutto durante l’ultimo talk dell’evento, intitolato “the biggest secret ever.” Il talk si focalizzava su una nuova soluzione, costruita quasi per caso, durante lo sviluppo di un progetto personale. Una soluzione che permetterebbe a Magento di lasciare la testa lì dove si trova, ottenendo comunque ottimi risultati grazie all’integrazione di un nuovo stack frontend.

Il nome dello sviluppatore (e inventore) è Willem Wigman, e la sua nuova creazione è un innovativo tema integrato per Magento 2 basato su moderni strumenti e tecnologie per il frontend: Hyvä.

Mentre stava sviluppando un progetto personale, Willem ha iniziato a porsi delle domande, le stesse che probabilmente molti di noi si stanno già facendo sull’argomento:

• perché dovrei imparare una serie di nuovi linguaggi per lo sviluppo dello storefront?
• Perché i nostri clienti dovrebbero investire in due prodotti (una PWA e un Magento headless) invece che in uno soltanto?
• Perché dovremmo fare tutto questo, quando l’unico vero problema è costituito da uno stack frontend ormai datato, pesante e lento?
• Perché non provare, invece, ad utilizzare Magento con un nuovo stack, in maniera integrata, provando ad ottenere migliori risultati e continuando ad utilizzare le parti migliori che la piattaforma mette già a disposizione?

La risposta a tutte queste domande è stata per me entusiasmante.

Piuttosto che restare bloccati su quelle che sembravano le uniche due opzioni: 

1. accettare quello che Magento offre già per il frontend con i suoi pro e i suoi contro;
2. provare ad ottenere risultati migliori con un approccio headless e una PWA separata, incrementando, però, il costo dello sviluppo;

Willem ha intrapreso un “terza via” (come mi piace chiamarla).

Ha preso “in prestito” dall’ecosistema Laravel, due delle tecnologie più promettenti per lo sviluppo frontend (Tailwind CSS e Alpine.js) e le ha integrate su Magento, sovrascrivendo totalmente le impostazioni di base del frontend.

Il risultato è uno storefront Magento 2, completamente funzionante, che offre il “meglio dei due mondi”: 

• la flessibilità del layout system nativo su Magento;
• la possibilità di continuare ad estendere Magento con i moduli;
• la libreria CSS super-leggera di Tailwind:
  • un solo css finale composto soltanto dalle classi che stiamo realmente usando;
• la libreria JS ultra-leggera di Alpine.js:
  • Il nostro progetto caricherà Kilobytes di files JavaScript, e non Megabytes, come avviene su applicazioni basate in parte o in tutto su JavaScript.

E sì: possiamo anche renderlo una PWA, abilitando i service worker ed utilizzando un file manifest.

La giusta soluzione?

Quando trovi la giusta soluzione, la riconosci perché è semplice, leggera e perché “scorre”, eliminando contemporaneamente dubbi ed ostacoli.

La soluzione offerta da Hyvä appare ragionevole e molto adatta per chi vuole ottenere uno storefront veloce e reattivo. In fin dei conti, questo resta uno dei nostri principali obiettivi.

Sarà questa l’ultima parola per un più moderno frontend per Magento? Probabilmente non avremo un’unica, ultima parola. 

Come sempre, “dipende”: dal budget a disposizione, dalle competenze del nostro team e dalle necessità ed obiettivi che il progetto del nostro cliente deve perseguire.

Personalmente credo che opterei per una PWA separata, basata su JavaScript, per quei progetti con requisiti e obiettivi più vicini a quelli attualmente offerti da un’app nativa.

Ma se dovessi fare una scelta per un progetto ecommerce (che sia anche una PWA o meno) la mia scelta in questo momento sarebbe Hyvä. Ho avuto l’opportunità e il piacere di dare un’occhiata al codice di Hyvä e di lavorarci durante la sua “closed beta”. Ho fatto provare questo nuovo “vestito” al mio progetto Magento, e devo dire che una volta uscito dal camerino, gli calzava a meraviglia. 

Per me, quindi, è un sì: che questa rivoluzione abbia inizio, e con la testa sulle spalle.