Serg Hospodarets
Senior Director of Engineering, speaker, Web and Cloud infrastructure enthusiast.
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
What: I want to be able to listen music
Capacity: We need few developers
Delivery: Developers onboard and deliver fast
Evolution of a typical product: 1
What: and I want to show the info about the disc etc.
Capacity: We need A TEAM
Delivery: Developers onboard and deliver fast
Evolution of a typical product: 2
What: and I want controls
Capacity: We need A TEAM/TWO
Delivery: Developers onboard and deliver RELATIVELY fast
Evolution of a typical product: 3
What: and I want authenication, search and subscription
Capacity: We need 2-3 TEAMS
Delivery: Developers onboard SLOWER and deliver relatively FAST
Evolution of a typical product: 4
What: and I want a user library, radio, iTunes and playlists
Capacity: We need 3-4 TEAMS
Delivery: Developers onboard MUCH SLOWER and deliver new features relatively SLOWER
Evolution of a typical product: 5
What: btw, did I mention the social integration and the ads?
Capacity: We need a department with quite a few teams
Delivery: Developers onboard VERY SLOW and deliver new features SLOW, as need to learn all the codebase, practices, SDLC, roadmap, test toolings, outdated solutions, refactor etc. etc.
Evolution of a typical product: 6
Pros:
- resolve specific tasks effectively
- years of experience
Cons:
- not universal
- not widely popular in the community
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.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`,
},
}),
]
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!
http://bit.ly/micro-app1
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
Microservice architecture is a strategy of breaking up an application into services that are lightweight and loosely coupled.
Micro Front-End is a similar approach for the Front-End.
Micro App is a thing, which leverages from both approaches, and is an app that is highly focused on performing just one task and doing it well.
Simple example- auth.
Sign in, sign up, forgot password- all this can be organized as a micro app, which will be a micro front-end, communicating to the auth micro service.
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
1. Micro apps can share ("inherit") the libraries from the shell-app. It's useful for performance and versioning consistency
2. You can share the authentication tokens, theming and localization settings from the shell app to the embedded micro apps (consistency and reusage)
1. Enables relative freedom of fixes and delivery
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
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
Examples: mentioned Spotify-like grown products,
huge apps like AWS Console (dev persona), or Facebook etc.
Requires a platform team managing common dependencies and shared aspects versions etc.
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.
Don't miss enabling the cors when using differen domains for micro apps/shell apps ❗️
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.
Make sure you apply error boundaries for whole micro-app, so in case of JS errors shell-app won't be affected
For modals, notifications and similar root-level services make sure you apply the messaging system between the shell app and micro-app (similar to postMessage) and that the shell-app providers are used, when micro-apps don't show page notifications etc., so they are not doubled
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
Creating Micro Front-Ends in 2021is quite easy technically speaking about UI part as Webpack 5 takes 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!
By Serg Hospodarets
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, SPA, and others switching to the common standard. 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, what about coordination of shared modules interaction, their promotion and deployment of the newer versions, how they scale, 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.
Senior Director of Engineering, speaker, Web and Cloud infrastructure enthusiast.