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 10: SPA Composition

In the previous chapters, we had a glimpse of how micro frontends can be composed just using the browser without any active backend support. Most of the time, this way becomes really interesting with increased user interactivity.

Today, single-page applications (SPA) offer this tool-like kind of application that many experiences target. Combining multiple components from standard SPA frameworks such as Angular or React is described with the SPA composition pattern.

The key factor for a SPA is that routing is not done on the server, but rather in the frontend. Routing in JavaScript requires techniques such as taking the URL's hash or controlling the history API of HTML5. Then older features such as AJAX can be used ...