A microservice approach to front-end web development

1. Micro Frontends
a microservice approach to frontend web development
O.P. Pachoriya, Deepika Chouhan, Sanny Kumar

2. 2
Micro
Frontend
What ?
Who ?
Why ?
When
?
How ?
Demo

3. What is the need of hour ???
• Modern Web Application
• Multiple Team
• Ship features Independently
• Good Frontend
• Scaling
• Speed of Development
• Availability
• Loosely coupled & Testable Code
3

4. Micro Services
4

5. What is Micro frontend ?
• Micro frontends are distinct vertical
slices of a web application that
encompass the frontend, backend
service, and database.
• Extension of micro service architecture
to frontend
•
5

6. Who is using Micro frontend ?
6

7. Who is using Micro frontend ?
7
• Approaches taken by these companies are certainly different
• Intentions are mostly the same
• And list is growing every day

8. Growth of Micro frontend
8

9. Brief History of App development
9
Monolithic full stack app
Frontend backend
Micro services
Component libraries / framework
Micro frontend

10. Brief History of App development
10

11. Why to use Micro frontend ?
• Modular & Loosely coupled
• Faster development & Increased productivity
• Individual deployment
• Granular Scaling
• Fault Isolation
• Flexibility / Technology and framework agnostic
• Evolutionary
• Reusability
11

12. When to use Micro frontend ?
• Huge code base where different teams are contributing
• Code ownership get messy
• Deployment is delayed because of other part of the application
• You like to use different Front End frameworks
12

13. Case Studies
Walmart.com
• Problems
• Large number of Product return
Emtec Digital
• Logistics Industry
• Problems
• Complex Arch & Code
• Difficult to Scale
• Limited choice of Tech
• Difficult to update, test
and maintain
13
https://www.youtube.com/watch?v=BcpDr0CcIxA
https://www.emtec.digital/think-hub/case-
studies/micro-frontends-third-party-logistics/

14. Before Choosing Micro frontend ?
• Team Size
• How components communicate with frameworks
• More than one way to divide your web components
• Just because you could use multiple client-side libraries and frameworks
doesn’t mean you should
14

15. Any Downside Micro frontend ?
15
Payload Size
Operational
and
governance
complexity
Environmen
t differences

16. How to implement Micro Frontends ?
(Popular Ways)
16
Iframes
Routing and
Loading Apps
Web
Component
Mono Repos
Framework
Libraries
Customized
Orchestration

17. How to implement Micro Frontends ?
(iFrame)
17
This kind of approach better suits the project where all the functionality
resides on the same page without any navigation and the communication
happens through the Window object.

18. How to implement Micro Frontends ?
(Routing and Loading Apps)
18
This kind of approach better suits the project where there is navigation
or routing involved and when the app is divided into multiple apps based
on the features.

19. How to implement Micro Frontends ?
(Web Components)
19
Combination of different technologies that allow you to create reusable
components. Promotes the DRY principle.

20. How to implement Micro Frontends ?
(Mono Repos)
20
Monorepo is a software strategy where you can put multiple related projects under one repo.
We don’t have to push shared code to separate repo as a library or module and pull it for use.
Every developer has to check out the whole repo even he just needs one or two folders.

21. How to implement Micro Frontends ?
(Framework Library)
21
Each library that can be pushed as a node module into some private repository. We have a shell app to pull
that repo where ever we need with lazy loading or dynamic imports.
Communication is not a problem here since all the individual libraries end up in the same project or application.

22. How to implement Micro Frontends ?
(Customized Orchestration)
22
We define plain Javascript files to orchestrate the entire workflow of these micro-projects. All
individual projects are deployed independently. The orchestrator can load each project based
on the URL.
These global objects are available for all the projects so that you can send data among
applications.

23. Implementation & Demo
23

24. Build Time Integration of Micro Frontends
as git dependency
24

25. Build Time Integration of Micro Frontends
as packages
25

26. Run Time Integration of Micro Frontends
Methods
• Iframes
• Javascript Functions
• Web Components
26

27. Iframes
27
• Implementation is easy
• Isolation from other part of application
• Hard to communicate with rest of app.

28. Javascript Functions
• Script is loaded when page loads and
attaches a function to window
• Based on route it determines which
window function to calls
• We pass element ref to function and it
renders respective DOM there
• Communication with rest of app easy
28

29. Web Components
• Script is loaded when page loads
and they define a custom element
• Based on route it determines which
web component elements to define
• Create an instance of element and
append it to specified element
• Outcome is same, method is
different
29

30. Implementation
30

31. Implementation
31
• Container
• Micro Frontends App
• Communication across App
• Shared Content
• Autonomous Development

32. Module Federation
32
Module federation allows a JavaScript application to
dynamically run code from another bundle/build, on
both client and server.

33. Module Federation includes:
1. name
2. library
3. filename
4. exposes
5. shared
33

34. Thank You. :)
34

35. Questions ??
35