Hummingbird vs Classic: quale tema PrestaShop dovresti usare?

Due temi ufficiali, due filosofie diverse

PrestaShop include due temi ufficiali: Classic e Hummingbird. Classic è il tema predefinito dal rilascio di PrestaShop 1.7 nel 2016. Hummingbird è arrivato con PrestaShop 8.x come alternativa moderna progettata per le prestazioni e la preparazione al futuro. La scelta tra i due non è semplicemente una questione di quale abbia un aspetto migliore. I due temi rappresentano approcci fondamentalmente diversi all'architettura front-end, e la tua scelta influenza le prestazioni, la compatibilità con i moduli, l'impegno di personalizzazione e la manutenibilità a lungo termine.

Questo articolo fornisce un confronto approfondito basato sull'architettura, dati prestazionali reali, considerazioni pratiche e le situazioni specifiche in cui ciascun tema ha più senso. Che tu stia avviando un nuovo negozio o considerando una migrazione, questo ti aiuterà a prendere una decisione informata.

Architettura: cosa è cambiato e perché

Classic è stato costruito su Bootstrap 4, jQuery e template Smarty. Segue un approccio tradizionale di rendering lato server in cui il server genera pagine HTML complete e le invia al browser. JavaScript viene utilizzato principalmente per elementi interattivi come il carrello, la pagina prodotto e il checkout. Il CSS viene compilato da file Sass e distribuito come un unico foglio di stile di grandi dimensioni.

Hummingbird è stato costruito come una reimpostazione da zero. Utilizza Bootstrap 5, abbandona jQuery in favore di JavaScript vanilla e introduce un'architettura basata su componenti. Il CSS è più modulare, il JavaScript è più leggero e l'impronta complessiva delle risorse è significativamente più piccola.

La rimozione di jQuery è il cambiamento architetturale più importante. jQuery aggiungeva circa 87KB (30KB compressi con gzip) ad ogni caricamento di pagina e incoraggiava uno stile di programmazione in cui i moduli manipolavano liberamente il DOM senza coordinamento. Hummingbird sostituisce jQuery con le API native dei browser moderni come fetch, querySelector, classList e la delega degli eventi. Questo significa che il tema stesso è più veloce, ma i moduli che dipendono da jQuery necessitano di aggiornamenti.

Bootstrap 5 porta i propri cambiamenti. Elimina jQuery come dipendenza (allineandosi con l'approccio di Hummingbird), utilizza proprietà personalizzate CSS (variabili) per una tematizzazione più facile, migliora il sistema a griglia con utilità responsive migliorate e aggiorna i pattern di markup dei componenti. Il passaggio da Bootstrap 4 a 5 influenza qualsiasi CSS personalizzato o override dei template che faccia riferimento a classi specifiche di Bootstrap.

Confronto prestazionale: numeri reali

Le prestazioni sono la ragione principale per cui PrestaShop ha creato Hummingbird, e i numeri supportano la decisione. Testando entrambi i temi su un'installazione identica di PrestaShop 8.1 con gli stessi prodotti, moduli e configurazione del server si rilevano differenze significative.

Su una tipica pagina prodotto misurata con Lighthouse su una connessione mobile simulata, Classic ottiene un punteggio nell'intervallo 45-55 per le Prestazioni, mentre Hummingbird ottiene un punteggio nell'intervallo 65-75. Le metriche specifiche raccontano una storia più chiara.

Il First Contentful Paint (FCP) migliora di circa 0,5-1,0 secondi con Hummingbird. Questo è dovuto principalmente al payload CSS più piccolo e all'assenza di jQuery che blocca il rendering. Il Largest Contentful Paint (LCP) migliora di un margine simile perché il percorso critico di rendering è più breve.

Il Total Blocking Time (TBT) vede il miglioramento più drammatico. Il JavaScript basato su jQuery di Classic crea un blocco significativo del thread principale mentre il browser analizza ed esegue la libreria più tutti gli script dei moduli dipendenti da jQuery. L'approccio JavaScript vanilla di Hummingbird riduce il TBT del 40-60% nelle configurazioni tipiche.

Il Cumulative Layout Shift (CLS) è all'incirca equivalente tra i due temi quando configurati correttamente, poiché la stabilità del layout dipende più dalle dimensioni delle immagini e dall'implementazione del lazy loading che dalla scelta del framework.

La dimensione totale del trasferimento racconta un'altra parte della storia. Un'installazione predefinita di Classic trasferisce circa 350-450KB di CSS e JavaScript al primo caricamento della pagina. Hummingbird riduce questo a 200-300KB. La differenza si accumula durante l'intera sessione di navigazione mentre i visitatori navigano nel tuo negozio.

Questi numeri presuppongono un'installazione pulita. In pratica, i moduli di terze parti spesso aggiungono il proprio CSS e JavaScript, il che può restringere o ampliare il divario a seconda di quanto bene quei moduli siano ottimizzati per ciascun tema.

Compatibilità dei moduli: il problema principale

Questo è il punto in cui i vantaggi di Hummingbird vengono accompagnati da un'importante avvertenza. Molti moduli PrestaShop sono stati costruiti pensando all'architettura di Classic. Dipendono da jQuery, utilizzano pattern di markup di Bootstrap 4 e presuppongono strutture di template specifiche fornite da Classic.

Quando installi questi moduli su Hummingbird, diverse cose possono rompersi. Le funzionalità JavaScript che si basano su jQuery falliranno silenziosamente o genereranno errori. Le finestre modali, i dropdown e altri componenti di Bootstrap 4 potrebbero non renderizzarsi correttamente con il markup e i nomi delle classi modificati di Bootstrap 5. Gli override dei template che presuppongono la struttura dei template di Classic non funzioneranno con i template riorganizzati di Hummingbird.

La gravità di questo problema dipende dal tuo stack di moduli. I moduli core di PrestaShop sono compatibili con entrambi i temi. I moduli di terze parti ben mantenuti da sviluppatori attivi supportano tipicamente Hummingbird. Tuttavia, moduli più vecchi, moduli di nicchia o moduli di sviluppatori che hanno smesso di aggiornare i loro prodotti potrebbero funzionare solo con Classic.

Prima di scegliere Hummingbird, dovresti testare ogni modulo che intendi utilizzare. Installali in un ambiente di staging con Hummingbird attivo e testa accuratamente ogni funzionalità. Presta particolare attenzione alle funzionalità dipendenti da JavaScript come i carrelli AJAX, i campi di personalizzazione prodotto, le visualizzazioni rapide e i passaggi del checkout.

Alcuni sviluppatori di moduli forniscono file di template separati per Classic e Hummingbird. Quando vedi directory come views/templates/hook/classic/ e views/templates/hook/hummingbird/ in un modulo, quel modulo supporta esplicitamente entrambi i temi. Questo è lo standard di riferimento per la compatibilità.

Smarty vs Twig: considerazioni per il futuro

PrestaShop ha annunciato l'intenzione di passare da Smarty a Twig come motore di template per il front office. Questa transizione è stata discussa per anni ed è parzialmente implementata nel back office. Hummingbird è progettato tenendo conto di questa transizione, sebbene in PrestaShop 8.x e 9.x entrambi i temi utilizzino ancora Smarty per i template del front office.

La rilevanza per la tua scelta del tema è indiretta ma importante. La struttura dei template di Hummingbird è organizzata in un modo che renderà più fluida l'eventuale migrazione da Smarty a Twig. Se costruisci personalizzazioni estese sulla struttura dei template di Classic, potresti dover affrontare un impegno di migrazione maggiore quando (non se) PrestaShop completerà la transizione a Twig.

Detto ciò, questa transizione è stata "in arrivo" per diversi anni. Prendere una decisione oggi basandosi esclusivamente su un futuro cambio del motore di template è prematuro. Scegli in base alle esigenze attuali e concrete e accetta che sarà necessario un certo impegno di migrazione indipendentemente dal tema scelto quando avverrà la transizione a Twig.

Approccio alla personalizzazione

La personalizzazione di Classic è ben documentata e ampiamente compresa. Esistono centinaia di tutorial, migliaia di post nei forum e anni di conoscenza della community sulla modifica di Classic. Il tema utilizza Sass semplice per lo stile, jQuery tradizionale per l'interattività e template Smarty facili da leggere e modificare.

La personalizzazione di Hummingbird richiede competenze aggiornate. Devi avere dimestichezza con il CSS moderno (proprietà personalizzate, selettori moderni, container queries), JavaScript vanilla (senza la stampella di jQuery) e l'approccio utility-first di Bootstrap 5. La curva di apprendimento è più ripida se il tuo team è abituato allo sviluppo basato su jQuery.

Tuttavia, le proprietà personalizzate CSS di Hummingbird rendono certi tipi di personalizzazione molto più semplici rispetto a Classic. Vuoi cambiare il colore primario nell'intero tema? Modifica una singola proprietà personalizzata CSS. Con Classic, dovevi rintracciare ogni variabile Sass, ricompilare e gestire i conflitti di specificità.

Hummingbird utilizza anche una struttura HTML più semantica, che rende più facile selezionare gli elementi con i selettori CSS e migliora l'accessibilità. I file dei template sono meglio organizzati con una separazione più chiara delle responsabilità.

Supporto per i temi figlio

Entrambi i temi supportano i temi figlio (child theme), che è il metodo raccomandato per personalizzare un tema PrestaShop senza modificare direttamente i file del tema genitore. I temi figlio ti permettono di sovrascrivere template specifici, aggiungere CSS e JavaScript personalizzati e mantenere le personalizzazioni attraverso gli aggiornamenti del tema.

Il meccanismo dei temi figlio di Classic è maturo e ben testato. Crei una directory per il tema figlio, definisci un theme.yml che fa riferimento a Classic come genitore e sovrascrivi selettivamente i file che devi modificare. Questo flusso di lavoro è stabile da PrestaShop 1.7.

Il supporto dei temi figlio di Hummingbird funziona allo stesso modo a livello di framework, ma presenta alcune differenze pratiche. Poiché i template di Hummingbird sono strutturati diversamente, gli override dei temi figlio basati su Classic non possono essere riutilizzati. È necessario creare nuovi override basati sulla struttura dei template di Hummingbird.

PrestaShop 8.x ha migliorato la gestione dei temi figlio in generale, rendendo più facile sovrascrivere le risorse (CSS e JavaScript) e i template parziali. Questi miglioramenti beneficiano allo stesso modo sia i temi figlio di Classic che quelli di Hummingbird.

Se stai commissionando un tema personalizzato a uno sviluppatore, partire da Hummingbird come genitore è la scelta migliore a lungo termine. L'architettura più pulita significa meno debito tecnico, e l'approccio CSS moderno significa meno override necessari per le personalizzazioni comuni.

Percorso di migrazione: da Classic a Hummingbird

Se stai attualmente utilizzando Classic e stai considerando il passaggio a Hummingbird, ecco cosa comporta effettivamente la migrazione.

Gli override dei template devono essere ricostruiti da zero. Non puoi semplicemente copiare i tuoi override dei template di Classic in un tema figlio di Hummingbird. La struttura dei file dei template, i nomi delle variabili e i nomi dei blocchi sono diversi. Devi esaminare ogni override, capire cosa realizza e ricrearlo utilizzando la struttura dei template di Hummingbird.

Il CSS personalizzato necessita di revisione e probabilmente di una significativa rielaborazione. Se il tuo CSS punta a classi di Bootstrap 4, quei nomi di classe potrebbero essere cambiati in Bootstrap 5. Se il tuo CSS utilizza pattern dipendenti da jQuery (come la stilizzazione di elementi basata su classi aggiunte da jQuery), questi si romperanno. Se il tuo CSS utilizza nomi di classe specifici del tema Classic, questi potrebbero non esistere in Hummingbird.

Il JavaScript personalizzato deve essere riscritto. Qualsiasi codice jQuery deve essere convertito in JavaScript vanilla. Questa è spesso la parte più dispendiosa in termini di tempo della migrazione perché il codice jQuery tende ad essere profondamente intrecciato con pattern di manipolazione del DOM che devono essere ripensati.

La compatibilità dei moduli deve essere verificata per ogni modulo installato. Come discusso sopra, i moduli che dipendono da jQuery o Bootstrap 4 potrebbero necessitare di aggiornamenti o sostituzioni.

Una tempistica realistica per la migrazione di un negozio Classic moderatamente personalizzato a Hummingbird è di 40-80 ore di lavoro dello sviluppatore. Questo non è un progetto del fine settimana. Pianificalo come un vero e proprio impegno di sviluppo con un ambiente di staging, test approfonditi e un piano di rollback.

Quando scegliere Classic

Scegli Classic quando il tuo negozio dipende da moduli di terze parti più vecchi che non sono stati aggiornati per la compatibilità con Hummingbird. Sceglilo quando il tuo team di sviluppo è più a suo agio con jQuery e Bootstrap 4 e non hai il budget per la riqualificazione o l'assunzione. Sceglilo quando stai costruendo con scadenze strette e hai bisogno della selezione più ampia possibile di temi e moduli compatibili dal marketplace di PrestaShop.

Classic è anche la scelta più sicura per i negozi che utilizzano PrestaShop 1.7.x o le prime versioni 8.0.x. Hummingbird è stato introdotto successivamente nel ciclo 8.x e potrebbe non essere completamente disponibile o stabile sulle versioni più vecchie di PrestaShop.

Se il tuo negozio funziona già su Classic con personalizzazioni estese e prestazioni adeguate, potrebbe non esserci un motivo convincente per migrare. I guadagni prestazionali di Hummingbird sono reali ma potrebbero non giustificare l'impegno della migrazione se il tuo negozio si carica già rapidamente e converte bene.

Quando scegliere Hummingbird

Scegli Hummingbird quando avvii un nuovo negozio PrestaShop 8.x o 9.x da zero. I vantaggi prestazionali sono gratuiti quando non hai personalizzazioni legacy da migrare. Sceglilo quando le prestazioni sono una priorità assoluta per la tua attività, in particolare se il tuo pubblico è prevalentemente composto da utenti mobili su connessioni più lente dove ogni kilobyte conta.

Scegli Hummingbird quando vuoi preparare il tuo negozio per il futuro. Man mano che PrestaShop continua ad evolversi verso pratiche front-end moderne, Hummingbird riceverà la maggiore attenzione nello sviluppo e sarà il primo a beneficiare delle nuove funzionalità.

Sceglilo quando hai sviluppatori a proprio agio con JavaScript e CSS moderni. L'architettura di Hummingbird è più pulita e più manutenibile per i team con competenze front-end attuali.

E sceglilo quando ti sta a cuore l'accessibilità. L'HTML semantico, gli attributi ARIA e il supporto per la navigazione da tastiera di Hummingbird sono notevolmente migliori rispetto a quelli di Classic. Se il tuo negozio deve soddisfare gli standard di accessibilità WCAG, Hummingbird ti fornisce un punto di partenza migliore.

La questione dei temi di terze parti

Molti proprietari di negozi saltano entrambi i temi ufficiali e acquistano un tema di terze parti dal marketplace PrestaShop Addons o da venditori indipendenti. Questi temi sono quasi sempre basati sull'architettura di Classic perché Classic è disponibile da molto più tempo e rappresenta la base installata più ampia.

Se stai utilizzando un tema di terze parti, la questione Classic vs Hummingbird è in gran parte accademica per il tuo negozio attuale. Lo sviluppatore del tuo tema ha preso le decisioni architetturali per te. Tuttavia, quando valuti nuovi temi di terze parti, verifica se sono costruiti sulle fondamenta di Classic o di Hummingbird. I temi costruiti su Hummingbird avranno prestazioni migliori e manterranno la compatibilità più a lungo.

Fai attenzione ai temi di terze parti che dichiarano di essere "basati su Hummingbird" ma in realtà ne prendono solo lo stile visivo mantenendo sotto l'architettura dipendente da jQuery di Classic. Controlla le dipendenze JavaScript e il framework CSS del tema per verificare.

Verdetto: non c'è una risposta sbagliata, ma ce n'è una migliore

Per i nuovi negozi su PrestaShop 8.x o versioni successive, Hummingbird è la raccomandazione chiara. È più veloce, più moderno, meglio mantenuto e più pronto per il futuro. La preoccupazione sulla compatibilità dei moduli sta diminuendo man mano che l'ecosistema si adegua, e partire da zero significa non avere costi di migrazione legacy.

Per i negozi esistenti che utilizzano Classic con personalizzazioni significative, la decisione richiede un'analisi costi-benefici. Calcola onestamente l'impegno della migrazione, misura le tue prestazioni attuali per comprendere il potenziale guadagno e decidi se il miglioramento giustifica l'investimento. A volte la risposta è sì, a volte no, e a volte la risposta giusta è aspettare il prossimo grande redesign per effettuare il passaggio.

Indipendentemente dal tema che scegli, i principi di buone prestazioni front-end si applicano allo stesso modo: minimizza le dimensioni delle risorse, effettua il lazy-load dei contenuti sotto la piega, ottimizza le immagini e controlla regolarmente la velocità della pagina. Un negozio Classic ben ottimizzato supererà sempre un negozio Hummingbird configurato male. Il tema fornisce le fondamenta, ma l'esecuzione determina il risultato.