7 Client-side routing and the application shell

This chapter covers:

  • Applying the concepts of inter-team routing to a single-page app
  • Constructing a shared application shell as a single entry point for the user
  • Exploring different approaches to client-side routing
  • Discovering how the micro frontends meta-framework single-spa can make integration easier

In the last two chapters, we focused on composition and communication. We integrated user interfaces from different teams into one view. You learned server- and client-side techniques for doing this. In this chapter, we’ll take a step back and look at page-level integration.

In chapter 2 we covered the most basic page-integration technique: the plain old link. Later, in chapter 3, you saw how to implement a common router that forwards an incoming page request to the responsible team. Now we’ll take these concepts and apply them to client-side routing and single-page apps (SPAs).

7.1 App shell with flat routing

7.1.1 What’s an app shell?

7.1.2 Anatomy of the app shell

7.1.3 Client-side routing

7.1.4 Rendering pages

7.1.5 Contracts between app shell and teams

7.2 App shell with two-level routing

7.2.1 Implementing the top-level router

7.2.2 Implementing team-level routing

7.2.3 What happens on a URL change?

7.2.4 App shell APIs

7.3 A quick look into the single-spa meta-framework

7.3.1 How single-spa works

7.4 The challenges of a unified single-page app

7.4.1 Topics you need to think about

7.4.2 When does a unified single-page app make sense?