Unified Frontend - A micro frontend framework for Raiffeisen Bank Croatia

Introducing a properly executed micro-frontend application entails challenges similar to those associated with a microservice backend application, however, a few new come to the game.

The first one is assuring a seamless user interface, so users feel like they are using a well-designed application rather than a patchwork of multiple small applications. Overlooking these factors result in low user experience and negative feedback from users. The question of how to overcome this challenge should be asked from the very beginning of the project, and the eventual solution very often embraces both technical and organizational aspects.

When it comes to authentication, a common requirement is to ensure that the user must authenticate only once. All components must share authorization context and rules both in the frontend and the backend.

Another challenge is to create an organizational and technical environment thatenables the teams to work independently of one another. In this approach, the teams are responsible for delivering all features aligned to the architecture and guidelines. A good design must be followed by ensuring that each application can be released and deployed without coordination with other teams and applications.

• Flexible and open architecture allowing quick implementation of the business solutions with the technology chosen by the team,
• Scalability of the solution and teams working on the business features without compromising user experience and code quality,
• Cost saving as micro frontend applications are easier to build and maintain with the evergrowing code repository,
• Well-defined end-to-end responsibility and ownership require less effort to manage the dependencies between various teams,
• Many various functionalities and business processes presented and working in a seamless user interface.

By proposing the “Unified Frontend”, we wanted to address all the challenges arising from the micro frontend architecture but also to offer a solution in which development and maintenance are cost-effective in the long run. Having recognized a few principal approaches that are commonly used for implementing micro frontend architecture, we decided to use one of the open-source frameworks (single-spa) employing the client-side integration technique, in which the application is delivered to user’s web browser in parts and then is integrated with the browser.

Unified Frontend is a JavaScript framework designed to build a user interface composed of multiple single-page applications. By design, it allows applications consisting of one page to use different frontend frameworks and even other versions of one framework. However, in practice, most applications are written using React, some also use Preact or Angular.

The architecture of all single-spa applications consists of two concepts:

• Applications​ – the micro frontends themselves. Each application can respond to URL routing events and must know how to bootstrap, mount, and unmount themselves from the DOM. The main difference between a traditional SPA and single-spa applications is that the latter must be able to coexist with other applications and that not everyone has their HTML page.
• Single-spa config​ – the HTML page and the JavaScript that registers applications with single-spa.

All the applications are deployable independently, giving the Bank freedom of choice when the application is promoted to the production environment, without impacting other parts of the system.

Another nice feature of the framework is the lazy loading of the code, which improves the application’s initial load speed as a specific micro frontend bundle is loaded only when it’s needed.

Introducing Unified Frontend allowed the Bank to achieve tangible benefits that microservice architecture promises in the area of the frontend application.

Thanks to the independence of the applications, the scalability of the team was obtained – over one year, the number of teams providing applications increased from 1 to 5. Time to market has also shortened due to decoupling the applications and introducing independent deployments.

Although the solution consists of multiple applications written in different frontend frameworks, the user has gained a consistent user interface. This is even more important because our users are back-office and front-office employees, usually overloaded with several applications used to carry out their tasks.

It seems that the micro frontend pattern was the missing piece of the puzzle, and it allowed the Bank to take full advantage of the use of microservice architecture introduced within the digitalization program.

Are you wondering if and how a similar solution can help your organization? Let us know, we’ll be happy to help.