Serg Hospodarets
Engineering and technology leader, speaker, Web and Cloud infrastructure enthusiast.
Micro-FrontEnds
The good, the bad,
and the reality
Serg Hospodarets
About me
Agenda
Reasoning, challenges and typical pre-requisites
How to implement Micro Apps, what's their architecture, live cycle etc.
Learnings from the usage experience, common caveats and suggestions
First integration was a simple iFrame
with all the related cons
- "Frankentein" UX/UI, performance issues, no real integration etc.
Many years ago AWS included Cognito...
- UX/UI inherited
- Cognito solution could be developed and deployed separately from AWS console wrapper
After they worked on integrations, and create self-made micro-frontend solution
Example of solutions they created to build such an approach
- Design system and UI framework
- Common cloud solutions (auth, data integration etc.)
- Front-End platform
- DevOps Platform
...
Conway's Law: Software follows the organisational structure of people who design it.
Frameworks and solutions for micro-frontends
Pros:
- resolve specific tasks effectively
- years of experience
Cons:
- not universal
- not widely popular in the community
Any other alternative which is used across most projects and has good support and adoption?
I'll answer by asking a question- which build tool do you use for your project?
1. Webpack
2. Gulp
3. TypeScript
4. Browserify
5. Rollup
6. Parcel
7. esbuild or Snowpack
8. other
Webpack 5 module federation
How let webpack know about the microapp?
// webpack.config.js in the micro-app
plugins: [
///...
new ModuleFederationPlugin({
name: 'microapp_galleryapp',
library: { type: 'var', name: 'microapp_galleryapp' },
filename: 'remoteEntry.js',
exposes: {
'./ImageGallery': './src/components/ImageGallery/ImageGallery',
},
})
]Reference: Webpack 5 module federation doc
// webpack.config.js in the shell-app
let REACT_APP_JUTRO_MICROAPP_ORIGIN2 = 'http://localhost:3002';
if (argv.mode === 'production') {
REACT_APP_JUTRO_MICROAPP_ORIGIN2 = 'https://hospodarets.com/demos/microapp_galleryapp';
// or redefine in webpack.config.prod.js
}
///...
plugins: [
//...
new ModuleFederationPlugin({
name: 'jutroappshospodarets',
remotes: {
microapp_galleryapp: `microapp_galleryapp@${REACT_APP_JUTRO_MICROAPP_ORIGIN2}/remoteEntry.js`,
},
}),
]Now simply use the components from micro-app anywhere in your shell-app!
const ImageGallery = React.lazy(() => import('microapp_galleryapp/ImageGallery'));
<React.Suspense fallback='Loading Micro App Component'>
<ImageGallery />
</React.Suspense>1. Example is using React, but it can be any framework or pure JavaScript
2. The only condition- load federated components using dynamic ES import() function
3. This is scalable
Demo of embedded app
Micro App
http://bit.ly/micro-app1
Shell App
http://bit.ly/shell-app
Sure, it all also works locally for proper development experience,
and you can pass your params to your micro-app/component
Is there a native solution?
The ShadowRealms proposal provides a new mechanism to execute JavaScript code within the context of a new global object and set of JavaScript built-ins....
Use cases for micro-apps
Reuse of all the app or components
1. When reuse the whole app- make sure standalone it has all the surroundings needed (header etc.), but when embedded- all them are hidden
2. Storybook recently added Webpack 5 support- essentially your design system components can be shared as federated modules and changes applied on the components redeployments across the whole eco-system
Reuse of auth, theming, localization etc.
Share the authentication tokens, theming and localization settings from the shell app to the embedded micro apps
Enablement of independent codebases and deployments
1. Enables relative freedom of fixes and deployments
2. Simplifies onboarding and improves teams independence
3. Also enables gradual migration options- e.g. switching from Angular.js to Angular can be done in steps- micro app after micro-app, not in one big bang
Product portfolio/console use case
1. Micro apps enabling an easy option to create a company apps portfolio embedding micro-app in one portfolio shell-app. This requires additional coordination of shared libraries, dependencies, versions and deployments promotions
Example- Spotify
Versioning and deployments
Make sure there is a dedicated empowered teams/eng. leaders who manage the common dependencies, infrastructure and deployment rules.
Consistency of shared libraries is required to avoid build and runtime errors and bugs.
Cors
Don't miss enabling the cors when using differen domains for micro apps/shell apps ❗️
Auth/security etc.
Use micro-apps only for the pieces of the apps you control, as otherwise full access to DOM may result in security breakages.
For other pieces of similar functionality needed consider iFrames.
Limit what's shared to micro-apps, disallow passing any params except the allowed ones.
Error boundaries
Make sure you apply error boundaries for whole micro-app, so in case of JS errors shell-app won't be affected
Use a common cross-departments Design system
and UI framework
- Automated and proper sharing of auth, locale and theme
- For modals, notifications and similar root-level services use singletons in the shell app,
- Shell app should be used for notifications etc., so they are not doubled
- One design system allows avoiding "Frankenstein" UX/UI
The bad: Not everything is a micro front-end
Salesforce example- don't use micro-apps when there is no need!
Not everything is a micro front-end!!!
Typical rule- if there is something transactional, heavy logic or UI, or where there are dedicated API provided (e.g. payment flow)- only then use micro apps. In MOST other cases consider using simple reusable components
Takeaways
Creating Micro Front-Ends in 2022 is quite easy technically speaking about UI part as Webpack 5 and friends take care about the orchestration
• Make sure you apply micro-apps to the parts of your products properly- when there is organizational, or logical fit, or delivery requirement
• Coordination and strong guidance is required to setup micro-apps delivery lifecycle
• Always continue learning and innovate!
Thank you and happy coding!
Online slides: https://slides.com/shospodarets/front-end-micro-apps/
Serg Hospodarets
Micro FrontEnds
By Serg Hospodarets
Micro FrontEnds
The complexity of Front-End applications grew past years extensively. That’s the reason big monoliths started being split to separate UI and modules working with different API. After years of using custom solutions and confusion around Micro Front-Ends, we are in the new era of the native support of Module Federation in Webpack 5, and tools, such as Storybook components system, TC39 ShadowRealm etc. But this gives the tool to build apps which can work with specific microservices, and behind there are different topics- which use cases micro apps are useful for, how teams and work can be organized. In this talk, the above areas will be discussed, and together with the live demos, you’ll learn about the current state of the art.
