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
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
Technical benefits of architecture
Optimize for feature development
Good for medium to large sized project
Technical benefits of architecture
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
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
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
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
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.
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).
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.
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
Solutions
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.
Brands using micro frontend
It is quite popular in e-commerce sector
IKEA
Upwork
Spotify
Amazon
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.
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.
DisagreeAgree
Connect with
I allow to create an account
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.
