Front-End Micro Apps

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

Serg Hospodarets

Front-End Micro Apps

By Serg Hospodarets

Front-End Micro Apps

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.

  • 233
Loading comments...

More from Serg Hospodarets