Building Micro-Frontends

Building Micro-Frontends

by Luca Mezzalira
Released November 2021
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781492082996

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

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

You'll learn how micro-frontends enable your team to choose any library or framework. This gives your organization technical flexibility and allows 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 right away.

  • Explore available frontend development architectures
  • Learn how microservice principles apply to frontend development
  • Understand the four pillars for creating a successful micro-frontend architecture
  • Examine the benefits and pitfalls of existing micro-frontend architectures
  • Learn principles and best practices for creating successful automation strategies
  • Discover patterns for integrating micro-frontend architectures using microservices or a monolith API layer

Publisher resources

View/Submit Errata

Table of contents

  1. Foreword
  2. Preface
    1. Why I Wrote This Book
    2. Who This Book Is For
    3. How This Book Is Organized
    4. Conventions Used in This Book
    5. O’Reilly Online Learning
    6. How to Contact Us
    7. Acknowledgments
  3. 1. The Frontend Landscape
    1. Micro-Frontend Applications
    2. Single-Page Applications
    3. Isomorphic Applications
    4. Static-Page Websites
    5. Jamstack
    6. Summary
  4. 2. Micro-Frontend Principles
    1. Monolith to Microservices
      1. Moving to Microservices
      2. Introducing Micro-Frontends
    2. Microservices Principles
      1. Modeled Around Business Domains
      2. Culture of Automation
      3. Hide Implementation Details
      4. Decentralize Governance
      5. Deploy Independently
      6. Isolate Failure
      7. Highly Observable
    3. Applying Principles to Micro-Frontends
      1. Modeled Around Business Domains
      2. Culture of Automation
      3. Hide Implementation Details
      4. Decentralize Governance
      5. Deploy Independently
      6. Isolate Failure
      7. Highly Observable
    4. Micro-Frontends Are Not a Silver Bullet
    5. Summary
  5. 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
  6. 4. Discovering Micro-Frontend Architectures
    1. Micro-Frontend Decisions Framework Applied
      1. Vertical Split
      2. Horizontal Split
    2. Architecture Analysis
      1. Architecture and Trade-offs
    3. Vertical-Split Architectures
      1. Application Shell
      2. Challenges
      3. Implementing a Design System
      4. Developer Experience
      5. Search Engine Optimization
      6. Performance and Micro-Frontends
      7. Available Frameworks
      8. Use Cases
      9. Architecture Characteristics
    4. Horizontal-Split Architectures
      1. Client Side
      2. Challenges
      3. Search Engine Optimization
      4. Developer Experience
      5. Use Cases
      6. Module Federation
      7. Iframes
      8. Web Components
      9. Server Side
      10. Edge Side
    5. Summary
  7. 5. Micro-Frontend Technical Implementation
    1. The Project
    2. Module Federation 101
    3. Technical Implementation
      1. Project Structure
      2. Application Shell
      3. Authentication Micro-Frontend
      4. Catalog Micro-Frontend
      5. Account Management Micro-Frontend
    4. Project Evolution
      1. Embedding a Legacy Application
      2. Developing the Checkout Experience
      3. Implementing Dynamic Remotes Containers
    5. Webpack Lock-in
    6. Summary
  8. 6. 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. Developer Experience
      1. Horizontal Versus Vertical Split
      2. Frictionless Micro-Frontends Blueprints
      3. Environments Strategies
    3. Version Control
      1. Monorepo
      2. Polyrepo
      3. A Possible Future for a Version Control System
    4. Continuous Integration Strategies
      1. Testing Micro-Frontends
      2. Fitness Functions
      3. Micro-Frontend-Specific Operations
    5. Deployment Strategies
      1. Blue-Green Deployment Versus Canary Releases
      2. Strangler Pattern
      3. Observability
    6. Summary
  9. 7. Automation Pipeline for Micro-Frontends: A Case Study
    1. Setting the Scene
      1. Version Control
      2. Pipeline Initialization
      3. Code-Quality Review
      4. Build
      5. Post-Build Review
      6. Deployment
      7. Automation Strategy Summary
    2. Summary
  10. 8. Backend Patterns for Micro-Frontends
    1. API Integration and Micro-Frontends
      1. Working with a Service Dictionary
      2. Working with an API Gateway
      3. Working with the BFF Pattern
      4. Using GraphQL with Micro-Frontends
      5. Best Practices
    2. Summary
  11. 9. 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-Frontend Decisions Framework Applied
      2. Splitting the SPA in Multiple Subdomains
      3. Technology Choice
    3. Implementation Details
      1. Application Shell Responsibilities
      2. Application Initialization
      3. Communication Bridge
      4. Backend Integration
      5. Integrating Authentication in Micro-Frontends
      6. Dependencies Management
      7. Integrating a Design System
      8. Sharing Components
      9. Implementing Canary Releases
      10. Localization
    4. Summary
  12. 10. 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 Versus Components Teams
    3. Implementing Governance for Easing the Communication Flows
      1. Requests for Comments
      2. Architectural Decision Records
    4. Techniques for Enhancing the Communication Flow
      1. Working Backward
      2. Community of Practice and Town Halls
      3. Managing External Dependencies
    5. A Decentralized Organization
      1. Decentralization Implications with Micro-Frontends
    6. Summary
  13. A. What Does the Community Think About Micro-Frontends?
    1. Nimisha Asthagiri, Chief Architect at edX
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontend project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience like in your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges in embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
    2. Felipe Guizar, Senior Software Engineer at Wizeline
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontends project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience like in your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges of embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
    3. Anthony Frehner, Frontend Architect
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS projects related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontend project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges in embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
    4. Joel Denning, Frontend Software Dev and Independent Consultant
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. Which benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontends project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges in embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
    5. Zack Jackson, Principal Engineer of Lululemon
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontend project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges in embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
    6. Erik Grijzen, Software Engineer
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontend project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. What are the main challenges in embracing this architecture from your perspective?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words...
    7. David Leitner, Cofounder of SQUER Solutions
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontends project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? Which challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Would you like to share some useful resources about micro-frontends?
      14. Micro-frontends in three words…
    8. Philipp Pracht, Architect and Product Owner at SAP
      1. Please introduce yourself.
      2. What is your experience with micro-frontends?
      3. What benefits and pitfalls did you encounter in your journey with micro-frontends?
      4. Did you contribute to any OSS project related to micro-frontends? If so, which one?
      5. When would you suggest using micro-frontends, and when should we avoid them?
      6. At the end of your last micro-frontend project, what worked and what didn’t?
      7. What are the must-have tools for developers to have an efficient experience with micro-frontends?
      8. What would you suggest for a person who wants to embrace this architecture?
      9. What was the impact of introducing micro-frontends to developers who didn’t know about them? What challenges have you faced?
      10. What was the developer experience on your last project?
      11. Many developers are concerned about performance and design consistency with micro-frontends. What are your suggestions for overcoming these challenges?
      12. What are the first steps for working with micro-frontends?
      13. Can you share the main thing to avoid when working with micro-frontends?
      14. From your perspective, what are the main challenges in embracing this architecture?
      15. Would you like to share some useful resources about micro-frontends?
      16. Micro-frontends in three words…
  14. Index
  15. About the Author

Product information

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