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',
        },
    })
]
// 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!

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.

  • 3,363