Micro Frontends: Liferay Portlets approach. Part 1

What are the micro frontends?

During last years, more and more companies are using micro services architecture to avoid limitations of large monolithic backends. While a lot can be found about this topic, in frontend side we are facing problems generated from monolithic frontend codebases. In order to avoid these problems, a lot of companies are starting to use micro frontends architecture.

Imagine the case that you want to use different technologies in the same web application, or you want to scale your development so that multiple teams can work on a single product simultaneously, but the coupling and complexity in the existing monolith means that everyone is stepping on each other’s tasks. These type of problems can be solved using Micro frontends approach.

Instead of develop a unique frontend application, we are going to create simpler apps that can be developed, tested and deployed independently. From customers perspective it is still a single product but this product can contain multiple technologies, and different updates could not affect any other parts of our application.

Advantages

– Incremental Upgrades

If our application has been created with different micro frontends, when it is necessary to update it because there is a major breaking change, each part can be upgraded whenever it makes sense. We are not forced to stop everything and upgrade everything at once. Also any problem generated from this upgrade is going to be completely isolated from other parts of our app.

– Simple, decoupled codebases

Each individual micro frontend is going to contain a smaller source code. It is going to facilitate developers to work with different parts of the application. Also we could avoid coupling between different parts that should not depend from other.

– Independent deployment

Every part should have its own continuous delivery pipeline, which builds, tests and deploys this specific micro frontend. This way only stable micro frontends are going to be deployed and a failure in a specific part is not going to stop the deployment of the whole application.

pipelines in micro frontends

– Autonomous Teams

Every team can work in completely different parts of the application, avoiding integration problems between different teams and possible technical issues.

teams in micro frontends

Disadvantages

– Payload size

If every JavaScript applications has to be built independently, this could cause duplication of common dependencies, increasing the number of bytes that the browser has to download.

– Environment differences

Even if every application can be executed individually, we have to take in account the final environment where it is going to be deployed, specially when we are using a specific type of container. These container could force us to develop some parts of our micro frontend in a specific way.

– Operational and governance complexity.

To develop every micro frontend we will need more repositories, more tools, more pipelines, etc. Also in some cases, we will have multiple teams, so it is important to decide the technical and organisational maturity required to adopt such an approach without creating chaos.

Why Liferay?

Inside our project we are going to use Liferay as container of our multiple micro frontends, but why?

– Ready to user with easy customization

Liferay portal provides covers multiple aspects that our web application needs (role management, email integration, OpenID integration,etc.). Developers can customize the portal or create new features with the plug-in mechanism and portlets applications.

– Ease of Use

Liferay portal interface is intuitive and easy to use. The layout of the different pages, look and feel or theme can be modified using the interface provided.

– Hook and Plug-in Extensions

It is possible to customize a product rewriting the code from scratch, rewriting the behaviour using new plug-ins or hooks. Hooks may be used in place of extension plug-ins for performing custom actions on user login or portal start up or for modifying the properties of the portal.

– Modularity

As we describe at the beginning of this article, Liferay allows us to deploy different parts of our application without affect others. This ensure that the portal is going to be always available independently of any upgrade that could cause an issue.

-Developer-Friendly

Liferay can run with multiple databases, operative systems and servers. Liferay has a very active community, where you can post your questions or problems

In our next article, we are going to describe an example of how an Angular portlet application can be created an integrated inside a Liferay Portal. Also we will describe in details the testing approach used for a micro frontend architecture.

Pablo Nuño

Author: Pablo Nuño

Fexco Senior Software Engineer

One Reply to “Micro Frontends: Liferay Portlets approach. Part 1”

  1. Nice article Pablo! I’m looking forward to see how this approach to implementing our front end applications evolves.

    Terry

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.