Accelerating the delivery of new digital initiatives with confidence
This US bank was looking to implement a large and complex UI platform that would be used to monitor and perform actions on payments as they flowed through the bank’s systems.
Getting the architecture right at the start of a project was essential. It would save a lot of pain for both the bank as well as future developers who would inherit that work.
Apexon was engaged to implement a custom solution that simplified the maintenance and use of the system with a streamlined architecture and more intuitive UI.
Founded in 1869, the firm is headquartered in New York and maintains offices in all major financial centres around the world
2nd on the list of investment banks in the world by revenue
Ranked 59th on the Fortune 500 list of the largest United States corporations by total revenue
Accelerating the delivery of new digital initiatives with confidence
Creating the infrastructure and foundation to scale digital initiatives
Leveraging data and analytics to continuously improve digital delivery processes
Enable digital adoption in a quick, and agile manner
Build digital infrastructure and foundation for enterprises to scale
Apexon helped implement a custom solution that simplified the maintenance and use of the system with a streamlined architecture and more intuitive UI.
Leverage data engineering to make strategic decisions and get digital right every time
End-users had to navigate an excessive amount of legacy UI tools that didn’t offer a consistent look and feel. To fix this, the bank needed a new architecture to support the system. It would save a lot of trouble for both the bank as well as future developers who would inherit that work.
The bank’s developers did not want a software application where the user interface and data access code were merged into a single program from a single platform. That would require separate teams coordinating unnecessarily. It also wanted to avoid creating a large codebase that would quickly become difficult to understand and maintain as it grew.
With this in mind, Apexon worked with the bank to define three core requirements for the solution:
User-friendly Enable quick and easy navigation via one consistent (web-based) app
Dev-friendly Separate release cycles for functionally discrete parts of the app
Robust Functionally discrete parts of the app must be available to end-users if other parts, or the platform as a whole, go down
These same requirements applied to the complex frontend app that would need to be built as well.
Apexon was engaged to implement a custom solution that simplified the maintenance and use of the system with a streamlined architecture and more intuitive UI.
The solution incorporated several key elements:
Micro Frontend This design approach is highly recommended for legacy systems that are becoming difficult to maintain. Each element of the UI (a micro frontend) is served as a separate component. Those components are then bundled together in one overall UI (a shell/wrapper).
Web Components Each micro frontend is defined as an HTML custom element making it easy to embed any Angular or React component into the shell. These web components easily communicate with other components and the shell and support browser navigation (in the way other single-page application routing works). They also support deep-linking and URL sharing.
iFrames iFrames provide a backup to web components and allowed the embedding of a standard HTML document (the micro frontend) inside another HTML document (the shell).
Apexon’s solution approach provided the bank with several key advantages:
Protection against software regressions The insulated nature of the micro frontend pattern means as new components are added existing components are protected against software regressions.
Accelerated software update cycles The micro frontend approach enables Web components to be updated separately. This allows for a breakdown of large changes, such as major upgrades to framework versions, into smaller tasks.
Centralized UI data The web component approach, along with iFrames, allows firm-wide components to be embedded into a newly designed “one stop shop” UI. Apexon was able to provide one consistent UI without compromising on code maintainability and the product’s resiliency.