News & Publications
04/25/2023
Corporate news

UI Refactoring with Angular

The community’s accepted opinion about the tech stack sustaining the systems and platforms of the financial and insurance companies is that they are quite old, heavy, deprecated, while the change culture within the companies is often missing or, when the change occurs, has to overcome stubbornness and the comfort’s inertia of the existing people working in the company.

In fact, that is not true anymore. The companies from Fintech and Insuretech understand better and better that, without the change of their technologies (and, with it, the development concepts and processes), the development and operating costs are reaching sky-high dimensions. Besides that, their business stakeholders will need to face high maintenance costs, address ever-increasing security concerns, lack of support for deprecated technologies, slow performance and harder compliance, together with poor integration opportunities.

Applying the above to “our use-case” at Coface, we began a couple of years ago the transformation and ramp-up of the technology stack supporting our applications by first devising inside the Architecture team a new Enterprise Technology Strategy that would fit company’s objectives for the upcoming years. Besides redesigning the development and deployment processes, the new direction for the development of UIs that sustain the user interaction with Coface products, was to adopt the Angular and Vue JS frameworks, depending on the complexity and purpose of each new or refactored UI.

Why Angular & Vue, and why not React or something else?

Well, along the different great benefits of these frameworks (architecture, tools, components, community etc.), our enterprise applications are a good fit for being implemented with Angular, especially due to the  financial-oriented UI interaction flows.

The transition was no quite smoothly, at first some small new UIs have been developed, together with the set-up of the repositories (Npm) and the deployment processes that had to fit the existing infrastructure. Initially, the first Angular-based UI was seen as a prototype, and we had rough times during its inception, to actually learn and develop at the same time without modifying the development effort and the delivery date by a significant shift.

We began UI development on the new technology by:

  • creating the wireframe of the new screens, transitions, user actions and responses
  • defining user categories and their roles
  • creating the mockups of the screens under the Coface’ UX design guidelines
  • getting the approval from business side for the new mockup
img1

Afterwards, there were brainstorming sessions on the UI architecture design and break down:

  • Splitting in modules for lazy loading (or not)
  • Reactive forms
  • Which component library should we use
  • ObservablevsPromise
  • RxJSetc.

The resulted UI architecture had to fit into the bigger one, the application architecture, were we have addressed the monolith concept:

  • Decomposing its Business Services into smaller parts
  • Migrating the Data Layer from older technology like Toplink to Hibernate
  • Integrating our existent SOA components
  • Creating the REST layer in order to communicate with the Business Services
  • Integrate existing microservices into different UI parts
img2

 

All good, but we also had to modify the existing deployment process, in order to separate the deployment of different parts of the applications for different servers:

img3

 

Later on, seeing the big benefits of the new technologies, together with a new set of UX rules, a community of the Angular developers inside the company has quickly increased, by providing recurrent trainings and establishing an Angular-based guild. The next step was to create custom components for reuse by different applications, and now we are aiming to design the first micro-frontends that would have full functionality on applications spread across different business domains.

 

Signed by Coface Technologies

Top
  • Romanian
  • English