2 My first micro frontends project


This chapter covers:

  • Building the micro frontends example application for this book
  • Connecting pages from two teams via links
  • Integrating a fragment into a page via iframes

Being able to work on a complex application with multiple teams in parallel is the essential feature of micro frontends. But the end 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 minimal coupling between the teams. No shared infrastructure, libraries, or code conventions are required. The loose coupling gives the teams the maximum amount of freedom to focus on their mission.

2.1 Introducing The Tractor Store

2.1.1 Getting started

2.1.2 Running this book’s example code

2.2 Page transition via links

2.2.1 Data ownership

2.2.2 Contract between the teams

2.2.3 How to do it

2.2.4 Dealing with changing URLs

2.2.5 The benefits

2.2.6 The drawbacks

2.2.7 When do links make sense?

2.3 Composition via iframe

2.3.1 How to do it

2.3.2 The benefits

2.3.3 The drawbacks

2.3.4 When do iframes make sense?