Integration of .js Frameworks to Micro Frontend

What is Micro Frontend

The term Micro Frontends introduced in ThoughtWorks Technology Radar in 2016. In it, the micro-services concept extends to the frontend. Micro Frontends is a composite of feature which is owned by independent teams. It is a service that divides frontend monolith into microservices. It enables

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

We can say, it is a concept of building and structuring the UI of our website using a series of independent fragments by extending the benefits of architecture to the frontend.

Micro frontends as the name suggested, are independent frontend components. The combination of all these components results in a single Web Application. Thus, Micro-Frontends split larger system vertically into separate parts. Each of the parts has its own frontend and backend services.

Before micro frontends, we have monolith architecture.

In general, monolith means composed all in one single element i.e assemble all the software components in one package. In this kind of architecture, the same code base maintains all the code(presentation, business, and data access layer).

Challenges of Monolith Architecture

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

What is Microservices

Microservices is an architectural style that helps to structure an application as a collection of services that are

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

When micro service comes into existence, companies adopt it for backend and they leave their front-end apps as monoliths. Thus, the backend is divided into small services according to the business requirement and frontend still in one app. Over time the frontend layer, often developed by the separate team, grows and gets more difficult to maintain. That’s what is called as Frontend Monolith.

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 own deployment cycle: Micro frontends allow each team to deploy their piece of code without interfering 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. These blocks include frontends and, run by independent and cross-functional teams

Each team is:

  • 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

Javascript is a lightweight, JIT compiled programming language. It is very well known as a scripting language for the Web pages.

The standard for the javascript is ECMAScript. ECMAScript release a new version on every past year.

Javascript is not a Java programming language. Both “Java” and “JavaScript” are trademarks of Oracle in the U.S. and other countries.

Frameworks of dot js

Angular.JSReact.JSVue.JSEmber.JS
DefinitionMVC
Framework
JavaScript
Framework
MVC
Framework
MVC
Framework
1st Release2009201320142011
HomePageangular.orgreactjs.netvuejs.orgemberjs.org
Contributors On GitHub1,56291262636
Data bindingTwo-WayOne-WayTwo-WayTwo-Way
Popular Websites Using TechnologyYouTube, Freelancer, SkyStoreFacebook, Instagram, FlipkartChess, Gitlabs, LaracastsApple Music, Netflix, Linkedin

As time passes, the needs of user changes and the new framework are also introduced. It becomes very difficult for a developer to upgrade the who work in the new platform. So, there come the concept Micro-Frontends.

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 = ``;
}
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 allow 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.

Implementing Micro Frontend

We can implement Micro Frontend by using approaches of Single Spa:

  • 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. You would also love to read about Micro Frontend Architecture and Best Practices.

Benefits of Micro Frontend

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 new module without interfering 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

IKEA

IKEA is currently using this technology in which the frontend is divided into the following teams:

    • 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.

How Can XenonStack Help You?

XenonStack offers DevOps Consulting and Big Data Testing Solutions for Enterprises & Startups

DevOps Consulting Services and Solutions

Big Data Testing Consulting, Services and Solutions

 



Leave a Comment

Name required.
Enter a Valid Email Address.
Comment required.(Min 30 Char)