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=”https://www.sds-banking.com/balancewidget.js?id=880911">
</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 ……