FrontEndMicroservices

Micro Frontends-Revolutionizing Frontend

vasu34k

Micro frontends are what we get while we carry the microservice technique to the the front cease. In other words, a micro frontend is made of components owned by different teams — that can be deployed independently. These components are assembled to create a consistent user experience.

With a micro frontend, no single team owns the UI in its entirety. Instead, every team owns a piece of the screen, page, or content. For example, one team might be responsible for the search box, while another might code suggestions based on users’ tastes.

Why microservices in the micro frontends is important?

When we are working on huge and distributed web applications, it makes sense to build a microservice-based architecture. Using this type of architecture, the monolith team gets split to separate independent teams, which helps improve scalability, code complexity, etc., as each team works on a specific feature of the application separately.

The same concept applies to the front-end architecture, and it will be part of the same individual team that builds the microservice backend. So, each team will own a unique business component and develop it end to end, starting from the user interface to the database layer.

Principles of micro-frontend:

Micro-frontends have positive standards that permit for scaling an app.

  • Domain-driven development: The whole app can be broken down based on different domains or business logic. It can be further broken down into sub-features.
  • End-to-end autonomy with a domain: A micro app can be built independently and using different stacks. The team will have complete freedom over this part, and they will hold responsibility for it.
  • Innovation without affecting other parts: Sub-apps can function independently.
  • Independent deployment: Each team can develop and deploy artifacts at their own speed.
  • Isolate failure: The rest of the app will work even if one microfeature goes down.

Advantages of micro-frontend:

The following capabilities make micro-frontend architecture more resilient:

  • Easier and quicker feature development.
  • Independent deployments.
  • Cross-functional teams.
  • Parallel development.
  • Loose coupling.
  • Clear contracts.
  • Easier to add, change, or cast off any code.
  • Easier to test.

Micro-frontend Challenges:

  • Operational overhead: Instead of managing a single frontend application, a micro-frontend application involves creating and managing separate infrastructure for all teams.
  • Consistent user experience: To maintain a consistent user experience, the child applications must use the same UI components, CSS libraries, interactions, error handling, and more. Maintaining consistency in the user experience can be difficult for child applications that are at different stages in the development lifecycle.

Frameworks to implement Micro-frontends:

Steps to put into effect Micro frontend:

  • Defining micro-frontends in your application.
  • Routing micro-frontends.
  • Composing micro-frontends.
  • Communicating with micro-frontends.

Sample Code Snippet: https://github.com/kolaparthisrini/Microfrontends

Conclusion:

A micro-frontend architecture also simplifies the process of building complex frontend applications by allowing you to manage small, independent components.

Loading

Translate »