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.

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.

With our broad expertise, extensive experience, and 800 highly qualified engineers, we are your one-stop shop for all your IT needs. By choosing BlueSoft you profit from the latest technologies tailored to your business, giving your enterprise an opportunity to surpass the competition.