6 Unified Single-Page App


This chapter covers:

  • Eliminating page reloads by combining multiple single-page apps into one
  • Constructing a shared application shell as a single entry point for the user
  • Exploring different approaches for client-side routing
  • Discover how the micro frontends meta-framework single-spa can make integration easier

In the last two chapters, we focused on composition. 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.2 Integration via links we already covered the most basic page-integration technique: the plain old link. Later in chapter 3.2. Routing via a shared web-server 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.

6.1  App shell with flat routing

6.1.1  What’s an app shell?

6.1.2  Anatomy of the app shell

6.1.3  Client-side routing

6.1.4  Page components

6.1.5  Contracts between app shell and teams

6.2  App shell with two-level routing

6.2.1  Implementing the top-level router

6.2.2  Implementing team-level routing

6.2.3  What happens on a URL change?

6.2.4  App shell APIs

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

6.3.1  How single-spa works

6.4  The challenges of a unified single page app

6.4.1  Topics you need to think about

6.4.2  When does a unified single page app make sense?

6.5  Summary