Dans les coulisses
Des données à l'action : Le développement de produits en pleine mutation (partie 1)
par Ronny Wullschleger
next-yak.js : l’innovation « made in Zurich » (2e partie)
30/6/2025
Traduction: Aglaë Goubi
Après avoir jeté un coup d’œil à notre architecture de données dans la première partie de cette série, nous abordons maintenant un autre sujet passionnant lié au développement de notre boutique en ligne : next yak, notre nouvelle solution pour un CSS-in-JS performant. Dans cet article, nous vous expliquons comment une idée interne a donné naissance à un outil puissant qui accélère aujourd’hui sensiblement notre boutique en ligne et qui est même disponible en open source pour vous.
Début 2024, nous étions confrontés à un problème connu, mais de plus en plus urgent à traiter : nos applications Internet souffraient de manques de performances. Styled-components, notre framework CSS-in-JS préféré depuis des années, nous aidait certes à organiser les styles de manière claire et structurée, mais constituait de plus en plus un frein lors de l’exécution. Les temps de chargement en ont souffert, en particulier sur les pages comportant de nombreux éléments, telles que la page d’accueil ou les pages détaillées des produits.
Jan, Lead Front Engineer chez Team Isotopes, a observé attentivement la situation et a délibérément attendu de voir si une nouvelle solution émergerait de la communauté open source. Comme aucune alternative ou solution sérieuse n’est apparue au cours des mois suivants, il a décidé de passer à l’action.
Dans une première preuve de concept, Jan a testé avec Luca, ingénieur logiciel senior chez Team Helix, si une solution zero-runtime avec extraction CSS en temps de construction serait réalisable. Les résultats étaient prometteurs, car les tests synthétiques sur des pages d’exemple montraient déjà une performance nettement supérieure à celle des styled-components.
(À gauche : Styled components / À droite : next-yak)
La version initiale a été créée en TypeScript. Cependant, il est rapidement apparu qu’une mise en œuvre dans Rust serait non seulement mieux adaptée à la stratégie d’outillage de Next.js (en anglais), mais qu’elle pourrait également offrir des avantages notables dans le processus de construction et d’analyse. Avec l’aide d’un LLM, le cœur de la solution a été porté et next-yak était né. En parallèle, l’équipe a pris contact avec les responsables du SWC (Speedy Web Compiler) (en anglais), dont les commentaires ont été directement intégrés au développement sous forme de demandes d’extraction. Cette collaboration précoce a permis de résoudre rapidement les questions de compatibilité et d’intégrer next-yak de manière stable dans notre environnement de travail.
Migration réalisée en trois mois
L’étape décisive a été franchie avec le déploiement de la page d’accueil par l’équipe Helix, qui a migré l’ensemble de la page vers next-yak dans le cadre d’un test A/B. Les résultats ont montré que nous avions non seulement amélioré les temps de chargement, mais aussi réduit de manière significative la consommation de ressources. L’« Interaction-to-Next-Paint » (INP) a également été influencé de manière positive. L’équipe a alors décidé de poursuivre la migration à grande échelle.
Notre décision délibérée de conserver autant que possible l’API de styled-components a été un facteur clé de notre succès. Cela nous a permis de convertir les composants existants avec un minimum d’efforts. L’équipe Helix s’est chargée de la migration proprement dite et a fait un travail formidable. Grâce à leur sens technique et à leur grande motivation, ils ont mené à bien la migration en seulement trois mois. C’est un grand pas en avant par rapport aux trois années qu’il nous avait fallu pour introduire styled-components.
Luca a finalement fait connaître next-yak au-delà des limites de son entreprise. Grâce à un échange avec le développeur Josh W. Comeau (en anglais), un blogueur tech bien connu, le projet a été présenté lors de la React Paris 2024 (en anglais) comme une approche CSS-in-JS innovante. Entre-temps, styled-components a annoncé qu’il ne serait plus développé qu’en mode maintenance (en anglais).
Aujourd’hui, next-yak est accessible au public en tant que projet open source et continue à être développé notamment grâce à de nombreuses contributions provenant directement des équipes d’ingénieurs de Digitec Galaxus. next-yak est un bon exemple de ce que l’initiative personnelle, les compétences techniques et une collaboration étroite au sein d’une équipe peuvent permettre de réaliser. De l’idée initiale à la publication open source.
Travailler chez Galaxus : flexible, responsable, piratif
Chez Digitec Galaxus, nous abordons les tâches de manière proactive et conquérons de nouveaux marchés avec plus de 3 200 collaborateurs en Suisse, en Allemagne et en Serbie. La diversité est la clé de notre succès, et vous pouvez faire partie de cette aventure passionnante !
Une flexibilité qui vous convient :
- 5 semaines de congé payés et possibilité de congé sans solde.
- Choisissez entre une semaine de 42 heures ou un temps partiel jusqu’à 80 %.
- Vous pouvez compenser vos heures supplémentaires sous forme de temps libre ou d’argent.
- Télétravail jusqu’à 4 jours par semaine et Workations jusqu’à 8 semaines dans certains pays de l’UE/AELE.
- 16 semaines de congé maternité et 4 semaines de congé paternité.
Goodies exclusifs :
- Des réductions attrayantes sur tout notre assortiment ainsi que sur les abonnements Galaxus Mobile et Internet.
- Matériel personnalisé : des ordinateurs portables, claviers mécaniques et autres outils sont mis à votre disposition
- Avantages exclusifs Migros tels que des conditions bancaires améliorées, des réductions sur les assurances ainsi que de nombreux programmes sportifs internes.
- 60 % de participation à la pension (LPP).
Éducation et croissance :
- 2000 points EDU pour faire des formations continues ainsi qu’un soutien financier généreux pour vos projets de formation.
- Accès à des ateliers internes animés par des développeurs et des coachs.
Rejoignez notre équipe :
Vous êtes intéressé ? Consultez nos offres d’emploi et rejoignez notre équipe innovante.
Christian Margadant
Head of Engineering
christian.margadant@digitecgalaxus.ch
2 commentaires
later