9 Which architecture fits my project?

 

This chapter covers:

  • Contrasting different micro frontend architectures you can build with the learned integration techniques
  • Comparing the benefits and challenges of different high-level architectures
  • Figuring out the best architecture and composition technique for your project’s needs

In the last seven chapters, you’ve learned different techniques for integrating user interfaces owned by different teams. We started with simple ones like links, iframes, and Ajax, but also more sophisticated ones like server-side integration, Web Components, and the app shell model. These chapters all ended with a simplified comparison chart indicating how the newly learned technique compares to the previous ones. In this chapter, we’ll put all the puzzle pieces together and also make a more in-depth comparison. First, we revisit the terminology and highlight the key advantages of the different techniques and architectures. After that, you’ll learn about the Documents-to-Applications Continuum, which can help you decide if you should go for a server- or client-side integration. This distinction is crucial because it determines which architectures and integration patterns are suitable for your use case. We’ll end this chapter with an architecture decision guide. You’ll learn how you can make a sound choice based on a handful of questions. These questions will lead you through the different options.

9.1 Revisiting the terminology

9.1.1 Routing and page transitions

9.1.2 Composition techniques

9.1.3 High-level architectures

9.2 Comparing complexity

9.2.1 Heterogeneous architectures

9.3 Are you building a site or an app?

9.3.1 The Documents-to-Applications Continuum

9.3.2 Server, client, or both

9.4 Picking the right architecture and integration technique

9.4.1 Strong isolation (legacy, third party)

9.4.2 Fast first-page load/progressive enhancement

9.4.3 Instant user feedback

9.4.4 Soft navigation

9.4.5 Multiple micro frontends on one page

Summary