Introduction to 6M

In a nutshell, 6M is an ecosystem of business components for the web. Each 6M component solves a particular business problem. These may be things like a product search, a map with points of interest, an interactive product promotion, or a gallery for hotel images. 6M components can be used stand-alone, but usually they are combined into larger workflows, such as a sales platform.

This approach is called a microfrontend architecture. So, technically speaking, each of these components is a so-called “microfrontend”. Microfrontends allow large organisations to scale their development across autonomous teams with end-to-end responsibility and deliver customer value at high velocity by reducing dependencies between technical assets.

The Component Ecosystem

To understand the concept of “business components for the web”, let’s have a look at an imaginary flight search page:

Each of the green boxes solves a particular problem. Take the three large ones for instance:

• The search form allows searching for flights by selecting departure/destination airports, passengers, and the outbound/inbound dates.
• The filters on the left-hand side apply constraints on the result set.
• The main list presents the found and filtered results and allows selecting one for purchase.

Of course, this web application could be implemented as one big, “monolithic” web application. This is not bad or wrong, but it will eventually get complex and become hard to manage. Therefore, we will make each of the green boxes a dedicated application (a microfrontend) right from the start. This way, they can be developed and delivered independently.

It doesn’t matter if those components are maintained by one team with one development cycle, or by different teams and independent release workflows. The teams only need to agree on a few conventions to allow the components to be plugged together.

The 6M Community

In order to share our knowledge and help each other across organisational boundaries, we maintain a community of practice, involving as many people as possible from all areas of TUI. The community is not only for developers, but also for product owners, designers, infrastructure operators and business roles. Even external companies and their employees (working for TUI on a regular basis) are welcome.

The first step to participate is to join our Teams Workspace. Once you have joined, feel free to ask questions, tell us about your work or simply read what others have to say.

What does 6M mean, anyway?

When we first created our own flavour of a microfrontend architecture, we realized that, as TUI, we need to make each microfrontend component work in large variety of scenarios. We do not want to reinvent the wheel (i.e. rebuild such a component) when the same problem arises in a different context. Therefore, we postulated that a TUI microfrontend component would have to support …

• Multiple languages,
• Multiple currencies,
• Multiple source markets,
• Multiple brands,
• Multiple device types and
• Multiple tenants.

These six dimensions of usage scenarios were the inspiration for the term 6M.