Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Micro Frontends
Module Federation
B
E
A
M
E
R
Y
.
C
O
M

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Oleksandr
Khivrych
Senior Frontend Engineer
at Beamery
@sasha_khivrych
https://okhivrych.io/

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
What is micro-frontend?
Micro-frontend architecture is a design approach in which a front-end app is decomposed
into individual, semi-independent “micro-apps” working loosely together.
The micro-frontend concept is vaguely inspired by, and named after, microservices

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Benefits of Micro Frontend
teams are more focused on their subject
areas, clear area of responsibility.
allows teams to be more autonomous
faster builds and tests. As a new
functionality, and bug fixes
Separate parts are less to understand
than a large complex monolith.
It may be easier to isolate errors
in specific parts of the application,
while the rest of the app is running.
It may be easier to report an error in
a specific micro-app owned by a
dedicated team
INDEPENDENT DEVELOPMENT SHORTER DELIVERY CYCLE
& INCREMENTAL UPGRADES
INDEPENDENT DEPLOYMENT
REDUCED COMPLEXITY MORE GRANULAR
MONITORING/ALERTING
ISOLATING ERRORS

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
IN DEVELOPMENT, THEY ARE VERY SIMILAR
● different repositories, CI / CD, different teams ● general event loop
● shared DOM with events
● general address bar
IN RUNTIME, THEY ARE NOT AT ALL SIMILAR
Microservices vs Micro-frontends

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Risks while architecting micro frontends
Bad build and web performance
Difficult to keep track of the “shared”
components. Harder to update, test,
and deploy a component individually
Big cognitive load. Difficult to support.
Bad web performance
Hiring risk. Bad web performance.
POOR CODE SHARING METHODS OVERCOMPLICATED COMMUNICATION
BETWEEN MICRO-FRONTENDS
DIVIDED OUR MICRO-
FRONTENDS TOO FINELY
PROBLEMS WITH GLOBAL LIBRARIES MULTI-FRAMEWORKS SUPPORT
(ANGULAR, REACT, ETC.)

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
● Single React App
● Good web performance
● Independent development
● Low level of complexity
● Custom Shared Libraries
● No independent builds
● Slow build process
(we always build whole application)
● Problems with updating global
dependencies
● No independent deployment
Modern Modular Monolith in Monorepo

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Can we have super-fast monolith at runtime
with distributed, decoupled frontends for
the development and delivery?

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
● The new killer feature in Webpack 5.
● Allows you to point in modules from
another webpack assembly that is
installed on a different host
Better with Module Federation Plugin

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
With Module Federation each part would
be a separate build.
These builds are compiled as "Containers".

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
This is an overview of Module Federation.
The two aspects are shown here: exposed modules and shared modules.

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Companies using Module Federation
and many more

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
This is the way

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Federated React App

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Federated React App Demo!

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
What About
SSR?

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Federated Next.js SSR App Demo!

Private & Confidential - Do Not Share © Beamery Inc. All rights reserved
Thank you!
@sasha_khivrych
https://okhivrych.io/