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 14: Impact on UX and Screen Design

In the previous chapter, we looked at some strategies and ideas for establishing processes around the governance of your micro frontend solution. For the end user experience, these processes rarely play a direct role. Here, an appealing screen design with a beautiful user experience is much more important. Unfortunately, most UX designers are not ready for micro frontends yet – quite often because they do not even know about the properties of micro frontends.

In this chapter, you will get to know the challenges and solutions of creating user experiences and screen designs for micro frontend systems. While micro frontends are very often technically-driven, they impact the UX as much as they demand a ...