Hydrogen, l'headless ecommerce di Shopify

Shopify Hydrogen è un framework basato su React per la creazione delle pagine del sito headless di Shopify.
Hydrogen include tutta la struttura, i componenti e gli strumenti di cui gli sviluppatori hanno bisogno per iniziare lo sviluppo e creare velocemente delle pagine per un ecommerce headless, per poter offrire la migliore esperienza utente personalizzata, così come si propone di fare un progetto headless di Shopify.

L'obiettivo di Shopify, con Hydrogen, è quello di dare agli sviluppatori maggiore flessibilità, rispetto ad alti strumenti, per creare e personalizzare i negozio Shopify senza limitazioni del frontend o senza pagare integrazioni di software esterni. Ci sono anche dei temi gratuiti già pronti da cui partire per accelerare lo sviluppo. Tutto è pensato per rimanere nell'ecosistema di Shopify e garantire la massima compatibilità senza costi aggiuntivi

Nel frattempo, tutte le funzionalità di gestione delle operazioni di commercio elettronico (da back-end) fornite da Shopify funzionano ancora senza interruzioni e sottendono l'infrastruttura che fornisce ad Hydrogen gli strumenti per fare ecommerce.
In questo modo, il negozio su Shopify può avere un approccio completamente headless senza il trambusto e le complicazioni dell'integrazione di terze parti.

In questo momento, Hydrogen è completamente open source e puoi aiutare a sviluppare Hydrogen provandolo e inviando dei feedback per renderlo migliore.

Come funziona Hydrogen

Lavorando con milioni di commercianti in tutto il mondo, il team di sviluppatori di Shopify si è reso conto che l'ecommerce oggi richiede esperienze utente sempre rapide, sempre più omnicanale e con una esperienza di brand completa, che vuole essere personalizzata e contestualizzata allo stesso tempo.

L'approccio Headless si trova in mezzo tra implementazioni di differenti tecnologie e la necessità di avere sistemi armonici e funzionali. Hydrogen vuole proprio andare incontro questo tema introducendo un framework con una tecnologia che ti consentono di creare esperienze di commercio personalizzate, perfettamente integrate e che ti aiutano a migliorare ulteriormente le velocità del sito, grazie all'approccio disaccoppiato tra backend e frontend.

Hydrogen comprende un ambiente disviluppo con componenti specifici per il commercio e strumenti di sviluppo pronti per essere utilizzati:

Framework di Hydrogen: c'è il plug-in Vite che offre rendering lato server (SSR), middleware di idratazione (ovvero il processo di aggiunta dei comportamenti delle funzioni JavaScript nell'HTML compilato nella pagina quando questo HTML viene visualizzato nel browser)
e trasformazioni del codice dei componenti del client.

Componenti dell'interfaccia utente di Hydrogen: componenti, hook e utility che supportano funzionalità e concetti già esistenti in Shopify (facilitando la loro trasposizione in frontend).

Il framework Hydrogen agisce come blocchi che ti consentono di costruire le pagine raggiungendo l'equilibrio tra esperienza utente e funzionalità dell'ecommerce. Hydrogen utilizza il massimo potenziale di React e Vite e presta una particolare attenzione allo sviluppo di componenti ottimizzati.

Shopify ha fatto anche qualcosa in più:  ti aiuta a risparmiare tempo sull'impalcatura e sulla configurazione del design del negozio di Shopify includendo un modello iniziale che ti permette di partire più velocemente con lo sviluppo del frontend headless:  in questo modello è già elaborata la struttura dei file di base di un progetto che già integrato con un negozio Shopify. Questo permette di saltare la configurazione e di iniziare a personalizzare le pagine in pochissimo tempo.

Vantaggi di Hydrogen

1. Permette di accelerare lo sviluppo dell'ecommerce, grazie a dei template da cui partire, incluso un completo store di demo e a dei componenti già pronti, hook ed utility che rendono più facile il lavoro con le API di Shopify.
   
   
2. Si presenta completo e flessibile: si appoggia a tecnologie moderne e avanzate ma nel contempo diffuse  e collaudate come Typescript, React e Tailwind.
   
   
3. E' ottimizzato per aver performance eccellenti, grazie al rendering in streaming lato server  (server side rendering) con Suspense e le politiche di memorizzazione nella cache, che sbloccano i primi rendering veloci e permettono l'immissione dei dati in maniera progressiva. E poi anche perché è uno dei primi framework costruiti su React 18. In questa maniera il Server Side Rendering (SSR) di un'applicazione javascript (che nativamente sarebbe pensata esattamente per l'opposto, ovvero per il Client Side Rendering), permette primariamente
   • di velocizza il primo caricamento, in quanto la pagina viene fornita già pronta per il browser e non va sia "calcolata" che renderizzata dal browser stesso;
   • di aumentare la sicurezza in quanto non espone dati grezzi e non richiede l'accesso ad API;
   • di ottimizzare per le performance lato SEO.

Il lato "negativo" è che qualunque interazione successiva da parte dell'utente sulla pagina, richiede il reload della stessa, interamente. Ovviamente la quantità di elementi che troviamo nella pagina possono incidere in maniera impattante sui tempi di caricamento (anche del primo caricamento, non solo dei reload). Quindi va sviluppata con buon senso e con cognizione di causa. Rispetto al Client Side Rendering , il Server Side Rendering ha un piccolo vantaggio in più in questo caso: la pagina viene mostrata immediatamente e poi carica in maniera progressiva tutti i dati che ci stanno dietro (ad esempio le variabili del prodotto, le funzioni sulle Call to action e altri elementi non visivi).

Differenza tra Hydrogen e Liquid

Liquid è un modello di linguaggio scritto in Ruby e creato da Shopify. Questa è la spina dorsale di tutti i temi Shopify e viene utilizzata per caricare contenuti dinamici sulle pagine del negozio.

Hydrogen un framework per costruire un negozio headless con Shopify.
Sebbene molti sviluppatori, quando ne parlano, facciano spesso riferimento al modello di linguaggio e al framework in modo intercambiabile, come se fossero la stessa in realtà ci sono alcune sottili differenze tra i due.

Differenze tra framework e linguaggio

Un framework è una raccolta di strumenti e componenti già pronti per creare applicazioni, è cioè una struttura su cui è possibile creare software. Serve come base, quindi ti permette di non iniziare completamente da zero. I framework sono in genere associati a un linguaggio di programmazione specifico e sono adatti a diversi tipi di attività. Hydrogen è quindi un framework in React pensato per costruire le pagine di un negozio in Shopify pensato in headless

Diciamo che stai costruendo una casa. Potresti getta le fondamenta e tirare su le mura la casa da solo. Ci vorrebbe molto tempo, ma potresti farlo. Se tutto ciò fosse già stato fatto per te, tuttavia, ti risparmierebbe un bel po' di fatica, specialmente se fosse fatto da esperti costruttori di case. Nello sviluppo del software, un framework ha uno scopo simile. È stato progettato e testato da altri sviluppatori e ingegneri di software, quindi sai che è una solida base

Al contrario, un modello di linguaggio come il Liquid viene utilizzato per creare pagine Web che combinano contenuto statico (che è lo stesso su più pagine) e contenuto dinamico (che cambia da una pagina all'altra). I modelli si concentrano su funzionalità predeterminate e hanno meno opzioni di personalizzazione rispetto a un framework.

I limiti di Liquid superati da Hydrogen

Nei prossimi paragrafi risponderemo alla domanda: perché dovrei sviluppare un ecommerce headless con Shopify e non sviluppare un tema integrato nello store?

Nel caso di Shopify, grazie al modello di linguaggio Liquid, è possibile riutilizzare gli elementi statici che definiscono il layout di una pagina web, migrando dinamicamente i dati da un negozio Shopify alla pagina. Combinando Liquid con altri modelli di linguaggi, come HTML, CSS, JavaScript, puoi creare e personalizzare un tema Shopify.

Hydrogen include tutta la struttura, i componenti e gli strumenti necessari per creare negozi di Shopify personalizzati. Con il suo framework e i componenti dell'interfaccia utente, Hydrogen ti aiuta a creare vetrine personalizzate in grado di offrire la migliore esperienza utente.

Poiché Liquid richiede elementi statici e non statici per creare un tema, si può vedere che Liquid pone alcune limitazioni alla personalizzazione e alle prestazioni delle pagine che vengono realizzate. Inoltre, creare e personalizzare un tema utilizzando Liquid richiede molto tempo. Pertanto, Hydrogen funge da soluzione di nuova generazione per i negozi basate su Shopify, grazie alla sua apertura a infinite possibilità per creare UX e UI per avere siti Web unici.

Sviluppando componenti all'interno del framework, poi questi elementi possono facilmente essere modificati ed utilizzati nelle pagine dove vogliamo e come vogliamo.

3 motivi per passare all'ecommerce headless di Shopify

1. Ottimizza le prestazioni del sito

Uno degli ovvi vantaggi di seguire l'approccio headless con Shopify Hydrogen è quello delle eccellenti prestazioni che il sito può raggiungere, sotto il profilo dela velocità.

Infatti, separando il front-end dal suo back-end, acquisti una velocità di caricamento della pagina fulminea (beh... poi dipende da cosa ci metti dentro...), pur mantenendo tutti i contenuti dinamici e le funzionalità dell'ecommerce che vengono presi del back-end. Il passaggio a Shopify Hydrogen può aiutarti a ridurre il tempo di caricamento della pagina da pochi secondi a millisecondi, sfruttando così i Core Web Vitals dello store.

2. Un server... "integrato" (per scalare più facilmente)

Qualsiasi sviluppatore esperto vi spiegherà che potrebbe essere semplice offrire un'esperienza di acquisto altamente interattiva e personalizzata, garantendo nel contempo prestazioni ultraveloci, se il traffico è relativamente basso. Tuttavia, man mano che il tuo negozio cresce di popolarità e di traffico, il sito potrebbe non essere grado di gestire un nuovo afflusso di visitatori ogni giorno, continuando a mantenere le stesse performance; questo può causare problemi di velocità e portare scarse prestazioni al sito.

Shopify Hydrogen ha risolto questo problema dalla radice con Shopify Oxygen, la soluzione di hosting per i negozi Hydrogen. Non è necessario fare affidamento su servizi di hosting di terze parti poiché il tuo negozio Shopify sarà ospitato direttamente su Oxygen. E se hai Shopify plus è compreso nel prezzo!

Shopify ha investito molto nella struttura globale di Oxygen( con oltre 100 sedi di server in tutto il mondo). Oxygen fa in modo che i tuoi clienti abbiamo sempre un caricamento istantaneo del negozio, indipendentemente da dove si trovino (ovvio... ripeto: dipende poi da cosa ci metti dentro alle pagine).

3. Libertà ai designer per progettare

Forse a questo punto non servirebbe neppure dirlo, ma visto che Hydrogen permette un approccio headless, separando le pagine di frontend del tuo sito Shopify dal back-end, che contiene tutti i dati e le funzionalità del sito, offre maggiore flessibilità e libertà per costruire e personalizzare nel modo desiderato le pagine. La capacità di progettazione con Shopify Hydrogen è infinita e puoi creare design UX/UI unici per offrire ai visitatori un'esperienza di acquisto personalizzata e dinamica. Sarà un esempio abusato, ma se vuoi il sito come la Apple, con Hydrogen si può.
Potrei dire che "diventa semplice" ma poi pensereste che ci vogliano pochi giorni. Ma l'utilizzo di uno strumento per la creazione di pagine specializzato frontend come Hydrogen, può rendere il processo di progettazione più veloce e fluido... non immediato :-)