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

Content preview from Building Micro-Frontends

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

Throughout this book, we have discussed what micro-frontends are, how we can create a micro-frontend architecture, and what the socio-technical impact of this paradigm is. As explained in Chapter 1, many companies have implemented micro-frontends in production in many different ways.

I interviewed several industry professionals who are embracing micro-frontends in their organizations to share the breadth of uses. The following are interviews with tech leads, architects, and developers sharing their development challenges with micro-frontend projects.

Enjoy the interviews!

Nimisha Asthagiri, Chief Architect at edX

Please introduce yourself.

Nimisha Asthagiri is chief architect at edX, where she actively drives strategic initiatives to implement an intentional architecture for the next generation of large-scale online learning. Since joining edX in 2014, she spent countless hours tackling problems of distributed computing and scalability. Now, she focuses on taming a monolithic architecture, redesigning the platform for the future of learning, and aligning the edX development community on sound design principles and practices.

Nimisha is passionate about education as an avenue to inspire and improve the lives of many. edX is a global nonprofit, open source platform for education and learning.

What is your experience with micro-frontends?

Two years ago, we began replatforming our architecture so the frontend is decoupled ...

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