Micro-frontend Architecture: Benefits and Implementation

MICRO-FRONTEND
ARCHITECTURE
Presented By
Athira Vinod Livares Technologies Pvt Ltd
Tech&Socio-Cultural Group

PRESENTATION
TITLE
Livares Technologies Pvt Ltd
CONTENTS
● Introduction
● Core ideas behind micro frontend
● Technical benefits of architecture
● Sample implementation
● Integration approaches
● Types of Micro frontend
● Challenges
● How to overcome
● Companies using this architecture
● Conclusion

PRESENTATION
TITLE
What is Micro-frontend
The micro-frontend architecture is a type of design applied to the frontend
that allows us to divide UI into smaller, individual and semi-independent
applications that work together. This frontend concept is very much
inspired by the microservices used mostly in the backend

PRESENTATION
TITLE
Core Ideas behind Micro
Frontend
● Technological independence
● Separation of teams
● Team nomenclatures: Build independent apps that are self contained
● Resilient web design: Services are independent, so if one of them
crashes, others keep functioning.
● Use native browser events: Use Browser Events for communication
● Faster development: Developers can work on multiple services in
parallel

PRESENTATION
TITLE
Technical benefits of architecture
● Optimize for feature development
● Good for medium to large sized project

PRESENTATION
TITLE
● No more frontend monolith
● Multiple frontend per team
● The source code for each individual micro frontend will by definition
be much smaller than the source code of a single monolithic
frontend

PRESENTATION
TITLE
● Continuously deployable components
● Be able to keep changing
● Can be upgraded whenever it makes sense, rather than being
forced to stop the world and upgrade everything at once

PRESENTATION
TITLE
Sample implementation
● There should be a landing page where customers can browse and search
for restaurants.
● Each restaurant needs its own page that shows its menu items, and
allows a customer to choose what they want to eat, with discounts, meal
deals, and special requests
● Customers should have a profile page where they can see their order
history, track delivery, and customise their payment options

PRESENTATION
TITLE
Integration approaches
There is a micro frontend for each page in the application, and there is a
single container application, which:
● renders common page elements such as headers and footers
● addresses cross-cutting concerns like authentication and navigation
● brings the various micro frontends together onto the page, and tells each
micro frontend when and where to render itself

PRESENTATION
TITLE
1. Server-side template composition
Code is split up into such a way that each piece represents a self-
contained domain concept that can be delivered by an independent team
but the assumption is that they each have their own deployment pipeline,
which allows us to deploy changes to one page without affecting or
thinking about any other page.

PRESENTATION
TITLE
2. Build-time integration
Publish each micro frontend as a package, and have the container
application include them all as library dependencies. Here is how
the container's package.json might look for our example app.

3. Run-time integration via iframe
iframes make it easy to build a page out of independent sub-pages. They also offer a good
degree of isolation in terms of styling and global variables not interfering with each other
4. Run-time integration via JavaScript
Each micro frontend is included onto the page using a <script> tag, and upon load exposes a
global function as its entry-point. The container application then determines which micro
frontend should be mounted, and calls the relevant function to tell a micro frontend when and
where to render itself.

5. Run-time integration web components
Web components are set of web platform APIs that allow developers to create
reusable UI components using web standards.

● Team Product decides which functionality is included and where it is positioned in the layout
● Team Checkout (blue) is now responsible for everything regarding the purchasing process - namely
the buy button and mini basket.
● Team Inspire (green) manages the product recommendations on this page. The page itself is owned
by Team Product (red).

PRESENTATION
TITLE
Different Types of Micro frontend
● Vertical micro frontend: Allows one micro-frontend per business
domain.
● Horizontal micro frontend: Allows multiple micro-frontends per
page.
● Hybrid micro frontend: Combines both vertical and horizontal.
● Shell micro frontend: Loads and initializes micro frontend as needed
● Widget micro frontend: Each widget has its own HTML,CSS, JS code,
make it easy to develop and deploy independently.

PRESENTATION
TITLE
Challenges
● Operational complexity: Team needs to manage multiple code bases,
dependencies and deployment processes.
● Coordination: To ensure individual teams are compatible with each
other
● Increase page load time
● Testing: Can be time consuming
● High initial investment

PRESENTATION
TITLE
How to overcome
● Consider using light weight protocols like REST or GraphQL to reduce
complexity and performance overhead.
● To optimize cost consider using cloud based solutions like AWS, Google cloud
or Azure
● To simplify integration challenges, standardize the technologies
● To reduce development time and overhead use DevOps practices like
continuous integration and continuous deployment.

PRESENTATION
TITLE
Companies using micro frontend
It is quite popular in e-commerce sector
● IKEA
● Upwork
● Spotify
● Amazon

PRESENTATION
TITLE
Conclusion
The micro frontend architecture is particularly favourable for large-scale web
development projects based on microservices. It enables different
components to be developed by separate, autonomous teams of
programmers. As a result, it delivers several benefits, including a faster rollout
of new features, simpler testing of individual components, and smoother
updates.

PRESENTATION
TITLE
References
● https://martinfowler.com/articles/micro-frontends.html
● https://livebook.manning.com/book/micro-frontends-in-
action/chapter-1/v-4/1
● https://apiumhub.com/tech-blog-barcelona/micro-frontend-
architecture/

OUR
CONTACT DETAILS
5th Floor, Yamuna Building
Technopark Phase III Campus
Trivandrum, Kerala, India-
695581
Our helpline is always open to receive any inquiry
or feedback.Please feel free to contact us
www.livares.com
contact@livares.com
@livaresofficial
www.facebook.com/livaresofficial
+91-471-2710003 | +91-471-
2710004
THANK
YOU

Micro-frontend Architecture: Benefits and Implementation

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Micro-frontend Architecture: Benefits and Implementation

Similaire à Micro-frontend Architecture: Benefits and Implementation (20)

Plus de Livares Technologies Pvt Ltd

Plus de Livares Technologies Pvt Ltd (20)

Dernier

Dernier (20)

Micro-frontend Architecture: Benefits and Implementation