5 Client-side Composition

This chapter covers:

Examining Web Components as a client-side composition technique
Investigating how to use micro frontends, built with different frameworks, on the same page
Exploring how Shadow DOM can help to safely introduce a micro frontend into a legacy system without having style conflicts

In the last chapter, you learned about different server-side integration techniques like SSI or Podium. These techniques are indispensable for websites that need to load fast. But for many applications, the first load time is not the only important thing. Users expect websites to feel snappy and react to their input promptly. No one wants to wait for the complete page to reload just because she changed an option in a product configuration. People spend more time on sites that react fast and feel app-like. Due to this fact, client-side rendering with frameworks like React, Vue.js, or Angular has gotten popular. With this model, the HTML markup gets produced and updated directly in the browser. Server-side integration techniques don’t provide an answer to this.

5.1 Wrapping Micro Frontends using Web Components

5.1.1 How to do it

5.1.2 Wrapping your framework in a Web Component

5.2 Style isolation using Shadow DOM

5.2.1 Creating a Shadow Root

5.2.2 Scoping styles

5.2.3 When to use Shadow DOM

5.3 The good and bad of using Web Components for composition

5.3.1 The benefits

5.3.2 The drawbacks

5.3.3 When does client-side integration make sense?

5.4 Summary