Serg Hospodarets
Senior Director of Engineering, speaker, Web and Cloud infrastructure enthusiast.
Micro FrontEnds
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
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
Example of teams structure to build suc a product
Conway's Law: Software follows the organisational structure of people who design it.
Frameworks 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
What is a "Micro app", and how it's different from a "Micro Front-End"
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.
Discussion Point
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 all the app or components
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)
Enablement of independent codebases and deployments
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
Product portfolio 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
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.
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
Singleton providers
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
Takeaways
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!
Thank you and happy coding!
Online slides: https://slides.com/malyw/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, 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.
