
Implementing Micro Frontend Architecture in the Web App
Micro-frontend Architecture: A Microservice Approach to Developing Web Apps Front-end development is crucial in deciding a web app’s interactiveness. There are various elements attached to the front-end development. Micro-frontend architecture is a prominent and new-age approach to front-end development. It becomes significant when a web app is split into self-contained components. Though these components are structured separately, their assembly looks like a single complete product to the end user. The concept behind micro-frontend logic is somewhat similar to microservice. While the microservice is oriented to the server, the micro-frontend is associated with the client side. This approach is most reliant on creating a complex web-based product. Since it allows multiple developer teams to work on different software, it automatically enhances the productivity of the entire development team. Using micro frontend architecture style, programmers can efficiently develop web apps that too while achieving superior scalability. “How interactive is the web app?”. The answer to this question lies in the development process of web app development. The development phase is always dynamic and a fusion of the latest tech. Micro-frontend is one of the latest patterns in the development of web apps. This approach is focused on the benefits of microservices to the client side. The collective approach behind Micro-frontend is to structure the web app as a composition of features owned by independent teams. While being responsive to distinct missions, each team works as a cross-functional and develops its end-to-end features. The idea behind the micro front end is not new. It has a lot in common with the self-contained system concept. Microservice Architecture is a type of architecture where an application is developed as a collection of services. It provides the framework for developing, deploying & maintaining microservice architecture diagrams and services independently. Unlike Monolithic architecture, the microservices structure is composed of several independent modules. These are organized around different business domains. In this type of architecture, the modules are connected very loosely interconnected usually through APIs. Hence, they possess minimum interdependencies. Monolithic vs Microservices Architecture While structuring a web app, you can use two different architectural approaches– Monolithic & Microservices. The microservices can be classified into various components which can be collectively called Micro-frontends. Monolithic Architecture A monolith is referred to as a huge block of stone. In the early days of web development, the entire program was built in the form of one indivisible unit and hence this architecture got its name. All the components of monolithic systems rely on one another for the proper functionality of the Web UI. Hence, a slight change in the architecture or the addition of a new feature requires changing the whole architecture and hence can end up with the whole system failure. With technological advancement — software products started getting more complex. Hence handling them in a single unit was not a smart decision. To ease the entire development process, the codebase is divided into two distinct divisions– front and backend. Despite the division, this approach is still referred to as the monolithic approach. The only major difference that is clear-cut visible is we are getting two large heaps of frontend and backend codes instead of one massive programming code. This approach is very much useful in development of small applications—since it is designed with a single source codebase. Microservice Architecture In contrast to the previous approach, the microservice architecture is the combination of loosely coupled components developed by different teams. With this pattern, composing web application UI becomes fast and effective. The components of the web app UI are semi-independent fragments. Each service runs its own process and has its own codebase & DevOps practices. Communication between the services is facilitated with defined channels called APIs. Microservice gel with Frontend via API Gateway over the network or through the backend for the frontend service. API getaways provide a single point of entry for a set of microservices while the backend-to-frontend offers targeted API for individual clients. For an instance: For an eCommerce web app, payment gateway and product management needs the involvement of two independent teams is needed for end-to-end development Working of Micro Frontend Works: Core Ideas and Integration Patterns As per earlier discussion, we have already understood that teams are vertically arranged in a micro frontend architecture. This means that they are furcated into the domain expertise and have end-to-end responsibility for certain features. It can encompass up to two microservice on the backend and its view as a micro frontend. A micro frontend can be a complete page or individual fragments of the page. For a heavy website, it’s easy to split up the page components and assign each component to an individual team. Few elements like headers, footers, and recommendations often appear on multiple pages. Hence, teams can develop fragments that other teams can also add to their pages. The micro front end can be deployed independently as individual projects. This can be achieved by assembling both pages and fragments into a single interface. The assembly is done through many techniques – routing, composition, and communication. Routing Routing works for page-level integration. It is used when you need a service from a page owned by one team to the page owned by another team. Each micro frontend is considered a single-page web app. This can be approached by using HTML Links. When you click a hyperlink, the browser fetches the target markup from the designated server and replaces the page with the requested one. For rendering a page without reloading, opting for a shared application shell or meta-framework gets the job done. Application Shell is the minimal HTML, CSS & Javascript that structures and powers the web app UI. You can get the static rendered page even if the content data request from the server is still pending. Meta Frameworks: It combines different pages, no matter what library or framework is used, into one whole frame. It also supports APIS to communicate between individual applications. Composition Getting the fragments into the right slot within the