DEV Community

Hash
Hash

Posted on • Edited on

4 2

What is Micro-Frontends?

All we know about Microservices, which helps to develop features individually. Same way, we can do it with frontend applications. I mean, your application can be divided into various small individual applications. Aka Micro Frontends.

We can develop the main parent app which will contain the authentication and routing implemented, and we can then proceed to adding multiple child apps which work independently and can be loaded on either the same or different pages.

There are two main ways to build micro-frontends:

  • Feature Base:

    This is most commonly used division
    For example: we can divide features of the dashboard into three micro-frontends.

  • Domain base:

    Apps can be divided as per domain
    for example, we can divide the app in Core domain, payments domain, profile domain, ...

Micro-frontend frameworks:

Since each MFEs are placed in different locations, we need to have a base which will render the application. Here are few ways :

Communication

As mentioned before, the micro-frontends are completely independent of each other, but we can have them communicate with each other on certain events by using a library like an Eev event bus.

Main Advantages:

  • Team scalability: There would be isolated teams of code, and so we don't share a runtime, we don't rely on a shared state or global variables.
  • Reusability
  • Technology Agnosticism: each team should be able to choose and upgrade their stack without any coordination with other teams.

Disadvantages:

  • Complexity
  • No Standards

Refs:

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs