Part of the Orange Group

Raiffeisen Bank

Unified Frontend - A micro frontend framework for Raiffeisen Bank Croatia

Microservices architecture is now a well-known pattern pretty widely used by numerous companies across many industries. Yet, it’s not common to spot a scalable and efficient frontend application employing such a pattern, especially when it comes to an internal application, not used by a customer but by an employee. Let’s see what benefits you can get from implementing these types of solutions and what challenges you need to overcome to succeed.

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.

Main benefits

  • 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.




decoupled micro frontend applications deployed on production environment



different organization units using the system to fulfill their tasks



teams working in parallel

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.

Technologies we used

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.

single -spa


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.

Other Projects

Raiffeisen Bank International
API Management & Governance for Raiffeisen Bank International AG
Banking and Financial Services

API Management & Governance for Raiffeisen Bank International AG

RBI’s vision is to boost internal openness via APIs to enable superior customer experience, re-usability and innovation. Bluesoft together with RBI set the API governance practices, technical standards, and built API Management platform based on KONG API Gateway. BlueSoft designed APIs for key banking industry domains implemented by the Raiffeisen Bank International Group subsidiaries.
Agama API Santander Case Study
Banking and Financial Services

Agama API Santander Case Study

To implement the requirements of the Payment Service Directive 2 (PSD2) and improve access to new commercial solutions, Santander Bank Polska implemented a solution based on the Agama API framework, appropriately customized to meet the current needs of the Bank.
Raiffeisen Bank
Lending solution for consumers for Raiffeisen Bank Croatia
Banking and Financial Services

Lending solution for consumers for Raiffeisen Bank Croatia

Nowadays many banks worldwide introduce new solutions for the sake of customer experience. Digital transformation of the banking sector is prevalent and resulted from the extremely demanding pace of keeping up with the most sophisticated applications tailored to specific business needs. Lending solutions do take a great part in this race and up-to-date applications enable customers to go through a lending process and get the desired amount of money just in a few minutes. To drive my point home let’s see how it has been done in Croatia in more detail.

What Can We Do For Your Business?

Contact Us!