Building Micro-Frontends: Scaling Teams and Projects, Empowering Developers

Description

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