The History of Microfrontends

Have you ever wondered where and when The term “Microfrontend” appeared? In this article, I will go through the evolution of Microfrontends.

• 2011: “Microservices” themselves premiered at an event for software architects in 2011, where the term was used to describe a style of architecture that many attendees were experimenting with at the time. Netflix and Amazon were among the early pioneers of microservices.
• Nov 2016: After the great success of the Microservices architecture, Thought Works added to the technology radar the term “Microfrontends” for the first time in Nov 2016, as a frontend architecture similar to microservices for frontend development. This architectural design came because of the monolith microcontent with Single Page Applications that created similar challenges to the backend monolith architecture. after that, companies started to implement frameworks that could help build frontends using this new architecture. As an example, Bit that depends on Build-Time composition and Single-Spa depends on Rint-Time composition.

• Nov 2017, Thought Works recommended Single-Spa for Microfrontends implementation.

• 2019: Martin Fowler wrote his article about Microfrontends and promoted Microfrontends architecture in his article “Micro Frontends.”

• Oct 2020: By the end of 2020, Zack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5. The Module Federation Plugin changed the world of Microfrontends to a totally new level. Now, you can include a remote component to your project as you have developed it locally without depending on the build or deployment or even have a webserver to run it. This is the future of Microfonrtneds. Companies started to adopt the Module federation approach to migrate from a monolithic application to Microfrontends.

• Apr 2021: Thoughtworks started to recommend Module Federation for Microfrontends implementations

Microfrontends are still in the early stages compared to Microservices. Writers did not agree on the way to write it. I started with Micro Frontend then changed to Micro-Frontend. Finally, I have decided to use a one-word “Microfrontend” similar to “Microservice.”

If you want to learn more about Microfrontends:

• Microfrontends: What, Why, and How
• Microfrontends Step by Step Using React, Webpack5, and Module Federation.
• Microfontends from a Beginner to Expert
• https://microfrontends.info

======

References

Rany ElHousieny , PhDᴬᴮᴰ on LinkedIn: The History of Microfrontends

Micro-Frontends: What, why, and how

Microfrontends