Building Micro Frontends with React 18 : Develop and Deploy Scalable Applications Using Micro Frontend Strategies / Vinci J. Rufus.

Format:

Book

Author/Creator:

Rufus, Vinci J., author.

Language:

English

Subjects (All):

User interfaces (Computer systems).

Software architecture.

Physical Description:

1 online resource (218 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing, [2023]

Summary:

Although deservedly popular and highly performant tools for building modern web applications, React and single-page applications (SPAs) become more and more sluggish as your applications and teams grow. To solve this problem, many large web apps have started to break down monolith SPAs into independently deployable smaller apps and components—a pattern called micro frontends. But micro frontends aren't a perfect solution, but rather a double-edged sword. This book teaches you how to architect and build them with the right principles to reap all the benefits without the pitfalls. This book will take you through two patterns of building micro frontends, the multi-SPA pattern and the micro apps pattern. You’ll find out which patterns to use and when, as well as take a look at the nuances of deploying these micro frontends using cloud-native technologies such as Kubernetes and Firebase. With the help of this book, you’ll gain an in-depth understanding of state management, solving problems with routing, and deployment strategies between the different micro frontends. By the end of this book, you’ll have learned how to design and build a React-based micro frontend application using module federation and deploy it to the cloud efficiently.

Contents:

Cover

Title Page

Copyright and Credits

Contributors

Table of Contents

Preface

Part 1: Introduction to Microfrontends

Chapter 1: Introducing Microfrontends

Technical requirements

Defining Microfrontends

Understanding the Microfrontend Premium

Exploring the benefits of Microfrontends

Understanding Microfrontend patterns

The Multi-SPA Pattern

The Micro Apps Pattern

Choosing a suitable pattern

Team Composition

Frequency of Deployments

Hello World with Microfrontends

Summary

Chapter 2: Key Principles and Components of Microfrontends

Understanding the Key Principles

Domain Driven Teams

Isolating Failure

Deploying Independently

Preferring Runtime Integrations

Avoiding the "Distributed Monolith" trap

Technology agnostic

Granular Scaling

Culture of Automation and DevOps

The key Components of a Microfrontend Architecture

Routing Engine

A global state and a Communication Channel

Source code Version Control

A Component Library

Chapter 3: Monorepos versus Polyrepos for Microfrontends

Repo types and their nuances

Monorepos

Polyrepos

Differences between Polyrepos and Monorepos

Choosing Monorepos for Microfrontends

Popular Monorepo tools

Setting up our Monorepo

Running the app locally

Creating a new app with Nx Console

Setting permissions in your Monorepo

Part 2: Architecting Microfrontends

Chapter 4: Implementing the Multi-SPA Pattern for Microfrontends

Understanding the multi-SPA architecture

Building our Multi-SPA Microfrontend

Setting up our mini-apps

Using a shared component library

Setting up Routing

Setting up a mocked product list

Adding the product grid and checkout components

Setting up a Global Shared State.

Summary

Chapter 5: Implementing the Micro-Apps Pattern for Microfrontends

Why do we need Module Federation for Microfrontends?

What is Module Federation?

ModuleFederationPlugin

Host apps

Remote Apps

remoteEntry.js

Setting up Microfrontends with a Host and Remote app

Clean up

Setting up the App-shell host app

Setting up our Remote apps

Extending Module Federation to a true Micro-apps Pattern

Creating the Recommendations Remote Micro app

Adding Recommendations as a Remote app to Catalog

State management with Module Federation

Adding the Like button to the host app

Avoiding Unnecessary Re-rendering

Chapter 6: Server-Rendered Microfrontends

How do Client Rendered and Server Rendered Apps differ?

Client Side Rendered Apps (CSR)

Server Side Rendered Apps (SSR)

Building out our Server Rendered Microfrontend

Getting started with Turborepo and Next.js

Setting up our Micro Apps

Part 3: Deploying Microfrontends

Chapter 7: Deploying Microfrontends to Static Storage

What is Static Storage?

Setting up Firebase

Setting up a project with multiple sites

Installing and configuring the Firebase CLI

Creating the Microfrontend Production build

Deploying our Apps to Firebase

Fixing CORS issues

Deploying only the selected target

Deploying only Micro Apps that changed

NX Affected

Creating an Nx custom command executor to deploy

Chapter 8: Deploying Microfrontends to Kubernetes

Introduction to Kubernetes

What is Kubernetes?

Key concepts of Kubernetes

Kubernetes architecture for microfrontends

Containerizing our micro-apps with Docker

Installing Docker

Creating standalone app builds.

Creating a Dockerfile

Setting up Docker Hub to store Docker images

Creating a Kubernetes configuration file

The structure of a Kubernetes spec file

Creating spec files to deploy our microfrontends

Setting up a managed Kubernetes Cluster on Azure

Logging into the Azure portal and setting up a subscription key

Accessing your Kubernetes cluster via the Azure CLI

Generating credentials for your DevOps pipelines

Setting up CI/CD with GitHub Actions

Setting up GitHub secrets

Getting started with GitHub Actions

Updating the remotes

Part 4: Managing Microfrontends

Chapter 9: Managing Microfrontends in Production

Foundational components for a strong software delivery model

Branching strategies

Versioning micro apps

Rolling back a micro app

Deploying micro apps with feature toggles

Chapter 10: Common Pitfalls to avoid when Building Microfrontends

Don't make your micro apps too small

Avoiding the overuse of Shared Component Code

Avoiding using multiple frameworks in your microfrontend

An inability to deploy an individual micro app

Excessively relying on state

Avoiding build-time compilation to assemble Microfrontends

Avoiding packing your micro apps into NPM packages

Part 5: Emerging Trends

Chapter 11: Latest Trends in Microfrontends

Microfrontends - decoupled modular frontends

The island pattern

Beyond Webpack with ES Modules

Using WebAssembly Modules

Edge Functions or Cloud functions

Generative AI and Microfrontends

Index

Other Books You May Enjoy.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781804610220

1804610224

OCLC:

1406832383