Modular refactoring
for backoffice
application using
Angular framework

Technology Reply - Financial Services has developed a POC
for the redevelopment of an application through the use of iFrame
capable of integrating pages written in Angular in a modular
and progressive way.

CONTEXT

For banking institutions, in the current era of digital transformation, the development of complex and modern web applications has become an essential objective. In this context, web development frameworks play a fundamental role in facilitating the development process, while also improving the productivity and maintainability of the code.
Among the various frameworks available, Angular is undoubtedly one of the best choices for building scalable and high-performance web applications.
The POC developed by Technology Reply Financial Service therefore aims to demonstrate the importance of using the Angular framework in the development of a complex application for private banker use.


USE CASE

The use case in question was designed to respond to the customer's needs and with the aim of re-modernizing an application used by private bankers: the latter is composed of a set of functionalities, such as execution of bank transfers, the census of new customers, the sale of banking products or the management of customer investment portfolios.

The application in question was developed with a proprietary framework that does not respond to the new performance and reliability needs, for this reason a modular porting of the old application to Angular technology was proposed to the customer, in order to achieve, gradually, the complete replacement.

SOLUTION

As mentioned, the proposed solution is that of a modular porting through the use of Iframes that contain Angular components.
In fact, using iFrames, web components capable of containing another web page within them, it will be possible to replace, with different levels of granularity (from a single component to an entire page), the various functions of the application.
The customer will thus be able to dynamically decide which components/pages to replace with Angular technology and which ones to keep with the old technology, through the use of specific configuration keys recorded in a database.
It is understood that in addition to the replacement of components, a back-end for front-end (BFF) layer has also been added in order to prepare the data obtained from web services.

ADVANTAGES

Angular, the framework designed to facilitate application testing, promotes an organized and modular structure for web applications; these peculiarities are of fundamental importance for managing the complexity of modern projects.
Additionally, Angular provides tools and libraries for running unit tests and end-to-end tests, allowing developers to find and resolve errors effectively and ensuring greater application stability.


As far as performance is concerned, Angular is the preferable framework thanks to features such as "lazy loading", state management and the possibility of performing server side rendering, all features that allow you to create fast and efficient web applications, offering a superior user experience. In particular, in the project we are concerned with, scalability becomes essential as the original application is made up of a multitude of very complex functions.
Angular thus offers an architecture and code organization that promote scalability, allowing applications to grow without problems with the addition of new features.

A further quality to underline is identified, then, in the certainty of constant progress and development and ensured by the support deriving from Google, as well as from a vast community of developers: in fact, this community provides resources, tutorials, plugins and solutions to common problems, making learning and using the framework itself easier.