As modern enterprise app development moves toward greater modularity, micro frontends have served to break up the frontend monolith. This has enabled enterprises to assemble teams with end-to-end control over particular business functions within the larger application. 

This kind of isolation between the different business functions allows organizations to move with greater agility and empowers them to implement innovative ideas more quickly. 

But for all the benefits that micro frontends offer, one major consideration you’ll need to make is how exactly these independent pieces of functionality will be assembled and composed into a single user experience in your app. There are a number of different options, and none of them is necessarily one-size fits all (though, as you’ll see, we have our own opinion about what works best within our organization). 

Here are three common approaches to building and delivering micro frontends, with pros and cons for each.

(1) IFrames

An iframe, which is short for inline frame, is a component of an HTML element that allows you to embed a webpage within a webpage. They also serve as a common option for composing micro frontends. Notably, Spotify utilizes iframes for their micro frontend architecture to great success.

PROS

One of the strengths of iframes is their ability to provide independence and clear isolation from one micro frontend to another. And when your micro frontends are clearly independent, you’re more likely to fully enjoy the benefits they offer. 

CONS

One of the challenges of using iframes is that they can make it difficult to integrate micro frontends with one another. They also lack flexibility, and they can be hard to route and link.

(2) Single Page Applications

Another way to compose and deliver your micro frontends is through JavaScript based integration using single page applications.

PROS

This method is highly flexible and enables your teams to utilize standard frameworks.

CONS

The downside is that it can be difficult to standardize your approach. 

Furthermore, using SPAs for micro frontends is that they run a higher risk of tight coupling, which would wind up giving you a distributed monolith rather than a micro frontend architecture, robbing you of the benefits micro frontends provide. However, it depends on how large you make your single page applications and how you integrate them in the final application. 

(3) Web Components

A third option for delivering micro frontends is by using web components, which enable you to create reusable custom elements. This is the method we use here at Entando to deliver our micro frontend applications. 

PROS

One of the great benefits is that web components are open spec and well understood. They also offer you the ability to clearly define boundaries and contract driven communication. 

CONS

The downside of web components is that this approach requires composition, so you’ll need a platform that gives you that composition, or you’ll need to build one yourself. It also requires some knowledge and some training to build. 

However, you can use standard tools and capabilities; meaning, all the modern Javascript frameworks support web components. This, with the benefits listed above, is why Entando believes this is the best approach. 

Build apps using micro frontends on Kubernetes with Entando.

When release cycles take months instead of weeks, your business is left unable to deliver modern online experiences. Development and deployment bottlenecks slow your ability to make application updates, keeping you from iterating and innovating. And outdated or clunky UX keeps you from winning customers over and retaining them.

So that’s why we created a platform to help you get your ideas to market faster.

Entando is the leading micro frontend platform for building enterprise web apps on Kubernetes. We want to change the way enterprises think about building their apps, sites, and portals in order to innovate more quickly.

With Entando, you can:

• Leverage customized blueprints using the Entando Component Generator (built on JHipster) to quickly create micro frontends and assemble them into an app.
• Reuse UI/UX components across multiple projects via the Entando Component Repository, saving money and increasing development speed. 
• Scale apps quickly and effectively with Entando’s custom Kubernetes operator, automating the deployment of high availability, self-healing applications. 
• Centrally manage user roles with Entando Identity Management (built on Keycloak).

Entando is open source with available enterprise support and services. Begin developing on the platform today, and get a quote to see how our team can help your enterprise build better apps, sites, and portals--faster.