How micro frontends can make or break app development

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

Introduction to Single SPA framework

https://single-spa.js.org/

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

Videos

Micro frontends using Single SPA

Tutorials

Experiences

Leave a Reply