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 11: Siteless UIs

In the previous chapter, we saw how the SPA composition pattern can be used to combine multiple SPAs into one unified application. While this pattern is attractive due to a variety of business and technical factors, we've also drilled deep enough to observe its challenges.

A pattern that directly builds on top of the SPA composition is the creation of siteless UIs. In this pattern, analogies and ideas from serverless functions are applied to frontends. In the end, we'll get runtime-driven micro frontends, which offer a lot of advantages and flexibility.

In this chapter, we'll close our tour of the different micro frontend patterns by taking a deep dive into next-generation micro frontends with the siteless UI pattern. ...