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 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, including SSI and Podium. These techniques are indispensable for websites that need to load quickly. 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 they changed an option in a product configuration. People spend more time on sites that react quickly and feel app-like. Due to this fact, client-side rendering with frameworks like React, Vue.js, or Angular has become 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?

Summary

sitemap