Building Micro-Frontends Distributed Systems for the Frontend, 2nd Edition (Luca Mezzalira) (Z-Library)

📄 File Format: PDF

💾 File Size: 9.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

Luca Mezzalira Building Micro-Frontends Distributed Systems for the Frontend 2nd Edition

📄 Page 2

ISBN: 978-1-098-17078-3 US $69.99 CAN $87.99 SOF T WARE DEVELOPMENT “Every developer who builds microservices, regardless of whether they build user interfaces, will benefit from this enjoyable guide to a critical subject.” Neal Ford, Director/Software Architect/Meme Wrangler at Thoughtworks “If microservices and team topologies had a frontend baby, this book would be it.” Michael Di Prisco, tech lead at Jointly “This book is the intersection of Luca’s multidisciplinary excellence—combining the rigor of a seasoned architect, the clarity of a tech video creator, and the insight of a widely read newsletter curator—distilled into the definitive guide to micro-frontends.” Max Gallo, Distinguished Engineer at DAZN Is your frontend slowing down innovation and complicating team collaboration? Consider micro-frontends— a practical way to break development silos and accelerate feature delivery. In this updated second edition, software architects, tech leads, and software developers will learn how to design, build, and deploy independent micro-frontends that compose unique frontend systems. Author Luca Mezzalira, principal serverless specialist solutions architect at AWS, shows you how micro-frontends enable agility within an organization, decentralize decision-making, and optimize for fast flow. 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. Start transforming your frontend strategy today with proven techniques for speed of delivery, autonomy, and scale. • Accelerate delivery with four foundational pillars for micro-frontend success • Apply actionable principles and best practices to empower your teams • Navigate the benefits and pitfalls of micro-frontend architectures • Integrate micro-frontends seamlessly with microservices and distributed systems • Architect client-side and server-side micro-frontend solutions for maximum impact Luca Mezzalira is principal serverless specialist solutions architect at AWS, known for pioneering micro-frontend architecture and helping teams build scalable, cloud native solutions while sharing best practices with the tech community. Building Micro-Frontends

📄 Page 3

Praise for Building Micro-Frontends This book is the intersection of Luca’s multidisciplinary excellence—combining the rigor of a seasoned architect, the clarity of a tech video creator, and the insight of a widely read newsletter curator—distilled into the definitive guide to micro-frontends. —Max Gallo, Distinguished Engineer at DAZN The first edition covered every critical aspect of adoption. This update keeps pace with today’s tech and practices, modern composition, platform needs, and real scenarios, so it remains my go-to field guide. —Alessandro Cinelli, Engineering Manager at Samsara If microservices and team topologies had a frontend baby, this book would be it. —Michael Di Prisco, Tech Lead at Jointly If you are a technical lead or decision maker looking into introducing and implementing micro-frontends in your organization, then Luca Mezzalira has written the book for you. —Jens Oliver Meiert, Engineering Manager and Author (meiert.com)

📄 Page 4

(This page has no text content)

📄 Page 5

Luca Mezzalira Building Micro-Frontends Distributed Systems for the Frontend SECOND EDITION

📄 Page 6

978-1-098-17078-3 [LSI] Building Micro-Frontends by Luca Mezzalira Copyright © 2026 Luca Mezzalira. All rights reserved. Published by O’Reilly Media, Inc., 141 Stony Circle, Suite 195, Santa Rosa, CA 95401. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Louise Corrigan Development Editor: Angela Rufino Production Editor: Christopher Faucher Copyeditor: Piper Content Partners Proofreader: Andrea Schein Indexer: Ellen Troutman-Zaig Cover Designer: Karen Montgomery Cover Illustrator: Susan Thompson Interior Designer: David Futato Interior Illustrator: Kate Dullea November 2021: First Edition November 2025: Second Edition Revision History for the First Edition 2025-10-24: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781098170783 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Building Micro-Frontends, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

📄 Page 7

Table of Contents Foreword for the 1st Edition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii 1. Micro-Frontend Principles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Monolith to Distributed Systems 3 Moving to Microservices 4 Introducing Micro-Frontends 6 Microservices Principles 8 Modeled Around Business Domains 9 Culture of Automation 9 Hidden Implementation Details 9 Decentralization 9 Independent Deployment 10 Isolated Failures 10 Highly Observable 10 Applying Principles to Micro-Frontends 11 Modeled Around Business Domains 11 Culture of Automation 11 Hidden Implementation Details 12 Decentralization 12 Independent Deployment 12 Isolated Failures 13 Highly Observable 13 Challenges Unique to Micro-Frontends 13 Micro-Frontends Are Not a Silver Bullet 14 Summary 15 v

📄 Page 8

2. Micro-Frontend Architectures and Challenges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Micro-Frontend Decision Framework 18 Defining Micro-Frontends 18 DDD with Micro-Frontends 22 How to Define a Bounded Context 25 Testing Your Micro-Frontend Boundaries 26 Micro-Frontend Composition 27 Client-Side Composition 28 Edge-Side Composition 29 Server-Side Composition 29 Routing Micro-Frontends 30 Micro-Frontend Communication 31 Micro-Frontends in Practice 35 Zalando 35 Formula 1 35 Dunelm 36 Netflix 36 PayPal 36 BMW 36 OpenTable 37 DAZN 37 Summary 37 3. Discovering Micro-Frontend Architectures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Application of the Micro-Frontend Decision Framework 39 Vertical Split 40 Horizontal Split 42 Architecture Analysis 44 Architecture and Trade-Offs 45 Vertical-Split Architectures 46 Application Shell 46 Challenges 49 Architecture Evolution 53 Implementing a Design System 57 Developer’s Experience 60 Performance and Micro-Frontends 60 Available Frameworks 63 Architecture Characteristics 64 Horizontal-Split Architecture 66 Client Side 68 Challenges 72 Micro-Frontend Refactoring 79 vi | Table of Contents

📄 Page 9

Search Engine Optimization 80 Developer Experience 80 Team Communication and Best Practices for Maintaining Control of the Final Outcome 80 Use Cases 82 Available Frameworks 83 Developer Experience 87 Use Cases 87 Architecture Characteristics 88 iframes 89 Best Practices and Drawbacks 90 Developer Experience 91 Use Cases 91 Architecture Characteristics 92 Web Components 94 Web Components Technologies 95 Dependency Management 96 Use Cases 96 Architecture Characteristics 97 Web Fragments 98 Server Side 99 Scalability and Response Time 100 Infrastructure Ownership 101 Composing Micro-Frontends 101 Micro-Frontend Communication 103 Available Frameworks 104 Use Cases 105 Architecture Characteristics 106 Modern Server-Side Rendering Frameworks 108 Use Cases 109 Architecture Characteristics 110 Edge Side 111 Summary 113 4. Client-Side Rendering Micro-Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 The Project 116 Module Federation 101 119 Technical Implementation 121 Project Structure 121 Application Shell 122 Home Micro-Frontend 132 Catalog Micro-Frontend 134 Table of Contents | vii

📄 Page 10

Account Management Micro-Frontend 135 Project Evolution 143 Embedding a Legacy Application 143 Developing the Check-Out Experience 145 Hosting a Client-Side Rendering Micro-Frontend Project 146 Caching 148 Summary 149 5. Server-Side Rendering Micro-Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 When to Use Server-Side Rendering 152 Scalability Challenges 152 Dividing Micro-Frontends 153 Composition Approaches 154 The Main Challenge 155 HTML Fragments 155 Splitting by URL 161 The Formula 1 Website is Powered by Micro-Frontends 162 Next.js Multi-Zones 164 Home Zone: The Entry Point of Your Web Application 166 How to Handle Shared Components 168 How to Manage Data 169 Vercel: A Glance into the Future 171 API Strategies 173 Don’t Fear the Cache: Scaling SSR with Smart Caching Strategies 174 Types of Caches Every Developer Should Know 174 Content Delivery Networks 174 In-Memory Database Cache 174 Warm Cache 175 The BBC Architecture: Caching in Action 176 Performance: The Key Reason for Server-Side Rendering 177 Summary 179 6. Micro-Frontend Automation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Automation Principles 182 Keep the Feedback Loop Fast 183 Iterate Often 183 Empower Your Teams 184 Define Your Guardrails 184 Define Your Test Strategy 185 Developer Experience 185 Horizontal Versus Vertical Split 186 Frictionless Micro-Frontend Blueprints 187 viii | Table of Contents

📄 Page 11

Environments Strategies 188 Version Control 189 Monorepo 189 Polyrepo 193 A Possible Future for a Version Control System 195 Continuous Integration Strategies 196 Testing Micro-Frontends 198 End-to-End Testing 198 Vertical-Split End-to-End Testing Challenges 199 Horizontal-Split End-to-End Testing Challenges 200 Testing Technical Recommendations 201 Fitness Functions 202 Micro-Frontend-Specific Operations 204 Observability 205 Summary 205 7. Discover and Deploy Micro-Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Blue-Green Deployment Versus Canary Releases 207 The Problem Space 209 Welcome to the Frontend Discovery Schema 210 The Benefits of This Pattern 214 Real-World Implementation 215 An Integration Example with Module Federation 216 Integrating the Discovery Pattern with Other Solutions 219 What about Feature Flags? 221 Availability in the Market 223 Summary 224 8. Automation Pipeline for Micro-Frontends: A Case Study. . . . . . . . . . . . . . . . . . . . . . . . . 225 Setting the Scene 225 Version Control 228 Pipeline Initialization 229 Code-Quality Review 229 Build 232 Post-Build Review 232 Deployment 234 Automation Strategy Summary 235 Summary 236 9. Backend Patterns For Micro-Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 API Integration and Micro-Frontends 237 Working with a Service Dictionary 240 Table of Contents | ix

📄 Page 12

Implementing a Service Dictionary in a Vertical-Split Architecture 243 Implementing a Service Dictionary in a Horizontal-Split Architecture 245 Working with an API Gateway 247 One API Entry Point per Business Domain 249 Client-Side Composition with an API Gateway and a Service Dictionary 250 Server-Side Composition with an API Gateway 251 Working with the BFF Pattern 253 Client-Side Composition with a BFF and a Service Dictionary 257 Server-Side Composition with a BFF and a Service Dictionary 259 Using GraphQL with Micro-Frontends 259 The Schema Federation 260 Using GraphQL with Micro-Frontends and a Client-Side Composition 261 Using GraphQL with Micro-Frontends and a Server-Side Composition 263 Best Practices 264 Multiple Micro-Frontends Consuming the Same API 264 APIs Come First, Then Implementation 266 API Consistency 267 WebSocket and Micro-Frontends 267 The Right Approach for the Right Subdomain 268 Summary 268 10. Common Antipatterns in Micro-Frontend Implementations. . . . . . . . . . . . . . . . . . . . . 271 Micro-Frontend or Component? 272 Sharing State Between Micro-Frontends 275 Micro-Frontend Anarchy 277 Anti-Corruption Layer to the Rescue 279 Unidirectional Sharing 281 Premature Abstraction 283 Summary 284 11. Migrating to Micro-Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Why Go Iterative? 286 Which Problem(s) Am I Trying to Solve with Micro-Frontends? 287 Best Practices and Patterns 288 Trade-Offs and Pitfalls 288 Checklist 289 A Quick Example 289 Personal Experience 289 How Can I Get the Management On Board with This Migration? 290 Best Practices and Patterns 290 Trade-Offs and Pitfalls 290 Checklist 291 x | Table of Contents

📄 Page 13

A Quick Example 291 Personal Experience 291 How Should I Actually Plan the Migration? 292 Best Practices and Patterns 292 Trade-Offs and Pitfalls 293 Checklist 293 A Quick Example 293 Personal Experience 294 How Do I Decide Which Modules or Features to Migrate First? 294 Best Practices and Patterns 294 Trade-Offs and Pitfalls 295 Checklist 295 A Quick Example 296 Personal Experience 296 How Do I Maintain User Experience and Consistency During Migration? 296 Best Practices and Patterns 297 Trade-Offs and Pitfalls 298 Checklist 299 A Quick Example 299 Personal Experience 299 How Do I Handle Shared Dependencies and Version Management Between Legacy and Micro-Frontend Code? 300 Best Practices and Patterns 300 Trade-Offs and Pitfalls 301 Checklist 301 A Quick Example 301 Personal Experience 302 How Do I Manage Cross-Cutting Concerns Like Auth, Routing, or State During Migration? 302 Best Practices and Patterns 302 Trade-Offs and Pitfalls 303 Checklist 304 A Quick Example 304 Personal Experience 304 Do I Need Microservices to Migrate to Micro-Frontends? 305 Best Practices and Patterns 305 Trade-Offs and Pitfalls 305 Checklist 306 A Quick Example 306 Personal Experience 306 Summary 307 Table of Contents | xi

📄 Page 14

12. From Monolith to Micro-Frontends: A Case Study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 The Context 310 Technology Stack 310 Platform and Main User Flows 312 Technical Goals 314 Migration Strategy 315 Micro-Frontend Decision Framework Applied 315 Splitting the SPA into Multiple Subdomains 319 Technology Choice 323 Implementation Details 327 Application Shell Responsibilities 327 Application Initialization 327 Communication Bridge 328 Mounting and Unmounting Micro-Frontends 328 Sharing State 329 Global and Local Routing 329 Migration Strategy 330 Backend Integration 330 Integrating Authentication in Micro-Frontends 331 Dependency Management 334 Integrating a Design System 335 Sharing Components 335 Implementing Canary Releases 337 Localization 339 Summary 340 13. Introducing Micro-Frontends in Your Organization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 Why Should We Use Micro-Frontends? 343 Data to the Rescue 345 Creating a Trade-Off Analysis 346 Business Requirements 346 Architecture Characteristics 346 Organization Capabilities 347 The Link Between Organizations and Software Architecture 347 How Do Committees Invent? 348 Features Versus Components Teams 351 Implementing Governance for Easing the Communication Flows 354 Requests for Comments 355 Architecture Decision Records 356 Techniques for Enhancing the Communication Flow 357 Working Backward 357 Community of Practice and Town Halls 359 xii | Table of Contents

📄 Page 15

Managing External Dependencies 360 A Decentralized Organization 362 Decentralization Implications with Micro-Frontends 364 High-Complexity Subdomain 365 High Initial-Effort Subdomain 366 Normal-Complexity Subdomain 366 Low-Complexity Subdomain 367 Summary 367 14. AI and Micro-Frontends: Augmenting, Not Replacing. . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Architecture Is Not Yet Automatable 370 Context Engineering to the Rescue 373 Feasible AI Use Cases Today 375 Testing 375 Automation 376 Debugging with AI 376 Diagram Generation 376 Keeping the README Alive 377 Prototyping 377 Project Scaffolding 377 Code Optimization 378 Bouncing Ideas and Discovering Alternatives with Agentic AI 378 Accessibility 379 Code Migration 379 Discovering Alternatives and Challenging Assumptions with AI 380 My Playbook to Work with AI 380 Step 1: Define What You Want to Achieve 380 Step 2: Engineer the Context; Don’t Just Prompt 382 Step 3: Reason Like You Normally Would as a Developer 385 Step 4: Iterate in Small, Focused Steps 388 Step 5: Review and Refactor the Output 390 Step 6: Automate Through AI 393 Where Code Assistants and AI Fall Short 394 Understanding Code Change Operations 395 What the Future Holds for AI and Micro-Frontends 397 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Table of Contents | xiii

📄 Page 16

(This page has no text content)

📄 Page 17

Foreword for the 1st Edition Named architecture styles (such as microservices) are like art periods in history—no one plans for them, no single person is responsible for the ideas, yet they suffuse through a community. For example, no group of artists gathered in France in the late 19th century and decided to create impressionism. Rather, forces in the art world (reacting to the introduction of primitive photography) drove artists toward repre‐ sentation rather than capturing reality. The same is true for styles of architecture—regardless of what some developers may suspect, there is no ivory tower to which architects retreat to concoct the New Big Thing. Instead, clever architects notice new capabilities appearing within the ecosys‐ tem, and they identify ways to combine these emerging capabilities to solve old prob‐ lems. For microservices, the advent of DevOps, programmatic control of machine configuration (which led to containerization), and the need for faster turnaround spawned this architecture style at several influential organizations. In the past, the name of the architecture style would lag for several years as people figured out that a trend was underway and identified the distinguishing characteris‐ tics that would lead to a name. However, that story slightly differs for microservices. Architects have become clever about noticing the development of new trends and keep a keen eye out for them. In March 2014, Martin Fowler and James Lewis pub‐ lished an iconic essay on Fowler’s website describing a new architecture style going by the name microservices. They didn’t coin the term, but they certainly contributed to the popularity of the new style. And I suspect the authors did the industry a favor as well—their delineation of the characteristics of microservices quite early in their life cycle helped teams hone in on what is and isn’t a microservice more quickly, avoiding months or years of churn trying to figure out their real uses. Because they were describing a new phenomenon, Fowler and Lewis necessarily predicted a few things, including the impact microservices would have on user inter‐ face design. They observed that one of the defining features of microservices is the xv

📄 Page 18

decoupling of services, and they predicted that architects would partition user inter‐ faces to match the level of decoupling. Alas, the real world interfered with their prediction…until now. It turns out that user interfaces are necessarily monolithic in nature: users expect to go to a single place to interact with an application, and they expect certain unified behaviors—all the parts of the user interface work in concert. While it is possible to create truly decoupled user interfaces, this has proved challenging for developers, who have awaited proper framework and tool support. Fortunately, that support has finally arrived. You hold in your hand the definitive guide to this important aspect of microservice development. Luca Mezzalira has done an excellent job describing the problem in clear terms, following up with cutting-edge support to solve common roadblocks. This well-organized book begins by covering the frontend issues that developers cur‐ rently face, then delves into the various aspects of micro-frontends. Luca provides not only technical details but also critical ecosystem perspectives, including how to untangle a monolith into a more decoupled user interface, and how common engi‐ neering practices such as continuous integration can fit into teams’ use of this new technology. Every developer who builds microservices, regardless of whether they build user interfaces, will benefit from this enjoyable guide to a critical subject. — Neal Ford, Director/Software Architect/ Meme Wrangler at Thoughtworks, Inc. xvi | Foreword for the 1st Edition

📄 Page 19

Preface At the beginning of December 2016, I took my first trip to Tokyo. It lasted just a week, but—as I would discover—I would travel to the Japanese capital many more times in the near future. I can clearly remember walking to the airplane at London Heathrow Airport and mentally preparing my to-do list for the impending 12-hour flight. By then, I’d already been traveling for a few weeks in the United States: attending con‐ ferences in the San Francisco Bay Area and Las Vegas. The project I was working on at that time was an over-the-top platform similar to Netflix but dedicated to sports, with daily live and on-demand content available in multiple countries and on more than 30 different devices (web, mobile, consoles, set- top boxes, and smart TVs). It was near the end of the year, and as a software architect, I had to make a proposal for a new architecture that would enable the company to scale to hundreds of developers distributed across multiple locations, without reduc‐ ing the current throughput and ideally enhancing it as much as possible. When I settled in my seat, I became relatively calm. I was still tired from the Vegas trip and admittedly a bit annoyed about the 12 hours I would have to spend on the plane, but I was excited to see Japan for the first time. A few minutes later, I had a glass of champagne. For the first time in my life, I was in business class, with a very comfortable seat and plenty of space to work. At the end of the first hour, it was time to get my laptop out of my backpack and start working on “the big plan.” I still had over 10 hours of flight time during which I could make progress on this huge project that would serve millions of customers around the world. I didn’t know then that the following hours would deeply change the way I would architect cross-platform applications for the frontend. In this book, I want to share my journey into the micro-frontend world: the lessons I learned, the tips for getting a solid micro-frontend architecture up and running, and xvii

📄 Page 20

(finally) the benefits and pitfalls of this approach. Hopefully, these lessons will enable you to evaluate whether this architecture fits your current or next project. Now it’s time for your own journey to begin. Why I Wrote This Book I started thinking about micro-frontends in 2015. During the years that followed, I had the opportunity to implement them in a large-scale organization with distributed teams composed of hundreds of developers, and to explain their benefits as well as their pitfalls. During this time, I also shared these experiences at conferences, webi‐ nars, and meetups, which enabled me to engage with the community—listening to their stories, answering their questions, and collaborating with other companies that embraced this paradigm in different ways. More recently, I suggested several of the practices presented in this book to enterprise organizations all over the world, from Australia to North America. I was exposed to multiple challenges during the design and implementation phases, and the lessons I learned are gathered in these pages as well. This book represents my research, experiences, studies, and insights from the ground up, collected over several years of work with hundreds of teams worldwide. I want to share real examples and topics that I believe are key to succeeding with micro- frontends. Finally, everyone who is interested in learning how to use this architecture style end to end—despite the inevitable evolution we are going to see in the next few years— will find a pragmatic guide that covers every aspect: from engineering culture and organizational structure, to best approaches for dealing with this architecture in pro‐ duction. What you are going to learn in these pages will act as your North Star for creating successful micro-frontend projects. Who This Book Is For This book is for developers, architects, and tech leaders who are looking to scale their organizations and frontend applications. It’s a collection of mental models and experi‐ ences useful for approaching any micro-frontend architecture, and you will find the principles and solutions applied to every approach implemented so far. By following these practices, you will be able to complete a micro-frontend project with the right mindset and overcome common challenges that your teams are going to face during the journey. In this book, you’ll find technical architectures and implementation as well as end-to- end coverage of micro-frontends—from the design phase through to how to organize your teams for migrating existing or greenfield projects to micro-frontends. xviii | Preface