Published in


Micro Frontends ….future of Software development

In recent years, Micro Services are gaining popularity, with many organizations using this architectural style to avoid the limitations of large, monolithic backends.

Now as days, patterns emerge for decomposing frontend monoliths into smaller, simpler chunks that can be developed, tested, and deployed.

An architectural style where independently deliverable frontend applications are composed to build target application

Micro Frontends are smaller, more cohesive, and maintainable codebases with REST API in the backend.

Evolution of Architectural Style

Implementation approach:-

  1. JavaScript code will be used to load Widget code which contains DOM(document object model) structure required for widgets UI display.
  2. JavaScript file will be kept on FAAST Server (Frontend as Service Technology). Which will internally connect Microservices for data and based on data, DOM structure will be formed and sent to the target website
  3. To make the CSS customizable namespace for CSS will be kept in DOM response. The target website can put the CSS as per their requirement

There are two ways to implement the Micro Frontends (widgets )

  1. iframes
  2. Building the whole DOM of your widget in JS and placing it on the target page

Problem with iframe approach:-

1. iframe dimensions are fixed on the iframe element on the parent page so resizing will be a problem

2. Since Widget is embedded in Iframe so customizable CSS will not be possible

3. Because of the above problem select the approach “Building the whole DOM of your widget in JS and placing it on the target page”

Steps to configure the Micro Frontend:-

1.Embed below mentioned code in your application UI code where we need to show the widget

<div id=”BankBalanceWidget”><script src=”"></script></div>

2. Whenever the application call this JavaScript then the request will be forwarded to FAAST Service. That will internally connect to Microservices return with response in DOM structure format for the widget.

3. In DOM response CSS namespace will be provided to apply customizable CSS as per client requirement.

Thank you ……




A humble place to learn Java and Programming better.

Recommended from Medium

Manage Multiple User Permissions with Yup and Formik

PostgreSQL with Nodejs

Javascript Arrays, unshift, shift, pop & push

daily nft drops

My coding journey: learning JavaScript

CI Improvements — March 2022

Mental Models of Jetpack Compose #4: Components and Hindsight

Ionic 6 + Svelte 🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sagar Somwanshi

Sagar Somwanshi

Technical Architect | Micro-services developer | Spring boot | Docker | Jenkins | Oauth2.0 | WSO2 AM | Swagger 2.0|System Design

More from Medium

Hybrid microservice pattern to build the Orchestration Layer

Microservices: The Saga Pattern

The Role Of API Gateways In A Microservice Architecture

Command query responsibility segregation(CQRS) with Event sourcing, The basics.