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.

Scroll down

Challenge

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.

Solution

20+

20+

decoupled micro frontend applications deployed on production environment

5+

5+

different organization units using the system to fulfill their tasks

5+

5+

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

React
AngularJS
Vue.js

Results

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
Microservice platform for Raiffeisen Bank Croatia
Banking and Financial Services

Microservice platform for Raiffeisen Bank Croatia

In 2018, the Croatian branch of Raiffeisen Bank began a digitization program, to better prepare the Bank to respond to changes that we observed in the financial services market and customer behavior. BlueSoft has become the Bank's key partner in this transformation by providing the StarBoost platform, which became a technological enabler for the Bank's business.
Read more
Idea Bank
Idea Cloud – cloud banking
Banking and Financial Services

Idea Cloud – cloud banking

BlueSoft has designed and implemented an innovative IT solution for Idea Bank SA. It ensures utilizing functionalities and relaying communications between IT systems constituting the first cloud banking system in Poland – “Idea Cloud”


Read more
Raiffeisen Bank
NFC HCE application Mobile Wallet
Banking and Financial Services

NFC HCE application Mobile Wallet

BlueSoft developed and deployed the Mobile Wallet app which provides mobile phone payments using NFC HCE technology.
Read more

Let's talk business

Discover What’s Possible For Your Business.

Together we can solve it.