SPA Composition

In the previous chapters, we had a glimpse of how micro frontends can be composed just using the browser without any active backend support. Most of the time, this technique becomes really interesting with increased user interactivity.

Today, single-page applications (SPAs) offer a rich interactive application feeling that many experiences target. Combining multiple components from standard SPA frameworks such as Angular or React is described with the SPA composition pattern.

The key factor for a SPA is that routing is not done on the server, but rather in the frontend. Routing in JavaScript requires techniques such as taking the URL’s hash or controlling the history API of HTML5. Then older features such as AJAX can be used to lazy load the content that should be presented on a page.

In this chapter, we cover the pattern of SPA composition, which allows different SPA frameworks to be contained in the same application.

We’ll touch on the following...