book

The Art of Micro Frontends

by Florian Rappl

June 2021

Beginner to intermediate

310 pages

6h 41m

English

Packt Publishing

Read now

Unlock full access

ForewordContributorsAbout the authorAbout the reviewer
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesCode in ActionDownload the color imagesConventions usedGet in touchShare Your Thoughts
Evolution of web applicationsProgramming the webThe social webSeparation of frontend and backendEverything becomes microFrom SOA to microservicesAdvantages of microservicesDisadvantages of microservicesMicro and frontendEmerging web standardsIsolation via Web ComponentsFrame communicationWeb workers and proxiesFaster TTMDecreasing onboarding timeMultiple teamsIsolated featuresA/B testingSummary
PerformanceResource cachingBundle sizeRequest optimizationsSecurityCentral user managementIndividual user managementScript executionKnowledge sharingReliabilityUser experienceWordingPattern librariesSummary
Central deploymentsUsing a monorepoJoining multiple repositoriesDistributed deploymentsUsing a monorepoUsing dedicated pipelinesHybrid solutionsScheduled releasesTriggering on changeSummary
Principles of DDDModulesBounded contextContext mapStrategic domain design versus tactical designSoCTechnical splitFunctional splitExample decompositionArchitectural boundariesShared capabilitiesChoosing the right level of freedomAccessing the DOMUniversality of micro frontendsSummary
Technical requirementsThe micro frontend landscapeStatic versus dynamic micro frontendsHorizontal- versus vertical-composed micro frontendsBackend- versus frontend-driven micro frontendsSummary
Technical requirementsBasics of the web approachThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesLinksCentral linking directoryLocal linking directoryIframesSecurityAccessibilityLayoutSummary

Technical requirementsBasics of server-side compositionThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesIntroducing Mosaic 9Introducing PodiumKnown usersCreating a composition layoutUnderstanding layout responsibilitiesUsing SSIUsing ESIUsing JS template stringsSetting up micro frontend projectsPodletsExamining the life cycleSummary
Technical requirementsBasics of edge-side compositionThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesSSI and ESISSIESIStitching in BFFsSummary
Technical requirementsBasics of client-side compositionThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesDiving into Web ComponentsUnderstanding Web ComponentsIsolating styles with shadow DOMComposing micro frontends dynamicallyUsing a micro frontend registryUpdating micro frontends at runtimeSummary
Technical requirementsBasics of SPA compositionThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesBuilding a core SPA shellActivating pagesSharing dependenciesIntegrating SPA micro frontendsDeclaring the lifecycleUsing cross-framework componentsExploring communication patternsExchanging eventsSharing dataExtending componentsSummary
Technical requirementsThe basics of siteless UIsThe architectureSample implementationPotential enhancementsAdvantages and disadvantagesComparing with serverlessDeveloping locallyPublishing modulesCreating a runtimeBuilding a runtime with PiralDeploying a runtime with PiralWriting modulesLooking at a pilet's life cycleImplementing framework-agnostic componentsSummary
Communicating with C-level stakeholdersManaging expectationsWriting executive summariesHandling product owners and steering committeesTeam organizationUnderstanding possible team setupsChanging team organizationsSummary
Sharing all or nothingWhat about change management?Establishing a governance modelSandboxing micro frontendsGeneral security concerns and mitigationsSummary
Always adding oneLearning to start at zeroSharing designs efficientlyCreating designs without designersSummary
Providing a minimum developer experienceSupporting development in standard IDEsImproving the scaffolding experienceEstablishing a decent developer experienceCentralizing code documentationDocumenting with videosAssisting with code analysisImproving testabilityAchieving the best developer experienceIntegrating error codesProviding an offline-first development environmentCustomizing via browser extensionsImplementing a developer portalSummary
A user-facing portal solutionProblem descriptionTeam setupSolutionImpactAn administration portal solutionProblem descriptionTeam setupSolutionImpactA healthcare management solutionProblem descriptionTeam setupSolutionImpactSummaryEpilogue
Other Books You May EnjoyPackt is searching for authors like you

Content preview from The Art of Micro Frontends

Chapter 8: Edge-Side Composition

In the previous chapter, you saw the complexity and potential gains that are involved when using server-side composition. As we've already mentioned, a slightly simpler variant of server-side composition is the edge-side composition pattern. Besides being a less complex solution, this pattern aims to bring bigger performance improvements compared to server-side composition.

While edge-side composition usually lives on edge servers such as a CDN, the enhancements of this pattern can be applied on-premises, too. In the end, the ideas behind this simplification are what matter here. If the implementation is simple enough to be deployed on a CDN, then we know it fits this pattern.

One of the most important things ...