Book Image

The Art of Micro Frontends

By : Florian Rappl
Book Image

The Art of Micro Frontends

By: Florian Rappl

Overview of this book

Micro frontend is a web architecture for frontend development borrowed from the idea of microservices in software development, where each module of the frontend is developed and shipped in isolation to avoid complexity and a single point of failure for your frontend. Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you through the patterns available for implementing a micro frontend solution. You’ll learn about micro frontends in general, the different architecture styles and their areas of use, how to prepare teams for the change to micro frontends, as well as how to adjust the UI design for scalability. Starting with the simplest variants of micro frontend architectures, the book progresses from static approaches to fully dynamic solutions that allow maximum scalability with faster release cycles. In the concluding chapters, you'll reinforce the knowledge you’ve gained by working on different case studies relating to micro frontends. By the end of this book, you'll be able to decide if and how micro frontends should be implemented to achieve scalability for your user interface (UI).
Table of Contents (21 chapters)
1
Section 1: The Hive - Introducing Frontend Modularization
6
Section 2: Dry Honey - Implementing Micro frontend Architectures
14
Section 3: Busy Bees - Scaling Organizations

Diving into Web Components

With the rise of JavaScript frameworks and the increased importance of client-side rendering, Web Components have been proposed and standardized. The term web component is used as an umbrella expression for a set of features that try to provide a standard component model for the web.

In the following sections, we'll try to understand the most important features that actually form Web Components and how Web Components can help us to isolate styles.

Understanding Web Components

As you know already, Web Components provide the ability to use custom elements in HTML documents. These could look as simple as the following snippet:

<product-page id="app"></product-page>

While custom elements cannot be changed from the HTML parsing perspective, they can be fully configured in terms of behavior and appearance. For instance, custom elements cannot be self-closed like <img> or <meta> tags. To add some custom appearance...