Diving deep into KLM’s BlueWeb

What is BlueWeb?

BlueWeb is the front-end application used to search for available flights, purchase tickets, select seating and check-in when it’s time to fly. The e-commerce website for Air France and KLM uses one application with reusable components in their branding. The front-end was built with Angular, Typescript, SASS and Apollo for GraphQL. The backend is on GraphQL with Apollo server on top of NodeJS and Redis. We deploy within Docker containers on the Kubernetes platform, which is hosted on Azure Cloud.

How did BlueWeb evolve?

When Air France and KLM merged, there was a difference in how customers searched and shopped for flights. Air France would have split pricing in search flows, so you would see the individual prices of outbound and inbound flights, while KLM showed the total price immediately. We wanted one application for both companies so we could use the same back-end for both airlines. That’s why we developed Unique Business Components. These are autonomous, replaceable and reusable front-end components, each with their own unique business functionality. Based on these UBC’s, we could build different front end applications.

How does BlueWeb impact the organisation?

BlueWeb is responsible for online check-ins. Because of that growth, we have fewer check-ins at the airport, but when online check-ins don't work for more than four hours, they need to be handled at the airport. But since there are only so many check-in desks, we calculated that the airport would have to shut down if that were to happen. So yes, BlueWeb is a business-critical application. It handles over 1 million visitors on a normal day, but when we have special campaigns on flights, this can easily double. The way we can scale both applications and servers is quite unique.

What are the technical challenges involved?

BlueWeb was built in Angular, which is still a relatively new technology. We have to keep up with the latest implementation of all the frameworks we use. We’re fortunate to have a close relationship with the development team at Google. Our team visit the Angular Enterprise Summit every year to discuss new opportunities and see how we can help each other.

We apply the concepts of continuous integration & continuous delivery to release small bits of new features daily. A few years ago, upgrading the Angular framework would take two weeks. We evolved on that level and can now upgrade in a day of work.

What makes it so interesting to work on?

If you come up with an idea or a feature that you think we should implement, you get the chance to elaborate on the concept and find a team to work on it. You can actually build it. You don’t need permission to get started. Not only that, but you can do a lot for yourself, and you have the freedom to manage what’s necessary for a project. Whether you want to have an external knowledge session or learn on the job, the opportunities are available.

What are the benefits of working at Air France KLM?

When you’re part of one of the software teams at BlueWeb, you’re responsible for releasing and managing the applications. The applications you help build are used by more than 150,000 users per day. We monitor daily to see if everything is working correctly.

Besides working on applications with such a significant impact, you work closely with other global companies, share insights and become part of a growing development team.