MicroFrontends - A new enterprise architecture

Gespeichert von felix-steidler am Mi., 02.12.2020 - 22:59

The concept of microfrontends is the result of applying the very popular backend pattern of "microservices" to the frontend world. It drives forward the idea of agile working, having small scrum teams working on different features of your whole application. Each of your team will get an end-to-end responsibility for developing new features completely independent from the whole application. Often the overall synchronization will be done by a kind of frontend orchestration framework as entrypoint for your web app. On the backend side you will use the well known microservice architecture consisting of small REST-APIs managed by a central api gateway.

On the light side of the force microfrontends will increase your development by separating your teams scope. Your application landscape has a high grade of reusable code because you can reuse your frontends in different context. You can use different frontend technologies and also can be close to the latest state of the art technologies. You will prevent your architects from designing monolithic software.

On the dark side of the force microfrontends you will increase your overall complexity of your application. Debugging / Bugfixing can get difficult and your deployment and build processes will increase in complexity. Also your infrastructure requirements will increase. On the client side you need be careful not to overload your application size. This can result in longer loading times and will lead to a bad user experience. If your using different subdomains for your frontends you need to be careful because of CORS.

Frontend Architecture

The key concept of microfrontend is integrating a number of small different frontend pieces into one overall appearance. Each of your piece can be potential made by a different technology and can be hosted separately. You need a very smooth UI-Integration to make your pieces all together look like one web-app. Often microfrontend frameworks will help you to do this. Often they will also implement a kind of orchestration-frame for your frontends and will be the root-entrypoint for your website. Of course you can also use different UI-Integration-Types to integrate your features better. Every piece of your frontend can has its own deployment process. As a best practice you should think about using a ui-styleguide or ui-theming you can provide all of your teams.

List of possible UI-Integration Types

Below some possible integration types. i personally recommend using a mix of iframe or web-component integrations.

  • http-redirect: not a very smooth ui-integration, but can be implemented very fasf
  • iframegood ui-integration, can be also implemented very fast, but difficult communication between iframes
  • html-include: good ui-integration, can be difficult to handle
  • web-components: very good ui-integration, no separate hosting required, but difficult implementation

List of possible Frameworks

On the market you will not find a large selection of microfrontend frameworks, because equivalent to microservcices this architecture is only a few years old. But below i will try you some latest, stable and popular frameworks. In future here you will also find a complete guideline for using the sap luigi framework.

screenshot_luigi

  • SAP LuigiDesigned for orchestrating SAP UI5 applications this turned to a really easy to use microfrontend framework. Currently licensed from the SAP as open source software.
  • MosaicDesigned by zalando (yes, the shopping company you thing about) it`s more like a set of tools then a complete framework. This is very interesting if you already has your own application landscape and want to introduce the microfrontend way be your own. Also a very good approve if you plan to focus yourself on web components.
  • OpenComponentsA very clean framework which will bring you a good toolset for integration also non client-side-rendering contents. The core idea of a central "frontend" repository on runtime is very interessting.
  • single-spaSmall project focusing on clean implementation and support for comment client-side frameworks such as react or angular
  • PiraA really grown up project bringing a lot of documentation and enterprise features for your next microfrontend project.
  • BitSimilar to Pira also a very grown up project bringing you a lot of client-side framework support such as react, angular or vue.

Backend Architecture  

As mentioned at the beginning mircrofrontend architecture is the logical next step after microservices. So it`s highlight recommended using a microservice backend architecture. Otherwise a lot of benefits will get lost. If you plan to migrate your overall application architecture you maybe can think about a hybrid mix of microservices surrounding your monolithic core backend. Within using microservices you should also take care about your identity management. You will need a single user entity over your application pieces. If you don`t use a identity management yet you maybe should have a look at tools like keycloakwhich brings you a really powerful open source software for your identity services.

Operation Architecture

A final part of microfrontends will be a highly automaticated infrastructure landscape. As you need to deploy and run a lot of multiple "micro" applications everything will come together with this. Fortunately nowadays this can be done by a enterprise container architecture like Kubernetes.

microfrontends overview