book

Building Micro-Frontends

Name: Building Micro-Frontends
Author: Luca Mezzalira
ISBN: 9781492082996

by Luca Mezzalira

November 2021

Intermediate to advanced

334 pages

10h 9m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Foreword
Preface
Why I Wrote This BookWho This Book Is ForHow This Book Is OrganizedConventions Used in This BookO’Reilly Online LearningHow to Contact UsAcknowledgments
1. The Frontend Landscape
Micro-Frontend ApplicationsSingle-Page ApplicationsIsomorphic ApplicationsStatic-Page WebsitesJamstackSummary
2. Micro-Frontend Principles
Monolith to MicroservicesMoving to MicroservicesIntroducing Micro-FrontendsMicroservices PrinciplesModeled Around Business DomainsCulture of AutomationHide Implementation DetailsDecentralize GovernanceDeploy IndependentlyIsolate FailureHighly ObservableApplying Principles to Micro-FrontendsModeled Around Business DomainsCulture of AutomationHide Implementation DetailsDecentralize GovernanceDeploy IndependentlyIsolate FailureHighly ObservableMicro-Frontends Are Not a Silver BulletSummary
3. Micro-Frontend Architectures and Challenges
Micro-Frontends Decisions FrameworkDefine Micro-FrontendsDomain-Driven Design with Micro-FrontendsHow to Define a Bounded ContextMicro-Frontends CompositionRouting Micro-FrontendsMicro-Frontends CommunicationMicro-Frontends in PracticeZalandoHelloFreshAllegroTechSpotifySAPOpenTableDAZNSummary
4. Discovering Micro-Frontend Architectures
Micro-Frontend Decisions Framework AppliedVertical SplitHorizontal SplitArchitecture AnalysisArchitecture and Trade-offsVertical-Split ArchitecturesApplication ShellChallengesImplementing a Design SystemDeveloper ExperienceSearch Engine OptimizationPerformance and Micro-FrontendsAvailable FrameworksUse CasesArchitecture CharacteristicsHorizontal-Split ArchitecturesClient SideChallengesSearch Engine OptimizationDeveloper ExperienceUse CasesModule FederationIframesWeb ComponentsServer SideEdge SideSummary
5. Micro-Frontend Technical Implementation
The ProjectModule Federation 101Technical ImplementationProject StructureApplication ShellAuthentication Micro-FrontendCatalog Micro-FrontendAccount Management Micro-FrontendProject EvolutionEmbedding a Legacy ApplicationDeveloping the Checkout ExperienceImplementing Dynamic Remotes ContainersWebpack Lock-inSummary
6. Build and Deploy Micro-Frontends
Automation PrinciplesKeep a Feedback Loop FastIterate OftenEmpower Your TeamsDefine Your GuardrailsDefine Your Test StrategyDeveloper ExperienceHorizontal Versus Vertical SplitFrictionless Micro-Frontends BlueprintsEnvironments StrategiesVersion ControlMonorepoPolyrepoA Possible Future for a Version Control SystemContinuous Integration StrategiesTesting Micro-FrontendsFitness FunctionsMicro-Frontend-Specific OperationsDeployment StrategiesBlue-Green Deployment Versus Canary ReleasesStrangler PatternObservabilitySummary
7. Automation Pipeline for Micro-Frontends: A Case Study
Setting the SceneVersion ControlPipeline InitializationCode-Quality ReviewBuildPost-Build ReviewDeploymentAutomation Strategy SummarySummary
8. Backend Patterns for Micro-Frontends
API Integration and Micro-FrontendsWorking with a Service DictionaryWorking with an API GatewayWorking with the BFF PatternUsing GraphQL with Micro-FrontendsBest PracticesSummary

9. From Monolith to Micro-Frontends: A Case Study
The ContextTechnology StackPlatform and Main User FlowsTechnical GoalsMigration StrategyMicro-Frontend Decisions Framework AppliedSplitting the SPA in Multiple SubdomainsTechnology ChoiceImplementation DetailsApplication Shell ResponsibilitiesApplication InitializationCommunication BridgeBackend IntegrationIntegrating Authentication in Micro-FrontendsDependencies ManagementIntegrating a Design SystemSharing ComponentsImplementing Canary ReleasesLocalizationSummary
10. Introducing Micro-Frontends in Your Organization
Why Should We Use Micro-Frontends?The Link Between Organizations and Software ArchitectureHow Do Committees Invent?Features Versus Components TeamsImplementing Governance for Easing the Communication FlowsRequests for CommentsArchitectural Decision RecordsTechniques for Enhancing the Communication FlowWorking BackwardCommunity of Practice and Town HallsManaging External DependenciesA Decentralized OrganizationDecentralization Implications with Micro-FrontendsSummary
A. What Does the Community Think About Micro-Frontends?
Nimisha Asthagiri, Chief Architect at edXPlease 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 WizelinePlease 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 ArchitectPlease 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 ConsultantPlease 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 LululemonPlease 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 EngineerPlease 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 SolutionsPlease 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 SAPPlease 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

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781492082989Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills