Microfrontends aren’t new per se – the term was coined in 2016 – but the approach is gaining momentum, with companies like Ikea, Netflix and Spotify using it.
“Today, many companies are already using microfrontends,” said Florian Rappl, solution architect at Munich-based development firm Smapiot and author of The Art of Micro Frontends. “Almost everyone in the Fortune 500 interacts with microfrontends in one way or another.”
Rappl gave virtual presentations on microfrontends and serverless frontends last week at Code PaLOUsa 2022, a regional developer conference held in Louisville, Ky. far has mainly influenced the development of the backend.
Microfrontends takes a modular approach to frontend development, which so far has mostly stuck to a monolithic approach to development, he explained.
“You often get a single frontend solution,” Rappl says. “So you have all those nice disconnections and everything in the back and in the front you have monolithic architecture.”
Restructuring of the Frontend Development Team
That frontend is usually developed by one large, very central team in one large solution. That causes problems. First, the team number itself is impractical for sprints and is usually organized by technology or skill rather than business cross-functional business needs. Second, the monolithic frontend makes releases and fixes challenging, he said.
“The downside is that deployment releases are naturally quite large. And that means if there’s only one hotfix to do, it can be pretty hard, maybe you have to put the icing on the cake, maybe you have to go to everyone and say, ‘Hey, is your position ready?’” he said. .
By moving to microfrontends, the frontend development group can be split into smaller, cross-functional teams writing modules for business opportunities, he said, rather than specialized teams organized by technology or skills. Instead of one big team of 24 developers, the cross-functional teams could be three teams of 8 developers, he emphasized.
“You can then share certain things like common capabilities, for example a library could be a pattern library and that way these modules already take some stuff out of the box, which is great because they don’t have to reinvent that wheel,” he said. “They can only focus on the business domain they want to cover, which is nice because that’s where the money ends up flowing in.”
Microfrontends can also enable developers to deploy across different frameworks, if needed, he added.
“If something wants to develop in a different context, shouldn’t it be banned? It really should be supported,” he said. “It doesn’t mean it’s encouraged. You still get the best experience as you know, just relying on one or let’s say the least amount of frontend frameworks.”
Patterns for Microfrontends
Rappl also discussed two implementation patterns for microfrontends. The first is a server-side composite that relies on a reverse proxy to render the various components of the page.
“This is the true microfrontend approach,” explains Rappl in a blog post detailing microfrontend patterns. “Why? As we’ve seen, microfrontends are supposed to run server-side. As such, the whole approach definitely works independently. If we have a dedicated server for every little frontend snippet, we can really call it microfrontend.”
At the other end of the spectrum, the composition is on the client side, eliminating the need for the reverse proxy server.
“In its simplest form, this can be implemented using elements. The communication between the different parts is via the postMessage method,” he wrote.
The boot time might be a little slower, but then this approach can be very, very fast, he said during his presentation.
“You can really have very dynamic solutions that just feel like magic, not just from the user’s perspective, but especially from the developers’ perspective,” he said.
A framework for microfrontends
Rappl uses Piral, a framework for building portal applications and microfrontend architecture. Rappl’s presentations on microfrontends and serverless frontends are available and show a short demonstration of how the tool can be used to create microfrontends.
Feature image via Shutterstock