Integration of dot js Frameworks to Micro Frontend

What is Micro Frontend?

• Front end team to have the same level of flexibility.
• Adding a new component easily.
• Allow independent testing of their codes.

Micro Frontend Architecture split the entire application by business domain across the entire stack. Click to explore about, Micro Frontend Architecture

• Inflexible
• Unreliable
• Long development time
• Long build times

What is Microservices?

• Loosely coupled
• Highly maintainable and testable
• Independently deployed
• Enables the continuous delivery of the product without waiting to change other products of complete.

Data-Driven Documents is front-end visualization library in javascript for creating interactive and dynamic web-based data visualizations. Click to explore about, D3.js Library and its Use Cases

What are the reasons to adopt Micro Frontend?

Adopting Micro Frontend is the right choice until unless we examine the complexity of our frontend ecosystem. Here are some reasons to adopt micro frontends:

• Consistent look and UX: Micro frontends allow multiple javascript frameworks in one page. Thus, it allows a consistent look and user experience.
• Huge app with huge complexity: Micro Frontend is best when we have a large application. We can divide it into multiple frontends.
• Multiple teams with its deployment cycle: Micro frontends allow each team to deploy their piece of code without interfering with other’s release cycle.
• Non-dependency on a single technology: Each team should be able to choose and upgrade its stack without having to coordinate with other teams.
• Isolation of code: Build independent apps. Don’t share code at runtime. Don’t use shared state or global variables.
• Establish team prefixes: Namespace CSS, Events, Local Storage and cookies to avoid collisions and clarify ownership.Self Contained System Microservices are divided into large blocks.

• Cross-functional Team
• They have their own data and storage space
• Build in different UI
• Each team is assigned a specific mission
• They have their own technology stack
• They can deploy their part anytime
• They are not connected and no need to synchronize

For example, a normal page is composed of following as: Fig: each page is composed of many application per page.  

Integration of dot js Framework to Micro Frontend

Frameworks of dot js

Integration of Micro Frontend

There is various work behind Micro frontend that how to implement? How we will integrate the different parts? Each application of frontend might be rendered from distinct locations and has its own API. In order to implement, we must design a template which positions all the frontends on the screen.

• Micro Frontends and Web Components: One of the approaches to implements the Micro frontend is Web components. Web components are set of web platform APIs that allow creating HTML tags to use web pages and web apps.
• Web Component is an Encapsulation: Being able to keep the markup structure, style, and behavior hidden and separate from the other code on the page. Using web components different parts do not clash, and the code kept clean. These HTML tags are new custom, reusable, and encapsulated. These can be used across any JavaScript library or frameworks that are used with HTML.
• Custom Elements: Create custom HTML tags and elements with Custom Elements. Each element has its own style and scripts. The standard is to put dash to avoid conflicts with new HTML elements. This will guard against the conflicts with other HTML tags. A custom element is not a self-closing tag. For example We can define it as:

To use the above element register the tag. For this declare a class for the custom element extending HTMLElement: class BlueBuy extends HTMLElement { constructor() { super(); this.innerHTML = `buy for 66,00 €`; } disconnectedCallback() { ... } } window.customElements.define('flag-icon', FlagIcon);

• Shadow DOM: DOM is an API between the teams. We can use DOM without the need of making the new one. The DOM specification of a particular element is tag-name, attributes, and events. It acts as the contractor public API for other teams. Shadow DOM allows us to combine JavaScript, CSS, and HTML inside a Web Component. Teams can use the components and their functionality without having known the implementation. The custom element needs more elements to implement Micro Frontends. There are two major operations as Page Composition This tells how to assemble the page that is owned by the different teams. Page Transition In this, the page is split into three parts: Team Product, Team Checkout and Team Inspire. The division of the page is developed in different frameworks. It is multiple single-page apps
• HTML Imports: HTML imports are the way that tells the DOM about the location of the Web Component. These imports are the packaging mechanism for Web Components.

A capsule is a combination of neurons whose performance vector signifies the creation of real instance parameters of a particular type of an object or it's part. Click to explore about, Capsule Networks Best Practices

How to implement Micro Frontend?

• Writing the code in a new framework without making changes to new code or rewriting the existing code in the application.
• Allow us to use multiple different frameworks in a single web page or app.
• Lazy load code is used for improved load time.
• Multiple single-page apps that LIVE AT different URLs.
• These apps can share their functionality by using NPM(Node Package Manager).
• NPM share the code with others and update the user when there are some updates.
• This provides reusability of code.
• Isolating micro-apps into IFrames using libraries.
• IFrame tags are used to share APIs exposed by their parent.
• It resolves CSS file conflicts.

One easy solution would be to have each team choose a namespace under which they will place all of their “global variables”, allowing multiple teams to put stuff in the global scope without clashing.

What are the benefits of Micro Frontend?

The benefits of Micro Frontend are described below:

• Consistent look and feel: Instead of developing the entire website, we can split it in Micro Frontends. Thus, this helps in making the UI as best as possible.
• The application can be developed independently: As the website is split into the fragments, they are developed independently. We can also add a new module without interfering with others.
• The application can be deployed independently: Each team has the feature of deploying their part on their own schedule. If any fragment needs changes, it can change its part without interrupting other parts.
• The flexibility of technology: Since each team has its own fragment, they are independent to use any framework or language.

Use Case of Micro Frontend

• • Editorial content: Build with static fine
  • Search: Combination of reacting and static files
  • Product: React and View
  • Checkout: Java
  • Wishlist: Angular

Concluding Micro Frontend

Micro frontend provides benefits of technology freedom and Independent Deployment. It also provides maintainability. There should be a deeper analysis of how the modules should be a break. So that teams can work accordingly. Micro Frontend must have a strategy to integrate the modules. Micro Frontend is very beneficial to use when we have a bunch of teams split up by business domain and each of them has their own mission. All the teams develop and deploy their frontend independently. Thus, a consistent web application will be built.

• Explore about Microservices Testing Strategies
• Read more about Deploying Java Microservices Application on Kubernetes