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
Author(s): Luca Mezzalira
Edition: 1
Publisher: O'Reilly Media
Year: 2021
Language: English
Commentary: Vector PDF
Pages: 336
City: Sebastopol, CA
Tags: Web Applications; Microservices; Automation; Back-End Development; Software Architecture; Frontend Development
Copyright
Table of Contents
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
Chapter 1. The Frontend Landscape
Micro-Frontend Applications
Single-Page Applications
Isomorphic Applications
Static-Page Websites
Jamstack
Summary
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Appendix. 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
Colophon
