2 Loosely Coupled

Being able to work on a larger application with multiple teams in parallel is the key feature of micro frontends. But the user of such an application does not care about the internal team structure. That’s why we need a way to integrate the user interfaces these teams are creating. As you learned in chapter 1, there are different ways of assembling separate UIs in the browser.

In this chapter you’ll learn how to integrate UIs from different teams via links and iframes. From a technology standpoint these techniques are neither new nor exciting. But they come with the benefit, that they are easy to implement and understand. The key point from a micro frontends perspective is that they introduce very little coupling between the teams. No shared infrastructure, libraries or code conventions are required. This gives the teams a maximum amount of freedom to focus on their mission.

2.1  Introducing The Tractor Store

2.1.1  Getting started

2.1.2  This books example code

2.2  Integration via links

2.2.1  How to do it

2.2.2  Dealing with changing URLs

2.2.3  The benefits

2.2.4  The drawbacks

2.2.5  When do links make sense?

2.3  Integration via iframe

2.3.1  How to do it

2.3.2  Layout coupling

2.3.3  Interactions

2.3.4  Error scenarios

2.3.5  The drawbacks

2.3.6  When do iframes make sense?

2.4  Summary