Many businesses are utilizing the concept of microservices, which has recently received a lot of attention, to do away with huge backends. Even though this distributed method of building the server-side of web apps is more or less consistent in terms of research and execution, going the same approach with the front end is still a barrier for many firms.
Frontend developers have begun to consider microservices as a solution to these and other problems. As a result, a brand-new architectural strategy called micro frontend was developed for creating web-based applications and creating the front-end layer of websites.
What is Micro Frontend?
Loosely connected discrete apps or services make up a microservices architecture. There are no dependencies between the development of different microservices.
They can be deployed and managed separately from one another. Micro frontends can be compared to microservices on the front end in a similar way.
A micro frontend is a collection of building blocks for contemporary web apps that may be independently created by many teams using a variety of frameworks and tech stacks.
Your application must be divided into several tiny, independent sub-applications if you use a micro frontend. A web app's micro frontend could be a different page or view. Each micro front end might be handled by a different team. Every team independently decides on the code language, platforms, and methods for their micro frontend.
Why Do We Need Micro Frontend?
Building a microservice-based design makes sense while working on large, distributed online applications. The team is divided into several independent teams using this sort of architecture, which helps to increase scalability, code complexity, etc. as each team works on a particular element of the application individually.
The front-end design follows the same principles, and it will be created by the same individual team as the microservice backend. So, starting with the user interface and ending with the database layer, each team will be responsible for creating a distinct business component.
Benefits of Micro Frontend
Here are the potential benefits of the micro frontend.
- Technology agnostic: Its architecture allows for individual team flexibility in selecting the tech stack for their microservice, which accelerates development and results in better functionality.
- Faster and isolated development and deployment: Adopting its architecture also significantly improves the development process. Similar to this architecture, the development and deployment process moves more quickly since we can have smaller, autonomous teams working on various projects.
- Individual testing and fewer regression issues: The development, testing, and deployment cycles go more smoothly and contribute to the creation of resilient applications when front-end teams are isolated.
- Maintainability: Monolithic applications will inevitably grow to be huge and difficult to maintain. It is composed of smaller components to aid in maintainability using the divide and conquer strategy. Smaller features are guaranteed to be easily tested as a result, and testing time as a whole is decreased.
- Scalability: You can scale up an application to multiple teams thanks to the modular and decoupled micro frontends architecture because adding a new frontend component or making modifications to an existing one won't have an impact on the work of the other frontends or teams. As a result, a team with diverse experiences and talents can choose the appropriate tech stack for their microservice and concentrate on its ongoing development.
Difference between Micro Frontend and Microservice
-
Microservices
The architectural strategy of using many, loosely linked, and independently deployable smaller components or services to create an application backend is known as microservices. Each service has its codebase, CI/CD pipelines, and DevOps procedures, and each service executes its processes.
Through established protocols known as APIs, such as the lightweight REST API protocol that uses synchronous request-reply patterns, communication between the services occurs. Another option is to choose asynchronous communication using software like Kafka, which offers publish/subscribe communication structures and events.
Microservices integrate with the front end using a backend for the frontend (BFF) service or an API Gateway through the network. BFF offers a customized API for each client, whereas API Gateways offer a single point of access for a collection of microservices.
-
Micro Front End Architecture
The micro frontend architecture applies the concept to the browser and is similar to microservices, where loosely linked components are managed by several teams. These web application user interfaces follow this paradigm and are made up of partially independent pieces. Additionally, teams are established around a client requirement or use case rather than talent or technology.
For instance, two independent teams in an eCommerce site will be in charge of end-to-end development, code quality, user experience, and deployment for features like payment and search. Each squad has a specific, well-defined goal. Let's use the example of the search functionality team, whose objective can be to "Assist the consumer in finding the product they are looking for.
Basic Implementation Idea of Micro Frontend
-
Runtime integration
In theory, the concept is simple: “On the page, each micro frontend is present onto the page using a <script> tag, and upon load exposes a global function as its entry-point. After deciding which micro frontend should be mounted, the container application uses the appropriate function to instruct the micro frontend when and where to render itself”.
-
Build-time integration
The alternative micro-frontend implementation technique involves setting up separate code repositories for each of the several micro-frontend codebases. This method is appealing since it can be implemented instead quickly. Organizing teams doesn't take much work, and the consistency of the UI is maintained overall.
Most notably, when performance is improved, less data is transferred to the browser generally throughout the build phase.
-
Run-time via iframes
The client-side integration method, often known as the run-time integration approach, is the last one. It adheres to the essential tenet that all necessary micro frontends are sent to the browser. Once sourced, there are several ways to decide where to place it and how to organize it.
Utilizing iframes, the first technique involves integrating small frontends. During implementation, it upholds every tenet of the micro-frontend architecture and is also very simple to install. Additionally, it makes it easier for micro frontends and the main application to be isolated from one another. However, because the micro frontend content cannot go beyond the iframe confines, this technique restricts the UX experience you can offer.
-
Server-Side Composition
In this method, the micro frontends are composed in a view and cached at CDN before being served to the client at build or runtime. The final page that is served is put together by the server after it composes the view and gathers the micro frontends. The page may be provided over CDN if it is very coachable. Several requests from various clients will come in if the page is highly tailored, so ensure sure your server can support and manage this kind of size.
The key to success is building an ecosystem that enables you to grow development and gives many teams the freedom to independently develop, deliver, and select the tech solutions they want.
