Building Micro Frontends with React 18 Develop and Deploy Scalable Applications Using Micro Frontend Strategies
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 independ...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2023]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009781240006719 |
Tabla de Contenidos:
- 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
- Summary
- Chapter 3: Monorepos versus Polyrepos for Microfrontends
- Technical requirements
- 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
- Summary
- Part 2: Architecting Microfrontends
- Chapter 4: Implementing the Multi-SPA Pattern for Microfrontends
- Technical requirements
- 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
- Technical requirements
- 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
- Summary
- Chapter 6: Server-Rendered Microfrontends
- Technical requirements
- 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
- Summary
- Part 3: Deploying Microfrontends
- Chapter 7: Deploying Microfrontends to Static Storage
- Technical requirements
- 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
- Summary
- Chapter 8: Deploying Microfrontends to Kubernetes
- Technical requirements
- 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
- Summary
- 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
- Summary
- 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
- Summary
- 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
- Summary
- Index
- Other Books You May Enjoy.
