In a micro frontend application, many frontend modules, specialized in single vertical business functionality, collaborate to create a whole frontend application. In this post, we explore a how-to of browser aggregation, the standard currently used in the Entando Platform.
Micro frontends are a modern architectural pattern aimed to extend the same microservice architecture benefits to the frontend applications. In a micro frontend application, many frontend modules, specialized in single vertical business functionality, collaborate to create a whole frontend application.
Currently you can split the micro frontend technologies in two categories:
The focus of this post is in browser aggregation, the standard used currently in the Entando Platform for creating a micro frontend application. We’ll try to answer the question: “How can we host on a single html page, many single page applications?”
Okay, let’s start with some definitions:
The following picture describes an in browser micro frontend application context:
In this kind of architecture a single “pure Single Page Application” is wrapped by two different shells:
So in practice, using an in browser micro frontend aggregation architecture a developer have to:
At Entando, we use two different implementations of this architecture: custom elements and single spa.
When you use custom elements, the hexagon interface becomes a custom element definition, and the script loading technology and the micro frontend aggregation framework are the browser API itself. So the module loading format can be one of those managed natively by the script tag implementation, such as UMD.
The code for loading this type of micro frontend is similar to:
The downside of this solution is the lack of flexibility. You leave the browser deciding when to load the code and when to mount the micro frontend into the DOM.
Another implementation we currently use in the Entando Platform is the single SPA integration.
In this case the script loading technology is System.js as a polyfill for using import maps, so you have to build your pure SPA as a systemjs library. Concerning the micro frontend aggregation framework abstraction format, single SPA dictates a specific interface made of three lifecycle methods. You can adapt your pure SPA using one of the prebuilt adapters.
Loading a micro fronted in an host page using single SPA:
So which is the right choice? It depends on the context. There is no silver bullet. That’s why Entando leaves the choice open. Any implementation of the described architecture is allowed.
Entando is the leading modular application platform for building enterprise web apps on Kubernetes. We help you maximize the potential of your Kubernetes stack by delivering a great developer experience that increases productivity without having to worry about Kubernetes.
Entando integrates trusted open source technologies and extends their functionality to give you a cohesive and streamlined developer experience with easy-to-use patterns. From deploying on Kubernetes to creating modular backend and frontend architectures using your current technologies, Entando helps you at every layer of the stack, enabling you to build modern, cloud-native apps.