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

by Luca Mezzalira

Overview

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

Product Details

ISBN-13:	9781492082996
Publisher:	O'Reilly Media, Incorporated
Publication date:	12/28/2021
Pages:	334
Product dimensions:	7.00(w) x 9.19(h) x 0.70(d)

About the Author

Luca Mezzalira is VP of Architecture at DAZN with over 15 years of experience, a Google Developer Expert on Web Technologies, and the London Javascript Community Manager. He has had the opportunity to work on cutting-edge projects for mobile, desktop, web, TVs, set top boxes, and embedded devices.

Luca currently manages the technical department of DAZN, a sports video platform based on the cloud with millions of users who are watching live and on-demand content. In this role, he encounters all the typical problems, like scalability, resilience, and high availability.

Luca thinks the best way to use any programming language is mastering their models, that’s why he spends a lot of time studying and researching on topics like OOP, Functional and Reactive programming. In addition, he is a huge believer in cloud infrastructures; in his daily job, Luca uses AWS applying Serverless and Containers paradigms.

Luca is the author of Front-End Reactive Architectures published by APress. In Luca’s spare time, he has written for national and international technical magazines and editors. He is also a technical reviewer for APress, Packt Publishing, Pragmatic Bookshelf, and O'Reilly.

Table of Contents

Foreword ix

Preface xi

1 The Frontend Landscape 1

Micro-Frontend Applications 1

Single-Page Applications 3

Isomorphic Applications 5

Static-Page Websites 7

Jamstack 7

Summary 8

2 Micro-Frontend Principles 9

Monolith to Microservices 11

Moving to Microservices 12

Introducing Micro-Frontends 14

Microservices Principles 16

Modeled Around Business Domains 16

Culture of Automation 17

Hide Implementation Details 17

Decentralize Governance 17

Deploy Independently 17

Isolate Failure 18

Highly Observable 18

Applying Principles to Micro-Frontends 18

Modeled Around Business Domains 18

Culture of Automation 19

Hide Implementation Details 19

Decentralize Governance 19

Deploy Independently 19

Isolate Failure 20

Highly Observable 20

Micro-Frontends Are Not a Silver Bullet 20

Summary 21

3 Micro-Frontend Architectures and Challenges 23

Micro-Frontends Decisions Framework 23

Define Micro-Frontends 24

Domain-Driven Design with Micro-Frontends 25

How to Define a Bounded Context 28

Micro-Frontends Composition 29

Routing Micro-Frontends 31

Micro-Frontends Communication 33

Micro-Frontends in Practice 36

Zalando 36

HelloFresh 36

AllegroTech 36

Spotify 37

SAP 37

OpenTable 38

DAZN 38

Summary 38

4 Discovering Micro-Frontend Architectures 39

Micro-Frontend Decisions Framework Applied 39

Vertical Split 40

Horizontal Split 41

Architecture Analysis 43

Architecture and Trade-offs 44

Vertical-Split Architectures 45

Application Shell 45

Challenges 48

Implementing a Design System 55

Developer Experience 57

Search Engine Optimization 58

Performance and Micro-Frontends 59

Available Frameworks 62

Use Cases 63

Architecture Characteristics 63

Horizontal-Split Architectures 66

Client Side 67

Challenges 70

Search Engine Optimization 78

Developer Experience 78

Use Cases 80

Module Federation 81

Iframes 87

Web Components 94

Server Side 98

Edge Side 108

Summary 113

5 Micro-Frontend Technical Implementation 115

The Project 115

Module Federation 101 118

Technical Implementation 120

Project Structure 121

Application Shell 122

Authentication Micro-Frontend 128

Catalog Micro-Frontend 130

Account Management Micro-Frontend 132

Project Evolution 136

Embedding a Legacy Application 136

Developing the Checkout Experience 138

Implementing Dynamic Remotes Containers 140

Webpack Lock-in 140

Summary 141

6 Build and Deploy Micro-Frontends 143

Automation Principles 144

Keep a Feedback Loop Fast 145

Iterate Often 146

Empower Your Teams 147

Define Your Guardrails 147

Define Your Test Strategy 148

Developer Experience 148

Horizontal Versus Vertical Split 149

Frictionless Micro-Frontends Blueprints 150

Environments Strategies 151

Version Control 151

Monorepo 152

Polyrepo 155

A Possible Future for a version Control System 158

Continuous Integration Strategies 159

Testing Micro-Frontends 160

Fitness Functions 165

Micro-Frontend-Specific Operations 166

Deployment Strategies 167

Blue-Green Deployment Versus Canary Releases 167

Strangler Pattern 170

Observability 172

Summary 173

7 Automation Pipeline for Micro-Frontends: A Case Study 175

Setting the Scene 175

Version Control 177

Pipeline Initialization 178

Code-Quality Review 179

Build 180

Post-Build Review 181

Deployment 182

Automation Strategy Summary 183

Summary 184

8 Backend Patterns for Micro-Frontends 185

API Integration and Micro-Frontends 185

Working with a Service Dictionary 187

Working with an API Gateway 194

Working with the BFF Pattern 200

Using GraphQL with Micro-Frontends 205

Best Practices 210

Summary 213

9 From Monolith to Micro-Frontends: A Case Study 215

The Context 216

Technology Stack 216

Platform and Main User Flows 218

Technical Goals 220

Migration Strategy 221

Micro-Frontend Decisions Framework Applied 222

Splitting the SPA in Multiple Subdomains 225

Technology Choice 229

Implementation Details 232

Application Shell Responsibilities 233

Application Initialization 233

Communication Bridge 234

Backend Integration 236

Integrating Authentication in Micro-Frontends 236

Dependencies Management 239

Integrating a Design System 240

Sharing Components 240

Implementing Canary Releases 242

Localization 244

Summary 245

10 Introducing Micro-Frontends in Your Organization 247

Why Should We Use Micro-Frontends? 247

The Link Between Organizations and Software Architecture 248

How Do Committees Invent? 249

Features Versus Components Teams 252

Implementing Governance for Easing the Communication Flows 256

Requests for Comments 256

Architectural Decision Records 257

Techniques for Enhancing the Communication Flow 259

Working Backward 259

Community of Practice and Town Halls 260

Managing External Dependencies 261

A Decentralized Organization 263

Decentralization Implications with Micro-Frontends 265

Summary 268

Appendix. What Does the Community Think About Micro-Frontends? 269

Index 305