Micro frontends are an architecture inspired by microservices proposing that web apps can be build and thought of as a composition of smaller apps, each one specialized in a certain feature and owned by a team that focuses in the feature offered.
Dubious Advantages of Micro frontends
While they can be deployed independently, this also means that all of the apps involved might have to be deployed at a certain point.
Micro frontends live in their own repo and have their own deployment process. Since components are not shared, we know that components we update in a repo are solely used for that repo and not used anywhere else, thus reducing coupling and keeping the scope under control. Deployment is faster since we only deploy one of the small micro frontends and not the entire app.
Since each one is in its own repo, you’ll have to deploy each repo. This can probably be automated, but it doesn’t reduce the impact it could have in other areas of the app down to zero. Different micro frontends that weren’t supposed to be affected could still require to be updated and deployed because of shared libraries or reliability on other micro frontends.
If the amount of software engineers is enough, this is great to have focused teams.
The micro frontend architecture offers a good way for development teams to focus in crafting a single feature and ensure a fantastic UX, with beautiful tests, and great documentation for both devs and users. Iteration is fast since the team knows the codebase inside out,
If the amount of devs is scarce, the same devs will have to take care of different micro frontends. In such case, it would be even worse for the devs to handle all the overhead in working with front ends, like independent deployments, testing interoperability, or maintaining the layer that composes the micro frontends together.
There’s a clear separation between the types of tests needed for each layer of the final app.
Since the codebase is smaller, you can achieve better test coverage and ensure that the micro frontend does what it’s supposed to be doing (and also that it doesn’t do what’s not supposed to do). Unit tests might be enough to test the codebase of each individual app.
You need to test the interoperability of one micro frontend with the others. Integration and E2E tests will be essential here and of great benefit to have a reliable and stable app.
Advantages of Micro frontend Architecture
Now, there are some features of this approach that are great advantages with no con and are easily inferred from the ones presented earlier.
Faster development and builds
Since we’ll work with a small codebase on each micro front end, the time to build it will dramatically decrease. And it’s not only during the final build. Things like hot module replacement make the every day development experience much faster, and even file indexing on IDEs will be faster.
Micro frontends combined with micro services not only propose a pattern for technical development. They also foster the creation of vertical teams composed of front end and back end developers, designers, and support staff, that create and maintain a certain feature end-to-end, from database to user interface. In this sense, they offer a path to scale an organization based around the features offered to the user.
Resources on micro frontends
Here’s a few resources to get you kickstarted with micro frontends. If you’ve some other resource, feel free to leave it the comments.
This framework allows you to use multiple frameworks (like React, Ember, Angular) in a single-page application, lazy load the different app as they’re needed, and deploy each app independently.
- The 14 chapters of this book will likely give you a good overview to start with micro frontends.
- Micro frontend with Ember and Single SPA
- Building Micro Frontends with React, Vue, and Single-spa