What is microservices
Microservices is an architectural style that structures an application as a collection of loosely coupled services
Microservice principles
- Lightweight protocol between services
- Small services, one job per service
- Service independence
- Easier to understand, develop and test
- Speeds up development
- Running multiple applications on a single browser
MicroFrontend
A micro frontend is a microservice that exists within a browser.
Micro Frontends are sections of your UI, often consisting of dozens of components, that use frameworks like React, Vue, and Angular to render their components. Each micro frontend can be managed by a different team and may be implemented using its own framework. It is practical and suggested to use just one framework for all your micro frontends, although you may add additional frameworks when migrating or when experimenting.
Each micro frontend has its own git repository, its own package.json file, and its own build tool configuration. As a result, each micro frontend has an independent build process and an independent deploy / CI. This generally means that each repo has fast build times.
History of MicroFrontend
- 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 “Micro Frontends” 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, it depends on Build-Time composition.
- 2019: Martin Fowler wrote his article about Micro Frontends and promoted Micro Frontends architecture in his article “Micro Frontends.”
- 2020: By the end of 2020, Jack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5. The Module Federation Plugin changed the world of Micro Frontends 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 having a webserver to run it. This is the future of Microphones. Companies started to adopt the Module federation approach to migrate from a monolithic application to Micro Frontends.
Architecture of MicroFrontend
Why use micro frontends
The Micro-Frontends architecture was introduced to solve multiple issues with the current SPA frontend development. I experienced the growth of a website to the limit that it becomes tough to scale, modify, or even train new engineers to be part of it. With such a monolithic system, developers will be blocked on each other just to apply a small change. Here are some of the benefits of Micro-Frontends:
- Team Scalability
- Single responsibility
- Reusability
- Technology agnosticism
- Learning Curve
Advantages of Micro Frontend:-
Some of the key benefits you can get from micro frontends are:
- Better scalability;
- Faster development, as teams can work independently. This benefit, however, is applicable only if your project is big and has more than one front-end team;
- You can use multiple frameworks in your application. However, it should be done mindfully and transparently to avoid confusion. Nevertheless, you have a choice of what to use for a particular task. What’s more, a development team can choose their own technology;
- Deployment independence. The delivery of your micro frontend will not affect the entire application. The changes will affect precisely that part of the business process that it has covered;
- With micro frontends, you can upgrade, update, or even rewrite parts of the frontend more smoothly than was previously possible;
- It’s easier to ensure that the rest of the app remains stable, as it’s independent. With micro frontends, you no longer need to keep track of the whole app. A team reviews a specific micro frontend, which has been changed or expanded;
- Codebases are smaller and more manageable;
- Easier hiring of experts. With micro frontends, you look for professionals to work on a specific part of an app where a particular tech stack is used, so you do not need them to know technologies that other teams use;
- Easier testing, as you test just separate features;
Disadvantages of Micro Frontend:–
- Complex testing of the application as a whole. Now that your application dynamically loads content, it can be harder to have a complete picture of the application. Each front end can be tested in isolation, but getting a real-world user test is critical to ensure the application works for the end-user. You can utilize usual black-box end-to-end testing with tools like Selenium or Cypress, as it’s agnostic to the implementation details;
- The wide variety of standards you have to keep up with. The application is broken into smaller parts; thus, it can be challenging to keep all developers working off the same standards. Keeping everyone on the same page is essential to delivering a high-quality user experience;
- Adopting micro frontends is a good idea for your business if your project is big and has more than one front-end team. With a small team, it is not worth the struggle;
- The deployment, assembly, and configuration process for each micro frontend will be different, which requires additional effort.
Challenges to Micro-frontend Architecture
Nothing comes without a cost, not even the micro-frontend architecture. There are a few tradeoffs that you need to consider before getting started with this framework:
- Operational complexity
As the number of micro frontends increases, you need to come up with sound strategies to manage them efficiently. There will be more teams, more codebases, and more tools that’ll increase the complexity. Yes, this has started to sound like a frontend monolith, but a good roadmap and efficient strategies can easily mitigate this challenge.
- Inconsistent user experience
Since different teams will be working on the different micro frontends and might even use varying technologies, there is often the danger of serving an inconsistent user experience. And so it’s crucial that you have a centralized document or strategy for frontend development with well-established guidelines.
- Poor communication between components
Even though you put together different frontend elements, the end product always needs to look like a single seamless entity. In such a case, communication between various components becomes of paramount importance. Moreover, since the micro-frontend architecture supports a decoupled system, enabling efficient communication channels might not always come naturally.
- Larger payload
With autonomous teams working to build the different micro frontends, code duplication is highly likely. This can increase the payload, which, in turn, significantly impacts a web application’s performance. When implementing the micro-frontend architecture, you need to make careful attempts at keeping such inefficiencies at bay.
The solution: “micro frontends”
But as it turns out, a lot of other people are thinking about the same ideas. The common term is “micro frontends”.
Companies like Spotify, Klarna, Zalando, Upwork, and Allegro, and HelloFresh are using the micro frontends approach to build their web apps.
Implementing micro frontends
Here’s a few different approaches to implementing micro frontends:
- The best solution I’ve seen is the Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo that combines React, Vue, Angular 1, Angular 2, etc). See Bret Little’s explanation here.
- Multiple single-page apps that live at different URLs. The apps use NPM/Bower components for shared functionality.
- Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate. IFrames share APIs exposed by their parent window.
- Make the different modules communicate over a shared events bus (e.g. chrisdavies/eev). Each module can be built using its own framework, as long as it handles incoming and outgoing events.
- Using Varnish Cache to integrate different modules.
- Web Components as the integration layer.
- “Blackbox” React components.
Resources
- The Single-SPA framework by Canopy Tax (see mention above).
- micro-frontends.org (also on GitHub) managed by Michael Geers, with “techniques, strategies and recipes for building a modern web app with multiple independent teams”.
- Project Mosaic by Zalando, a set of libraries to support a microservice style architecture for large scale websites. See also this presentation from Zalando Tech.
- Ask Hacker News: “What do you use to build micro-front ends?”
Read more
- ThoughtWorks Technology Radar: “Micro frontends”
- “Modernizing Upwork with Micro Frontends”—?Sep Nasiri, Upwork
- “Introduction to Micro Frontends”—?Assaf Gannon
- Presentation: “Micro Frontends: Building a modern webapp with multiple teams”—?Michael Geers (JSUnconf.eu 2017 in Hamburg)
- “Microservice Grid and Micro Frontends”—?Dejan Glozic
- “The monolithic frontend in the microservices architecture”—?Ruben Oostinga, Xebia
- “Managing Frontend in the Microservices Architecture” (Monolithic vs. “Frankenstein” approach)?—?Bartosz Ga?ek, Bartosz Walacik, Pawe? Wiel?dek at Allegro
- “Including Front-End Web Components Into Microservices”—?Viktor Farcic
- “Front-end Microservices at HelloFresh”—Pepijn Senders
What is SPA?
A framework for bringing together multiple javascript micro frontends in a frontend application.
References:-
