Dietro le quinte
Dai dati ai fatti: Product Development in fase di transizione – parte 1
di Ronny Wullschleger
next-yak.js: innovazione made in Zurich (parte 2)
30.6.2025
Traduzione: Leandra Amato
Dopo aver esplorato la nostra architettura dati nella prima parte di questa serie, passiamo ora a un altro argomento entusiasmante sullo sviluppo del nostro negozio online: next-yak, la nostra nuova soluzione performante per CSS-in-JS. In questo articolo raccontiamo come un'idea interna è diventata uno strumento potente che accelera notevolmente il nostro negozio online e come è persino disponibile come open source per te.
All'inizio del 2024 ci siamo trovati di fronte a un problema già noto, ma sempre più pressante: le nostre applicazioni web stavano lottando con colli di bottiglia dovuti alle prestazioni. styled-components, il nostro framework CSS-in-JS preferito per anni, ci aiutava a organizzare gli stili in modo pulito e strutturato, ma stava ormai diventando un ostacolo durante l'esecuzione. I tempi di caricamento ne risentivano, soprattutto su pagine con molti componenti come la homepage o le pagine dei dettagli dei prodotti.
Jan, Lead Front Engineer del team Isotopes, ha osservato attentamente la situazione, aspettando consapevolmente che emergesse una nuova soluzione dalla comunità open source. Quando per mesi non è apparsa alcuna alternativa o soluzione seria, ha deciso di agire personalmente.
In un primo proof of concept, Jan ha testato insieme a Luca, Senior Software Engineer del team Helix, se una soluzione senza runtime con estrazione del CSS durante la build fosse praticabile. I risultati sono stati promettenti, poiché i test sintetici su pagine d'esempio mostravano già prestazioni migliori rispetto a styled-components.
(Sinistra: styled components / destra: next-yak)
La versione iniziale è stata creata in TypeScript. Tuttavia, presto è diventato chiaro che una realizzazione in Rust non solo si sarebbe adattata meglio alla strategia di tooling di Next.js, ma avrebbe anche offerto notevoli vantaggi nel processo di build e analisi. Con il supporto di un LLM, abbiamo effettuato un porting della soluzione, dando così vita a next-yak. Allo stesso tempo, il team ha contattato i manutentori di SWC (Speedy Web Compiler), il cui feedback si è riflesso direttamente nello sviluppo attraverso pull request. Questa collaborazione ci ha aiutato a risolvere rapidamente le questioni di compatibilità e a integrare stabilmente next-yak nel nostro sistema.
Migrazione completa in tre mesi
Il momento cruciale è arrivato con il rilascio della homepage da parte del team Helix, in cui, in un A/B test, l'intera pagina è stata migrata a next-yak. I risultati hanno dimostrato che non solo siamo riusciti a migliorare i tempi di caricamento, ma anche a ridurre il consumo di risorse. Anche la «Interaction-to-Next-Paint» (INP) è stata influenzata positivamente. Il team ha quindi deciso di continuare la migrazione su larga scala.
Un fattore chiave di successo è stata la nostra consapevole decisione di mantenere l'API di styled-components il più possibile invariata. Questo ha permesso di convertire i componenti esistenti con uno sforzo minimo. Il vero passaggio è stato gestito dal team Helix, che ha svolto un lavoro eccellente. Con sensibilità tecnica e grande impegno, hanno completato con successo la migrazione in soli tre mesi. Rispetto ai tre anni che ci erano voluti per l'implementazione di styled-components, è stato un grande passo avanti.
Luca ha infine portato next-yak oltre i confini aziendali. In uno scambio con lo sviluppatore Josh W. Comeau, noto blogger di temi tech, il progetto è stato presentato a React Paris 2024 come un approccio innovativo al CSS-in-JS. E nel frattempo, styled-components ha annunciato che sarà mantenuto solo in modalità di manutenzione.
Oggi, next-yak è accessibile pubblicamente come progetto open source e continua a essere attivamente sviluppato, con numerosi contributi direttamente dai team di sviluppo software di Digitec Galaxus. next-yak è un buon esempio di ciò che può nascere dall'iniziativa personale, dall'abilità tecnica e dalla stretta collaborazione di un team. Dall'idea iniziale alla pubblicazione open source.
Lavorare da Galaxus: flessibilità, autonomia e «piraticità»
Digitec Galaxus affronta ogni compito o sfida in modo proattivo e conquista nuovi mercati con oltre 3200 dipendenti in Svizzera, Germania e Serbia. La diversità è la nostra chiave per il successo e tu puoi fare parte di questo viaggio.
La flessibilità che ti si addice:
- 5 settimane di ferie e l'opzione di un congedo non retribuito.
- Scegli tra una settimana di 42 ore o un part-time fino all'80%.
- Gli straordinari possono essere compensati con tempo libero o denaro.
- Telelavoro fino a 4 giorni a settimana e «workation» fino a 8 settimane in Paesi selezionati dell'area UE/EFTA.
- 16 settimane di congedo maternità e 4 settimane di congedo paternità.
Benefit esclusivi:
- Sconti interessanti su tutto il nostro assortimento e sugli abbonamenti di telefonia mobile e internet di Galaxus.
- Hardware personalizzato: dai notebook alle tastiere meccaniche.
- Vantaggi esclusivi di Migros, come migliori condizioni bancarie, sconti sulle assicurazioni e numerosi programmi sportivi interni.
- 60% di partecipazione alla pensione (LPP).
Istruzione e crescita:
- 2000 punti EDU per la tua formazione continua e un generoso sostegno finanziario per i tuoi progetti educativi.
- Accesso a workshop interni.
Diventa parte del nostro team
Dai un'occhiata alle nostre offerte di lavoro ed entra a far parte di uno dei nostri team innovativi.
Christian Margadant
Head of Engineering
christian.margadant@digitecgalaxus.ch
2 commenti
later