Microfrontends with Angular Why Microfrontends?

Watch the full migration guide to micro frontends on YouTube! By Konstantin Tieber and Fabian Böller.

Microfrontends are a technique to eliminate or reduce dependencies between multiple frontend teams. The assumption is that work within teams is faster than work between teams. Hence, if we eliminate dependencies between teams, then there is more work within teams and less work between teams. As a result, the teams are faster.

Delivery pipeline with frontend monolith:

%%{init: {'theme': 'base', 'themeVariables': {"darkMode":true,"background":"#003890","primaryColor":"#0063b1","fontFamily":"Montserrat, sans-serif","fontSize":"1rem","lineColor":"white"} }}%%
graph LR
  B1(Team 1: Build)
  B2(Team 2: Build)
  D(Team 1 + Team 2: Deploy)
  UI(Team 1 + Team 2: UI)

  B1-->D
  B2-->D
  D-->UI

Delivery pipeline with microfrontends:

%%{init: {'theme': 'base', 'themeVariables': {"darkMode":true,"background":"#003890","primaryColor":"#0063b1","fontFamily":"Montserrat, sans-serif","fontSize":"1rem","lineColor":"white"} }}%%
graph LR
  B1(Team 1: Build)
  D1(Team 1: Deploy)
  B2(Team 2: Build)
  D2(Team 2: Deploy)
  UI(Team 1 + Team 2: UI)

  B1-->D1-->UI
  B2-->D2-->UI

Therefore, microfrontends can only be valuable in a setting with multiple teams. In a small startup or a company with few frontend work, microfrontends don't provide value. At the same time, they introduce complexity. If you think about introducing microfrontends, I would therefore recommend to take a look at the amount of complexity introduced vs. the amount of decoupling achieved. With the YouTube video and these accompanying blog posts, you will get a sense of both the complexity and the value provided to be able to make a call.

What are advantages of microfrontends? 🔗

Let's take a look what this "decoupling of teams" actually means.

• Independent deployment pipelines If you use a frontend monolith, then this monolith builds and deploys as a whole. If a deployment fails and the pipeline needs to be repaired, then this is blocking all frontend teams. If more frontend teams are created, then the monolithic deployment pipeline slows down for all teams. Microfrontends utilize independent deployment pipelines. If a deployment fails, then other teams are not blocked. If a new frontend team is created, then the speed of the individual deployment pipelines is not affected.
• Freedom from existing codebase If you use a frontend monolith, then some technologies are set in stone. Frameworks like Angular, but also libraries like RxJS or xstate, and style libraries like TailwindCSS or Bootstrap. Microfrontends create a safe space to experiment. A Svelte microfrontend can be integrated into an Angular platform, the Bootstrap platform styles remain unaffected by the TailwindCSS styles of a microfrontend.
• Vertical services If you think about using microfrontends, you likely already started using microservices. Both techniques combined allow teams to be responsible for a domain. Since users work and think in these domains rather than frontend and backend, the work of the teams matches the domains of the users more closely. As a result, teams can relate better to users and anticipate their interactions.

%%{init: {'theme': 'base', 'themeVariables': {"darkMode":true,"background":"#003890","primaryColor":"#0063b1","fontFamily":"Montserrat, sans-serif","fontSize":"1rem","lineColor":"white"} }}%%
graph TD
  A1(Team 1: Frontend)
  B1(Team 1: Backend)
  C1(Team 1: Database)
  A2(Team 2: Frontend)
  B2(Team 2: Backend)
  C2(Team 2: Database)
  D(Team 3: Infrastructure)

  A1-->B1-->C1-->D
  A2-->B2-->C2-->D

What are disadvantages of microfrontends? 🔗

Every technique has its tradeoffs. Microfrontends introduce complexity to achieve decoupling.

• Runtime integration complexity A monolith is naturally integrated with itself. Microfrontends need to have their independent deployment location, routing to be on the same domain, loading at runtime, etc. These things require thought and time. We hope that the video on the series help you to reduce that thought and time. However, it is still more than with a monolith.
• UI integration complexity Users should not notice that they are working with microfrontends. Overlays, localization, theming, bookmarks and other aspects should just work. With web-component based microfrontends this can be achieved. But while theming and overlays can be achieved more easily, localization and routing for bookmarks are still achieved less easily.
• Bundle sizes A web-component based Angular microfrontend weighs 1MB. If used heavily, you might need to invest more time and introduce more complexity to reduce this footprint.

Why based on web components and not iframes? 🔗

Another way of integrating independent frontends are iframes. While iframes allow a strong decoupling, they decouple so much that overlays and theming become an additional effort to couple again. Web components couple a micro frontend more tightly to the platform, reducing the effort for some aspects.

When should you use microfrontends? 🔗

If you are unsure if you need microfrontends, these are indicators that you might want to think about them.

• Slow deployments Individual deployments take a lot of time. Engineers are delaying their merges or deployments because there are ongoing deployments. They bundle multiple changes together into a deployment to reduce the time until the changes are in production.
• Blocked deployment pipelines Engineers are waiting a substantial amount of time for engineers of other teams to fix a blocked deployment pipeline.
• Unclear responsibilites There is code and there are tests in the frontend codebase that nobody feels responsible for. If a deployment fails, then it is unclear which team is able to resolve it. There exist tests that can fail due to changes of code of different teams.

Conclusion 🔗

Introducing microfrontends involves a tradeoff between decoupling and complexity. They require a less complex integration than iframes to achieve the same user experience as a monolith. But they entail more complexity than a monolith at the advantage of more decoupled and therefore faster teams.

I hope we could show you why and when it makes sense to think about adopting microfrontends based on web components.