Short Overview: Micro-Frontends 🧩
Marcos Silva

Marcos Silva @m4rcxs

About: Software Engineer Jr

Location:
Brazil
Joined:
Mar 2, 2023

Short Overview: Micro-Frontends 🧩

Publish Date: May 27 '24
114 16

When people talk about Micro-Frontends, the first thing that they would mention is their amazing power to scale up. They achieve this by splitting services into smaller pieces which cooperate seamlessly.

Advantages of Micro-Frontends 👍

  • Micro-Frontend supports strands where teams can realize the subsequent frontend features distinctly making iteration faster.

  • Horizontal scalability in micro frontends aims to empower organizations to expand their frontend architectures by scaling out horizontally. 📈

Disvantages of Micro-Frontends 👎

  • Micro-frontends can complicate the development, maintenance, and building of a website. However, these challenges can be mitigated by using smart designs, tools that aid in automatic deployment and testing, and ensuring clear communication between teams. 📉

  • Dependency management could be a problem if the teams don't communicate each others. But it can be resolved by estabilishing clear communication channels between teams to discuss updates! 👌

Monolithic applications often encounter challenges with effective scaling. By decomposing the frontend into micro-frontends, advanced logic structures such as lazy loading and service workers can be implemented more efficiently.

JavaScript flexibility allows teams to add a variety of frameworks and libraries, facilitating seamless integration and interoperability between microfrontends. The rich ecosystem of JavaScript tools provides developers with powerful resources to create dynamic and responsive user interfaces.❤️

Join Us!

So... do you love Javascript and want to contribute to an open-source project? What are you waiting for?😁 Head over to Webcrumbs and join a community dedicated to the JavaScript ecosystem for open-source enthusiasts!

Comments 16 total

  • Nikola Mitic
    Nikola MiticMay 28, 2024

    Hey great summarization.

    Maybe it would be worth mentioning which kind of scale micro frontends are aiming to aid for.

    Just like any other micro services MFE are not a tool to solve engineering problems but rather they are engineering solutions to organizational problems of scaling.

    This is crucial to understand for anyone attempting to implement their web using micro services ( again, of any kind)

    I have been a part of organizations which required MFE but would fail to see the benefits, worse than such I was also part of organizations which employs MFE for the sake of scaling its product offerings, which again is totally not what MFE are aiming to solve.

    MFE brings a lot of challenges, I mean a LOT. They absolutely must be justified by organizational challenges of scaling in order for organization and users to actually benefit from it.

    We should never forget MFE aim to streamline product development faster (in case where they are needed) if you as an engineer or product owner feel like you are being slowed down by the challenges MFE brings, it's a sign your organization made a mistake and you really didn't needed MFE to begin with.

    Be brave and abandon the ship.

    Right tool for the right job. I hope you don't mind me, I feel responsibility to share view after seing so many sometimes irreversible problems wrongly adopted MFE can bring.

    • Marcos Silva
      Marcos SilvaMay 29, 2024

      Good point! The way that microservices keep the other parts of the system working if a piece is compromised is a good way to escape problems like isolation and failures.

  • Moses B
    Moses BMay 28, 2024

    Microservices Architecture (Micro-Frontend included) are useful for big organisations like Netflix where you have multiple programming departments each working on a part of your system.
    The overall system can be broken into microservices with each department almost independently managing their group of microservices. Sort of like working on your own piece 🧩 of a large puzzle. It'll be overwhelming for a single or few developers to handle so many puzzle pieces without something going wrong.

    • Marcos Silva
      Marcos SilvaMay 29, 2024

      Yeah! Netflix, Amazon and others.

      The way that you can distribute your entire application into small pieces is overwhelming, however when we are talking about Micro Services its about large teams in different parts of the project working to the same purpose! In this model, communication is essential.

  • Pachi 🥑
    Pachi 🥑 May 28, 2024

    Great overview!

  • Rusandu Galhena
    Rusandu GalhenaMay 28, 2024

    Good Short Overview of Micro-Frontend

  • GP
    GPMay 28, 2024

    Our organization uses MFE, and it has helped us meet our needs. Although there are numerous ways to implement MFE, we chose to use Webpack Module Federation since it is incredibly easy to set up, requires no additional libraries, and performs flawlessly. The challenges in MFE include working together as a team to maintain the same set of libraries, sharing React.js state with other MFEs in the same application, having multiple libraries in the same application (e.g., React & Angular), and many more. With Webpack Mod Fed, we are unable to package CSS/SASS and ensure that the consuming project has all the required style sheets.

    • Marcos Silva
      Marcos SilvaMay 29, 2024

      Good luck in your project!

    • Satish Purohit
      Satish PurohitMay 30, 2024

      Great! you listed some changes which is great to be worked around for leaning phase. If possible can you please list some more it will help us to make local project and deal with these problems before going to prod.

  • bblldave
    bblldaveMay 29, 2024

    Good overview of micro frontends. I believe MFEs present some issues when it comes to collaboration and UX consistency between apps. I feel like it allows teams to live in silos because they only need to focus on a small portion of the application. You mentioned clear communication channels and I like that approach, but that requires a ton of good documentation to ensure everything stays consistent. I lean towards a mono repo structure being a more effective approach to building frontends. It fixes some of the issues with dependencies and consistency. Have you ever used a mono repo?

    • Marcos Silva
      Marcos SilvaMay 29, 2024

      If you are working on a project alone, implementing microservices could be overwhelming.

  • J Mac
    J MacMay 29, 2024

    Great summary! I'm looking forward for the next ones! Luca's book is great

    • Marcos Silva
      Marcos SilvaMay 29, 2024

      Thank you!

      Yes, everyday I learn something new while reading this book!

Add comment