The idea of micro frontends at the moment is all the rage. Over the years it has gained traction, and we have found that more consumers are asking us about it. Although for a lot of use cases it is an excellent solution, it can be daunting if the standards of your company are not set properly.Here are some basics to help you determine whether the idea of the micro frontend is right for your needs.
What are micro frontends?
Micro frontends are separate vertical slices of a web application covering the frontend, backend service, and database. This helps you to break down into microservices a monolithic web application.
You can use Angular Elements, Stencil, Polymer or Nutmeg on the front end to create a Custom Element, a custom HTML element that loads your object.
The element must interact on the backend with its own HTTP API service and a different database set up for it.
You can use this concept to tie different technology stacks together as well. For example, one component could use Angular, while another uses React at the same route on the frontend. Sounds straightforward and useful, right? However, there are a few nuances that you should know when considering whether to choose micro frontends.
What is the architecture of the micro frontend?
A micro-frontend architecture sets out the solution to a micro-frontend framework's structural elements. It also defines the relationships between them, how fragments of UI are assembled and communicated to achieve the optimum developer and user experience.
Micro Frontend's idea is to think of a web application as a collection of features operated by various independent teams. Each group has a distinct business area in which they are qualified. A team is cross-functional, designing end-to-end features from the user interface to the server. Micro Frontend is one that is more comfortable and less bulky.
Divide the entire application by business domain across the entire stack in this form of architecture. It helps front-end teams to get the same level of flexibility, testability, and pace from Microservices that backend teams get.
Can there be UIs for microservices?
Sure, they can do it in a way. Micro-frontend patterns often take the approach where a fragment of the micro frontend, possibly implemented as a micro-frontend web component, is coupled with a microservice to provide its UI.
How does the Micro Frontend function?
The main Concept behind Micro Frontend is as follows –
Be Technology Independent–Without having to communicate with other teams, each team can pick and update stack. Custom elements help to conceal specifics of implementation while supplying other people with a neutral gui.
Team Code Isolate–Never share a runtime, even though teams are using the same code. Create a self-contained software. Do not depend on global or mutual state variables.
Build Group Prefixes–Using conventions for naming where isolation is not yet feasible. In order to avoid collisions and explain control, namespace Html, local storage, events and cookies.
Favor Native Browser Features over Custom APIs–Use browser events to communicate instead of building a global PubSub system. If a cross-team API needs to be built, seek to keep it as simple as possible.
What defines microservice ?
A microservice is a part of an architecture that structures applications as a set of interoperating services. If the micro-frontend model is followed by the front end, a microservice can be paired with a micro-frontend.
What is the relation between micro frontends and components of the web?
There are several ways to connect micro frontends and web components (custom elements). Web components are a popular markup-based way to describe a micro-frontend application's microapps. And the individual microapps can be designed using web components in a micro frontend framework.
Best Micro-Frontend Practices
Different Micro Frontend Implementation Practices–
The Single-SPA meta-framework for combining multiple frameworks on the same site without refreshing the page such as React, View, Angular 1, Angular 2 etc.
Multiple single-page application lives at different URLs. For shared functionality application use NPM or Bower components.
Using window to separate micro-apps from iframes. Upload the coordinating email APIs and libraries. IFrames share parent window exposed APIs.
Similar modules for a common event bus to communicate. Every module, as long as it manages incoming and outgoing events, is built using its own structure.
Based on the stack of the main app, component libraries built the various components and app parts as libraries and "needed" into the main app, making the main app a composition of various components.
As an integration layer, web components.
Will come back soon with depth knowledge of Micro Frontend, till then please go through article and share your comments below !!..