Microfrontends are not new necessarily new — the term was coined in 2016 — but the approach is gaining traction, with companies like Ikea, Netflix, and Spotify adopting it.

“These days, a lot of companies are already using microfrontends,” said Florian Rappl, a solution architect with the Munich-based development firm, Smapiot and author of The Art of Micro Frontends. “Almost everyone in the Fortune 500 is touching microfrontends, in one way or the other.”

Rappl conducted virtual presentations on microfrontends and serverless frontends during last week’s Code PaLOUsa 2022, a regional conference for developers held in Louisville, Ky. He sees microfrontends as the next evolution in web development, coming on the heels of the trend toward microservices, which thus far has primarily impacted backend development.

Microfrontends takes a modular approach to frontend development, which thus far has stuck primarily with a monolithic approach to development, he explained.

“Quite often, you end up with a single frontend solution,” Rappl said. “So you have all these nice decoupling and everything on the backend and on the front end, you have a monolithic architecture.”

Restructuring the Frontend Development Team

That frontend typically is developed by one large, very central team in one large solution. That creates problems. First, the team number itself is unwieldy for sprints and is organized typically by technology or skill rather than business cross-functional business need. Second, the monolithic frontend makes releases and fixes challenging, he said.

“The downside is that deployment releases are so of course, quite large. And that means if there’s just a single hotfix to be done, it can be quite difficult, you might need to cherry-pick, you might need to go to everyone and say, ‘Hey, is your feature ready?’” he said.

By shifting to microfrontends, the frontend development group can be broken down into smaller, cross-functional teams that write modules for business capabilities, 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 pointed out.

“You can then share certain things like common capabilities, a library might be, for instance, a pattern library and that way, these modules already get some things out of the box, which is awesome, because they don’t need to reinvent that wheel,” he said. “They can only focus on the on the business domain that they want to cover, which is great, because at the end of the day, that’s where the money flows in.”

Microfrontends can also allow developers to deploy in different frameworks, if it’s needed, he added.

“If something wants to develop in a different framework, it shouldn’t be forbidden, right? It should be actually supported,” he said. “It doesn’t mean that it’s encouraged. You still get the best experience by you know, just relying on one or let’s say, the least amount of frontend frameworks.”

Patterns for Microfrontends

Rappl also discussed two of implementation patterns for microfrontends. The first is a server-side composition that relies on a reverse proxy to serve up the different components of the page.

“This is the true microfrontend approach,” Rappl explained in a blog post detailing microfrontend patterns. “Why? As we have seen, microfrontends have been supposed to be run server-side. As such the whole approach works independently for sure. When we have a dedicated server for each small frontend snippet we may really call this microfrontend.”

On the other end of the spectrum is client-side composition, which eliminates the need for the reverse proxy server.

“In the simplest form, this can be implemented with the use of <iframe> elements. Communication between the different parts is done via the postMessage method,” he wrote.

Startup time might be a little bit slower, but it can then this approach can be really, really fast, he said during his presentation. 

 “You can really have very dynamic solutions that just feel like magic, from not only a user perspective, but especially also 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 brief demonstration of how the tool can be used to create microfrontends. 

Feature Image via Shutterstock