Tech Meetup at WTC Amsterdam: Scaling Web Apps with Bol.com

I’m leaving the Netherlands soon. But as a software developer and a life learner, I cannot miss any opportunity to learn things and grow.

You might heard of Meetup, a platform to allow people to gather together for a specific event. It’s usually free. Today I booked a Meetup at World trade Center Amsterdam. I need to take a train from my place (Rotterdam) to Amsterdam. But I’m sure it will worth my trip.

The good thing about the Netherlands is that you can always find things valuable in English. So I never worry about not knowing any Dutch language.

Here is the video I made for this meetup. It’s hugely informative. If you like to read, please continue to read the full content from the presentation below the video.

---

Bol.com, the largest online retailer in the Netherlands and Belgium, is a name many are familiar with for its diverse product range and innovative approach. Today, I want to share insights from my experience working on their Angular applications and what I’ve learned about scalability, collaboration, and maintaining design consistency in a large-scale organization.

A Brief History of Bol.com

Bol.com started in 1999 as a small webshop selling books. Over time, it grew to include a broad range of products like sporting goods, home appliances, and gardening tools. By 2013, Bol.com had transitioned from being a webshop to a thriving shopping platform, inviting third-party sellers to list their products. This transformation brought massive success but also a new set of challenges, especially in scaling technology and maintaining usability.

The Challenges of Monolithic Applications

Initially, Bol.com relied on a monolithic architecture, where the front-end and back-end existed as a single large application. While this approach worked for smaller teams, it became increasingly complex as the company scaled and more features were added. Key challenges included:

• Codebase Maintenance: A single, large codebase became difficult to manage with multiple teams.
• Performance Issues: Adding new features impacted application speed.
• Collaboration Barriers: Teams found it hard to work independently due to shared resources and dependencies.

These issues highlighted the need for a more scalable and flexible architecture.

---

Transitioning to Microservices and Micro Frontends

To overcome the limitations of monolithic applications, Bol.com adopted a microservices architecture. Here’s how it worked:

• Backend Microservices: The monolith was split into smaller, independent services, each handling a specific feature.
• Micro Frontends: Frontend workflows, such as login or price adjustments, were divided into standalone components called micro frontends.

This approach improved scalability, team autonomy, and system performance.

The Importance of a Design System

As the application scaled, maintaining consistency across teams and components became a challenge. Bol.com addressed this by developing a design system—a collection of reusable UI components and guidelines that ensured uniformity.

Benefits of the Design System:

• Consistency: Standardized UI elements ensured all teams followed the same design principles.
• Efficiency: Teams could quickly build features using pre-designed components.
• Scalability: The design system supported multiple frameworks and technologies, from Angular to React.

---

Leveraging Web Components and Stencil.js

Bol.com adopted web components to ensure flexibility and interoperability. Web components are reusable, custom HTML elements that work across frameworks and browsers. By using Stencil.js, a web components generator, the team:

• Reduced development time with built-in tools for testing and bundling.
• Ensured compatibility with Angular, React, and vanilla JavaScript applications.
• Enhanced performance with lightweight, modular components.

Efficient Repository Management

To manage the growing library of components, Bol.com adopted a monorepository approach. This allowed all components to exist in a single repository, simplifying versioning, collaboration, and reuse. With tools like Lerna, they ensured seamless publishing and version control.

Key Takeaways

Working on large-scale web applications at Bol.com has been a journey of learning and adaptation. Here are some lessons I’ve gained:

1. Scalability Requires Change: Transitioning from a monolith to microservices can unlock growth but requires careful planning.
2. Consistency Is Key: A robust design system ensures teams can scale while maintaining a unified look and feel.
3. Collaboration Is Crucial: Open communication and shared tools empower teams to work autonomously yet cohesively.
4. Adaptability Wins: Embracing new technologies like Stencil.js and modern architectural patterns keeps systems future-proof.

---

Bol.com’s journey from a small webshop to a technological powerhouse is a testament to innovation and resilience. Whether you’re building a startup or scaling an enterprise, the lessons from this journey can offer valuable insights.

What challenges have you faced in scaling applications, and how did you overcome them? Let’s discuss! 😊