Behind the scenes
From bytes to insights: Product Development in transition (part 1)
by Ronny Wullschleger
next-yak: Innovation made in Zurich (part 2)
30.6.2025
Translation: Patrik Stainbrook
After taking a look at our data architecture in part one of this series, here’s the next exciting topic from the development of our online shop: next-yak, our new solution for high-performance CSS-in-JS. In this article, we explain how an internal idea turned into a powerful tool that now significantly speeds up our online shop and is even available to you as open source.
At the start of 2024, we were faced with a familiar but increasingly pressing problem: our web applications were struggling with performance bottlenecks. Styled-components, our preferred CSS-in-JS framework for years, helped us organise styles in a clean and structured way, but was increasingly dragging at runtime. Loading times suffered, especially on pages with many components such as the homepage or product detail pages.
Jan, Lead Frontend Engineer on Team Isotopes, observed the situation closely and waited to see if a new solution would emerge from the open source community. When no serious alternative or solution appeared for months, he decided to take action himself.
In an initial proof of concept, Jan and Luca, Senior Software Engineer on Team Helix, tested whether a zero runtime solution with build-time CSS extraction would be viable. The results were promising, as synthetic tests on sample pages already showed significantly better performance compared to styled components.
(Left: styled-components / Right: next-yak)
The initial version was created in TypeScript. However, it quickly became clear that an implementation in Rust would both fit better with the tooling strategy of Next.js and would offer noticeable advantages in the build and analysis process. With the support of an LLM, the core of the solution was ported and next-yak was born. At the same time, the team contacted the maintainers of SWC (Speedy Web Compiler), whose feedback was incorporated directly into the development in the form of pull requests. This early collaboration helped to quickly clarify compatibility issues and integrate next-yak into our environment in a stable manner.
Migration completed in three months
The decisive milestone came with the rollout of our front page by Team Helix, during which the entire page was migrated to next-yak in an A/B test. The results showed that we were able to improve loading times while measurably reduce resource consumption at the same time. And the Interaction-to-Next-Paint (INP) was also positively influenced. The team then decided to continue the migration on a broad front.
A key success factor was our conscious decision to retain the API of styled-components as far as possible. This meant that existing components could be converted with minimal effort. Team Helix took care of the actual changeover and did a great job. With technical sensitivity and a great deal of commitment, they successfully implemented the migration in just three months. Compared to the three years it once took us to introduce styled-components, this is a big step forward.
In the end, Luca even made next-yak a topic of conversation beyond the company’s borders. In an exchange with developer Josh W. Comeau, a well-known tech blogger, the project was presented at React Paris 2024 as a forward-looking CSS-in-JS approach. And Styled-components has since announced that it will only be continued in maintenance mode.
Today, next-yak is publicly accessible as an open source project and is being actively developed further, with numerous contributions directly from the Digitec Galaxus engineering teams. next-yak is a good example of what can be achieved through initiative, technical expertise and close teamwork – from the initial idea to open source release.
Working at Galaxus: flexible, independent, piratesque
At Digitec Galaxus, we tackle tasks proactively and conquer new markets with over 3,200 employees in Switzerland, Germany and Serbia. Variety is our key to success, and you can be part of this exciting journey!
Flexibility that suits you:
- Five weeks of holiday and the option of unpaid leave.
- Choose between a 42-hour week or part-time up to 80 per cent.
- Overtime can be compensated as time off or money.
- Work from home for up to four days per week and workations up to eight weeks in selected countries in the EU/EFTA area.
- Sixteen weeks of maternity leave and four weeks of paternity leave.
Exclusive goodies:
- Attractive discounts on our entire product range as well as Galaxus Mobile and Galaxus Internet plans.
- Personalised hardware, from notebooks to mechanical keyboards.
- Exclusive Migros benefits such as improved banking conditions, discounts on insurance and numerous internal sports programmes.
- 60 per cent pension participation (BVG).
Education and growth:
- 2000 EDU points for your further education as well as generous financial support for your developmental projects.
- Access to internal workshops with developers and coaches.
Become part of our team:
Interested? Take a look at our job offers and join one of our innovative teams.
Christian Margadant
Head of Engineering
christian.margadant@digitecgalaxus.ch
