book

Building Micro-Frontends

by Luca Mezzalira

November 2021

Intermediate to advanced

334 pages

10h 9m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Why I Wrote This BookWho This Book Is ForHow This Book Is OrganizedConventions Used in This BookO’Reilly Online LearningHow to Contact UsAcknowledgments
Micro-Frontend ApplicationsSingle-Page ApplicationsIsomorphic ApplicationsStatic-Page WebsitesJamstackSummary
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
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
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
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
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
Setting the SceneVersion ControlPipeline InitializationCode-Quality ReviewBuildPost-Build ReviewDeploymentAutomation Strategy SummarySummary
API Integration and Micro-FrontendsWorking with a Service DictionaryWorking with an API GatewayWorking with the BFF PatternUsing GraphQL with Micro-FrontendsBest PracticesSummary

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
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
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…

Content preview from Building Micro-Frontends

Chapter 8. Backend Patterns for Micro-Frontends

You may think that micro-frontends are a possible architecture only when you combine them with microservices because we can have end-to-end technology autonomy. Maybe you’re thinking that your monolith architecture would never support micro-frontends, or even that having a monolith on the API layer would mean mirroring the architecture on the frontend as well. However, that’s not the case. There are several nuances to take into consideration, and micro-frontends can definitely be used in combination with microservices and monolith. In this chapter, we review some possible integrations between the frontend and backend layers. In particular, we analyze how micro-frontends can work in combination with a monolith, with microservices, and even with the backend-for-frontend (BFF) pattern. Also, we will discuss the best patterns to integrate with different micro-frontends implementations, such as the vertical split, the horizontal split with a client-side composition, and the horizontal split with server-side composition. Finally, we will explore how GraphQL can be a valid solution for micro-frontends as a single entry point for our APIs.

API Integration and Micro-Frontends

Let’s start by defining the different API approaches we may have in a web application. As shown in Figure 8-1, we focus our journey on the most used and well-known patterns. This doesn’t mean micro-frontends work only with these implementations. You can devise the right ...