Micro Frontends in Action: A Conversation with Cube Bikes
In this interview, I sat down with Helmut Jost from Cube Bikes to discuss how they adopted Micro Frontends. Pairing an Nx Build Cache with Module Federation helped them cut build times significantly.
Additionally, to speed up builds after modifications that impact the entire application, Nx Cloud can be a valuable option thanks to its distributed task execution. This allows different parts of the system to be compiled in parallel across various cloud nodes. The service also bundles a distributed cache as a standard feature.
Manfred: Helmut, to start things off, could you share some background on your company?
Helmut: As deputy head of IT at Cube Bikes, I oversee a large bicycle manufacturer that leads the European market for mountain bikes. Our Angular journey began back in 2014 with AngularJS, and since then we have built several systems on it, including tools for merchandise and stock management.
Manfred: That's interesting—I didn't realize Cube bikes are made in Bavaria.
Helmut: Correct. We operate from northern Bavaria, where we produce most of our bicycles. Our headquarters and IT team are located there as well.
Manfred: Impressive! You've been maintaining a sizable Angular system for quite some time. What does this system actually look like?
Helmut: We began with Access-based solutions many years ago, then migrated to AngularJS and later to Angular. It all started with the merchandise management system. From there, we expanded into stock management and now we're also creating customer-facing tools such as a web shop.
Manfred: You recently shifted this system over to micro frontends. I actually assisted with that effort. What motivated the switch?
Helmut: Good question. We're looking at a system that has been in development for seven years now, with 17 developers—roughly half of them working with Angular. As time went on, the project became increasingly unwieldy. Development slowed noticeably because starting the application took too long, and build durations kept climbing.
That sluggishness gradually crept in. Early on, when the codebase was still compact, everything felt quick and lean, and that's exactly what we wanted to recreate. So we started exploring ways to break the app apart for development purposes while still delivering a single unified experience to users at runtime. That's why we ran a workshop with you [AngularArchitects.io] to evaluate the options.
Manfred: And the results from that initiative look pretty solid. You really managed to shrink build times dramatically, didn't you?
Helmut: Definitely, especially for local development, since we now only spin up the parts we're actively working on. In terms of the build [on the build server], it varies somewhat: previously it hovered around 10 minutes. These days, if we're able to pull a lot from the build cache—more on that shortly—it can drop to 3 or 4 minutes. That said, there are occasions when it runs a bit longer. The culprit is often ngcc, or situations where changes ripple across everything, like updating package.json. In those cases, a full recompile is unavoidable and can push the duration beyond what it used to be. But since that doesn't happen with every build, the average is still considerably faster.
Manfred: Great. And it's reassuring that ngcc has an "expiration date" built in. So essentially, this initiative was all about cutting build times. Going from 10 minutes to 3 or 4 in the best scenario is genuinely noteworthy.
Manfred: How did you go about implementing Micro Frontends?
Helmut: We combined Nx [Monorepos] with Module Federation for the build.
Manfred: I imagine there were a few hurdles along the way, right?
Helmut: Absolutely, there were challenges. That's precisely why we brought in [AngularArchitects.io] for the workshop. We managed to handle several issues before they became problems: initially, the codebase was split across several npm packages. We removed those early on to eliminate version conflicts [consolidating the code into a single Angular application], and we were already making heavy use of lazy loading. That proved to be a major advantage for the move. On top of that, we had adopted something akin to Domain-driven Design by slicing the application into business domains. Those domains formed the basis for dividing things into multiple Micro Frontends within the Nx monorepo.
Manfred: I think this highlights once more that domain slicing as a principle really pays off. When domains are already decoupled and have few interdependencies, the migration becomes far more manageable. That was definitely true in your case. I was genuinely impressed by how cleanly the domains were separated from one another.
Helmut: Yes, that was thanks to you and your earlier consulting—we took that advice to heart. So it was a worthwhile investment overall.
Manfred: Thank you, I appreciate that. You're also taking advantage of the Nx Build Cache. What benefits have you seen from it?
Helmut: Typically, changes are limited to one module or Micro Frontend at a time, while the rest stays untouched. Recompiling unchanged parts makes little sense, and that's precisely what the Nx Build Cache helps with. It evaluates each component to see if it has actually been modified. If nothing changed, the compiled output is pulled straight from the cache; if there were changes, only that specific part gets rebuilt.
Manfred: Nice. So that's how you got the build times down to around 4 minutes.
Helmut: Exactly! Without that approach, if we were forced to rebuild everything from scratch every time, we'd be looking at 15 or 16 minutes again.
Manfred: Out of the box, Nx stores cached files on the local file system. As I recall, you weren't particularly keen on that approach and preferred to offload the cache elsewhere. So you ended up implementing your own cache solution. Could you walk us through what that does?
Helmut: Sure. Since we run on Kubernetes, an S3 cluster was already at our disposal. Our custom implementation zips the compiled artifact, pushes it to that cluster, and pulls it back down whenever it's needed again.
Manfred: So that gives you a truly shared cache without relying on file shares that could vary from machine to machine. Helmut, thanks for taking the time to chat—this is a really compelling case study.
Helmut: My pleasure!
Looking Ahead: Architecture Resources
For more insights into enterprise-scale Angular architectures, check out our free eBook (5th edition, 12 chapters):
- What criteria should guide the subdivision of a massive application into sub-domains?
- How can you ensure the solution remains maintainable over years or even decades?
- What Micro Frontend capabilities does Module Federation offer?
You can download it here as well.