Hinter den Kulissen
Von Daten zu Taten: Produktentwicklung im Umbruch (Teil 1)
von Ronny Wullschleger
next-yak: Innovation made in Zürich (Teil 2)
30.6.2025
Nachdem wir im ersten Teil dieser Serie einen Blick auf unsere Datenarchitektur geworfen haben, geht es nun weiter mit einem weiteren spannenden Thema aus der Entwicklung unserers Onlineshops: next-yak, unsere neue Lösung für performantes CSS-in-JS. In diesem Beitrag erzählen wir, wie aus einer internen Idee ein leistungsstarkes Tool wurde, das unseren Onlineshop heute spürbar beschleunigt und sogar als OpenSource für dich zur Verfügung steht.
Anfang 2024 standen wir vor einem bekannten, aber immer drängenderen Problem: Unsere Webanwendungen hatten mit Performance-Bottlenecks zu kämpfen. Styled-components, über Jahre hinweg unser bevorzugtes CSS-in-JS-Framework, half uns zwar, Styles sauber und strukturiert zu organisieren, war aber zur Laufzeit zunehmend ein Bremsklotz. Die Ladezeiten litten, besonders auf Seiten mit vielen Komponenten wie der Startseite oder Produktdetailseiten.
Jan, Lead Frontend Engineer bei Team Isotopes, beobachtete die Situation aufmerksam und wartete bewusst ab, ob sich aus der Open-Source-Community heraus eine neue Lösung abzeichnen würde. Als über Monate keine ernsthafte Alternative oder Lösung erschien, entschied er sich, selbst aktiv zu werden.
In einem ersten Proof of Concept testete Jan gemeinsam mit Luca, Senior Software Engineer bei Team Helix, ob eine Zero-Runtime-Lösung mit Build-Time CSS-Extraktion praktikabel wäre. Die Ergebnisse waren vielversprechend, denn die synthetischen Tests auf Beispielseiten zeigten bereits eine deutlich bessere Performance gegenüber Styled-components.
(Links: Styled components / Rechts: next-yak)
Die initiale Version entstand in TypeScript. Schnell wurde jedoch klar, dass eine Umsetzung in Rust nicht nur besser zur Tooling-Strategie von Next.js passen würde, sondern auch spürbare Vorteile beim Build- und Analyseprozess bieten könnte. Mit Unterstützung eines LLMs wurde der Kern der Lösung portiert, und next-yak war geboren. Parallel dazu nahm das Team Kontakt mit den Maintainern des SWC (Speedy-Web-Compiler) auf, deren Feedback in Pull Requests direkt in die Entwicklung einfloss. Diese frühe Zusammenarbeit half, Kompatibilitätsfragen schnell zu klären und next-yak stabil in unsere Umgebung zu integrieren.
Migration in drei Monaten durchgezogen
Der entscheidende Meilenstein kam mit dem Rollout der Startseite durch Team Helix bei welchem in einem A/B-Test die gesamte Page auf next-yak migriert wurde. Die Ergebnisse zeigten, dass wir nicht nur die Ladezeiten verbessern konnten, sondern auch der Ressourcenverbrauch sank messbar. Und auch die ‘Interaction-to-Next-Paint’ (INP) wurde positiv beeinflusst. Das Team entschloss sich daraufhin, die Migration auf breiter Front fortzusetzen.
Ein zentraler Erfolgsfaktor war unsere bewusste Entscheidung, die API von styled-components so weit wie möglich beizubehalten. Dadurch konnten bestehende Komponenten mit minimalem Aufwand umgestellt werden. Den eigentlichen Wechsel hat Team Helix übernommen, und dabei einfach einen super Job gemacht. Mit technischem Feingefühl und viel Engagement haben sie die Migration in nur drei Monaten erfolgreich umgesetzt. Im Vergleich zu den drei Jahren, die wir einst für die Einführung von styled-components benötigt hatten, ein grosser Schritt nach vorn.
Luca brachte next-yak schliesslich auch über die eigenen Unternehmensgrenzen hinaus ins Gespräch. Im Austausch mit dem Entwickler Josh W. Comeau, einem bekannten Tech-Blogger, wurde das Projekt auf der React Paris 2024 als zukunftsweisender CSS-in-JS-Ansatz vorgestellt. Und mittlerweile hat Styled-components bekannt gegeben, nur noch im Maintenance-Modus weitergeführt zu werden.
Heute ist next-yak als Open-Source-Projekt öffentlich zugänglich und wird aktiv weiterentwickelt, mit zahlreichen Contributions direkt aus den Engineeringteams von Digitec Galaxus. next-yak ist ein gutes Beispiel dafür, was durch Eigeninitiative, technisches Können und enge Zusammenarbeit im Team entstehen kann. Von der ersten Idee bis zur Open-Source-Veröffentlichung.
Arbeiten bei Galaxus: Flexibel, eigenverantwortlich, piratisch
Bei Digitec Galaxus packen wir Aufgaben proaktiv an und erobern neue Märkte mit über 3'200 Mitarbeitenden in der Schweiz, Deutschland und Serbien. Vielfalt ist unser Schlüssel zum Erfolg, und du kannst Teil dieser spannenden Reise werden!
Flexibilität, die zu dir passt:
- 5 Wochen Urlaub und die Möglichkeit für unbezahlten Urlaub.
- Wähle zwischen einer 42-Stunden-Woche oder Teilzeit bis zu 80%.
- Überstunden kannst du als Freizeit oder Geld kompensieren.
- Homeoffice bis zu 4 Tage pro Woche und Workations bis zu 8 Wochen in ausgewählten Ländern im EU/EFTA Raum.
- 16 Wochen Mutterschaftsurlaub und 4 Wochen Vaterschaftsurlaub.
Exklusive Goodies:
- Attraktive Rabatte auf unser gesamtes Sortiment sowie auf die Galaxus Mobile- und Internet-Abos.
- Personalisierte Hardware – von Notebooks bis zu mechanischen Keyboards.
- Exklusive Migros-Vorteile wie verbesserte Bankkonditionen, Rabatte auf Versicherungen sowie zahlreiche interne Sportprogramme.
- 60% Pensionsbeteiligung (BVG).
Bildung und Wachstum:
- 2000 EDU-Punkte für deine Weiterbildung sowie grosszügige finanzielle Unterstützung für deine Bildungsprojekte.
- Zugang zu internen Workshops von Entwicklern und Coaches.
Werde Teil unseres Teams:
Interessiert? Schau Dir unsere Jobangebote an und werde Teil eines unserer innovativen Teams.
Christian Margadant
Head of Engineering
christian.margadant@digitecgalaxus.ch
