Architecting micro-frontends can be challenging. The right micro-frontends approach can provide many benefits for organizations. But, poorly architected can sometimes lead to many critical issues (performance, complexity, big cognitive load). In this talk, let's explore how we can keep it simple with Module Federation and enable independent release flow in modern web applications.

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

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

3. 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

4. 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

5. 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

6. 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.)

7. 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

8. 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?

9. 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

10. 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".

11. 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.

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

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

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

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

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

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

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