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…

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