Building Micro-Frontends

Book description

Micro-frontends are the answer to today's increasingly complex web applications. Inspired by the microservices model, this approach lets organizations break interfaces into separate features managed by different teams of developers. In this practical guide, Luca Mezzalira shows software architects and senior developers how to build and deliver artifacts atomically rather than use a big bang deployment structure.

You'll learn how this architecture allows different teams to choose any library or framework for their micro-frontends without affecting existing components. This gives your organization technical flexibility and enables you to hire and retain a broad spectrum of talent. Micro-frontends also support distributed or colocated teams more efficiently. Pick up this book and learn how to get started with this technological breakthrough.

  • Explore the technological impact of micro-frontends in your organization
  • Learn how to identify, generate, and orchestrate micro-frontends
  • Identify areas of an application UI that individual teams can handle
  • Understand and manage the complexity that micro-frontends bring inside an organization
  • Establish end-to-end automation for building and deploying micro-frontends using the strangler pattern

Publisher resources

View/Submit Errata

Table of contents

  1. 1. The Frontend Landscape
    1. Micro-Frontends Applications
    2. Single-Page Applications
    3. Isomorphic Applications
    4. Static-Page Websites
    5. JAMStack
    6. Summary
  2. 2. Micro-Frontends Principles
    1. Monolith to Microservices
    2. Moving to Microservices
    3. Introducing Micro-Frontends
    4. Microservices Principles
      1. Modeled Around Business Domains
      2. Culture of Automation
      3. Hide Implementation Details
      4. Decentralize All the Things
      5. Deploy Independently
      6. Isolate Failure
      7. Highly Observable
    5. Applying Principles to Micro-frontends
      1. Modeled Around Business Domains
      2. Culture of Automation
      3. Hide Implementation Details
      4. Decentralization over Centralization
      5. Deploy Independently
      6. Isolate Failure
      7. Highly Observable
    6. Micro-frontends are not a silver bullet
    7. Summary
  3. 3. Micro-Frontend Architectures and Challenges
    1. Micro-frontends Decisions Framework
      1. Define Micro-frontends
      2. Domain-Driven Design with Micro-Frontends
      3. How to define a bounded context
      4. Micro-frontends composition
      5. Routing micro-frontends
      6. Micro-frontends communication
    2. Micro-Frontends in Practice
      1. Zalando
      2. HelloFresh
      3. AllegroTech
      4. Spotify
      5. SAP
      6. OpenTable
      7. DAZN
    3. Summary
  4. 4. Build and Deploy Micro-Frontends
    1. Automation Principles
      1. Keep a Feedback Loop Fast
      2. Iterate Often
      3. Empower Your Teams
      4. Define Your Guardrails
      5. Define Your Test Strategy
    2. Developers Experience (DX)
      1. Horizontal vs. Vertical split
      2. Frictionless Micro-Frontends blueprints
      3. Environments strategies
    3. Version of Control
      1. Monorepo
      2. Polyrepo
      3. A possible future for a version of control systems
    4. Continuous Integration strategies
      1. Testing Micro-Frontends
      2. End-to-End Testing
      3. Fitness Functions
      4. Micro-frontends specific operations
    5. Deployment Strategies
      1. Blue-Green Deployment versus Canary Releases
      2. Strangler pattern
      3. Observability
    6. Summary
  5. 5. Automation Pipeline for Micro-Frontends: A Use Case
    1. Setting the Scene
      1. Version of Control
      2. Pipeline Initialization
      3. Code-Quality Review
      4. Build
      5. Post-Build Review
      6. Deployment
      7. Automation Strategy Summary
    2. Summary
  6. 6. Backend Patterns for Micro-Frontends
    1. Working with a Service Dictionary
      1. Implementing a Service Dictionary in a Vertical-Split Architecture
      2. Implementing a Service Dictionary in a Horizontal-Split Architecture
    2. Working with an API gateway
      1. One API entry point per business domain
      2. A client-side composition, with an API gateway and a service dictionary
      3. A server-side composition with an API gateway
    3. Working with the BFF pattern
      1. A client-side composition, with a BFF and a service dictionary
      2. A server-side composition, with a BFF and service dictionary
    4. Using GraphQL with micro-frontends
      1. The schema federation
      2. Using GraphQL with micro-frontends and client-side composition
      3. Using GraphQL with micro-frontends and a server-side composition
    5. Best practices
      1. Multiple micro-frontends consuming the same API
      2. APIs come first, then the implementation
      3. API consistency
      4. Web socket and micro-frontends
      5. The right approach for the right subdomain
      6. Designing APIs for cross-platform applications
    6. Summary
  7. 7. From Monolith to Micro-Frontends: A Case Study
    1. The Context
      1. Technology Stack
      2. Platform and Main User Flows
      3. Technical Goals
    2. Migration Strategy
      1. Micro-Frontends Decisions Framework Applied
      2. Splitting the SPA in Multiple Subdomains
      3. Technology Choice
    3. Implementation Details
      1. Application Shell Responsibilities
      2. Backend Integration
      3. Integrating Authentication in Micro-Frontends
      4. Dependencies Management
      5. Integrating a Design System
      6. Sharing Components
      7. Implementing Canary Releases
      8. Localization
    4. Summary
  8. 8. Introducing micro-frontends in your organization
    1. Why should we use micro-frontends?
    2. The link between organizations and software architecture
      1. How do committees invent?
      2. Features vs. components teams
    3. Implementing governance for easing the communication flows
      1. RFCs
      2. ADRs
    4. Techniques for enhancing the communication flow
      1. Working backwards
      2. Community of Practice and Town Halls
      3. Managing External Dependencies
    5. A decentralized organization
      1. Decentralization implications with micro-frontends
    6. Summary
  9. A. What does the community think about micro-frontends?

Product information

  • Title: Building Micro-Frontends
  • Author(s): Luca Mezzalira
  • Release date: October 2021
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781492082996