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.
Since they’re independent apps, this also means that they can be built using different JavaScript technologies, for example, one app could use React, another could use Ember JS, and another could use Vue. It also means that each app can have an independent deploy process.
Dubious Advantages of Micro frontends
Independent deployment
While they can be deployed independently, this also means that all of the apps involved might have to be deployed at a certain point.
Pro
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.
Con
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.
Focused teams
If the amount of software engineers is enough, this is great to have focused teams.
Pro
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,
Con
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.
Enhanced testing
There’s a clear separation between the types of tests needed for each layer of the final app.
Pro
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.
Con
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.
Different technologies
Different teams can use different technologies. So one could use vanilla JavaScript, another could use TypeScript, another could use Elm or Go. Of course this wouldn’t happen in a small team. However, it opens to door to hire people with different backgrounds and also to try new technologies in a controlled manner.
Organization scaling
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.
Frameworks
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.
Books
- The 14 chapters of this book will likely give you a good overview to start with micro frontends.
https://livebook.manning.com/book/micro-frontends-in-action/chapter-1/v-4/63
Videos
Tutorials
- Micro frontend with Ember and Single SPA
https://dev.to/rajasegar/ember-micro-frontends-with-single-spa-1p8j - Building Micro Frontends with React, Vue, and Single-spa
https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op