To follow the code samples in this book, you need knowledge of JavaScript and how to use the command line. You should have Node.js (version 20 or higher) installed, using the instructions at https://nodejs.org.

For this chapter, there is no source code and no Code in Action (CiA) video available.

Before looking for reasons to use micro frontends, we should look at why micro frontends came to exist at all. How did the web evolve from a small proof of concept (POC) running on a NeXT computer in a small office at Conseil Européen pour la Recherche Nucléaire (CERN)/The European Organization for Nuclear Research to become a central piece of the information age?

Programming the web

My first contact with web development was in the mid-1990s. Back then, the web was mostly composed of static web pages. While some people were experienced enough to bring in some dynamic websites using the Common Gateway Interface (CGI) technology, as shown in Figure 1.1, most webmasters did not have knowledge of this or wanted to spend money on server-side rendering (SSR). The term webmaster was commonly used for somebody who was in charge of a website and instead of doing SSR, everything was crafted by hand upfront.

Figure 1...

In the previous section, we discovered that the eventual split into dedicated parts for the frontend and backend of an application may be quite useful. Staying on the backend, the rise of smaller services that need to be orchestrated and joined together can be observed across the industry in the form of so-called microservices.

From SOA to microservices

While the idea of a service-oriented architecture (SOA) is not new, what microservices brought to the table is freedom of choice. In the early 2000s, the term SOA was introduced to already try that out. However, for SOA, we saw a broad palette of requirements and constraints. From the communicating protocol and the discoverability of the API to the consuming applications, everything was either predetermined – or at least strongly recommended.

With the ultimate failure of SOA, the community tried to stay away from building too many services too quickly. In the end, it was not only about the constraints...

There are a couple of problems that make developing micro frontends that run on the client problematic. Among other considerations, we need to be able to isolate code as much as possible to avoid conflicts. However, in contrast to backend microservices, we may also want to share resources such as a runtime framework; otherwise, exhausting the available resources on a user’s computer is possible.

While this sounds exotic at first, performance is one of the bigger challenges for micro frontends. On the backend, we can give every service a suitable amount of hardware. On the frontend, we need to live with the browser running code on a machine that the user chooses. This could be a larger desktop machine, but it could also be a Raspberry Pi or a smartphone.

One area where recent web standards help quite a bit is with style isolation. Without style isolation, the Document Object Model (DOM) would treat every style as global, resulting in accidental style...

As previously mentioned, there are technical and business reasons why micro frontends have been a bit more difficult to fully embrace than their backend counterparts. My personal opinion is that the technical reasons are significant, but they are not as crucial as the business reasons.

When implementing micro frontends, we should never look for technical reasons alone. Ultimately, our applications are created for end users. As a result, end users should not be impacted negatively by our technical choices.

But not only should the user experience be a driver from a business perspective – the productivity level and the development process should also be taken into consideration. Ultimately, this impacts the user experience just as much and represents the basis for any implementation – how fast we can ship new features or adjust to some user surveys.

Decreasing onboarding time

Twenty years ago, most developers that entered a company stayed for quite...

In this chapter, we investigated how the web has evolved to reach a point where micro frontends can be presented as a viable solution. We discussed that the need for application scaling has hit a point where alignment efforts have had a massive impact on efficiency. Together with some new technical possibilities, the architectural pattern of micro frontends can now be implemented successfully.

You now know that micro frontends not only have a technical but also a business background. However, besides some advantages, they also come with disadvantages. Knowing from the start what to expect is crucial when aiming for a solid solution.

In the next chapter, we’ll have a more detailed look at the challenges and pitfalls of micro frontends. Our goal is to be able to successfully tackle all challenges with sound solutions. We will cover some of the most difficult problems, following a path that leads to proper implementation.