Legacy Platform Modernization (AngularJS to TS)

Note: due to NDA I cannot show the real UI or reveal the client name

• Employer: ti&m
• Client: Swiss bank
• Role:: Frontend Engineer
• Duration: 1 year
• Technologies: Angular.js, Typescript, SASS, VirtualBox

Project Overview

One of my first projects as a software engineer and also one of the most challenging. A legacy social and financial platform used by assets managers of an important bank of Switzerland.

The application provided a social-media-like experience to its users (liking contents, sharing, messaging, notifications), while also allowing them to search across a massive list of financial products (bonds, stocks, funds), buy them, export pdf and excel reports, compare document revisions, collaborate and share contents with other users.

The UI resembled the Windows 8 Metro interface, consisting of a horizontally scrollable view with content cards that you could zoom into. The UI was written using ECMAScript 5 (Javascript) and libraries such as Angular.js (v1.x), jQuery, Bower, Grunt, Lodash, SASS and Freemarker templates.

The Problem

The project was a massive legacy codebase with no documentation, a severe lack of standardization and a significant number of vulnerabilities, obsolete tools and performance problems.

The goal was to revive it by bringing it on par with modern software engineering standards, documenting it, making it scalable, efficient and maintainable while simultaneously adding new features and fine grained access control.

The code base was in a state of severe neglect, with inconsistent formatting, lots of technical debt accumulated during the years of development, many of the tools that it was built with became obsolete and no people from the original development team were working on the project anymore.

The CI/CD pipelines were slow and required more than 300 seconds just to compile the frontend code, this was a pretty important obstacle to having a truly efficient and agile development workflow, and setting up the local development environment initially took around two weeks of extensive research and manual work.

The Solution

I joined the team as a Frontend Engineer, I was responsible for maintaining the entire UI part of the project and making the development process more efficient, standardized and well documented. During the first six months I was able to significantly improve the code quality by doing things such as:

• migrate the whole UI code from Javascript to Typescript
• identify and fix tens of bugs thanks to static type checking
• add code linters and auto-formatters to improve the code quality
• automate the setup of the local development environment with shell scripts
• optimize the CI/CD pipelines and reduce its build time from 300 seconds to less than one second (essentially making it 300x faster).
• refactor the SASS files and remove tens of obsolete stylesheets
• audit and update dependencies, fixing hundreds of known vulnerabilities
• polish and optimize the UI to make it visually consistent and load faster

Results & Conclusion

The automation, the newly written documentation and the easier setup of the development environment allowed the team to quickly onboard new frontend engineers in the project and by drastically decreasing the amount of time spent for training, saving the company hundreds of hours that were previously wasted only on setting up the development environment.

By adopting and implementing modern software engineering practices I was able to drastically improve the state of the code base, and the huge performance optimizations allowed the team in adopting a DevOps workflow with continuous integration and continuous deployments.

Software is like a house, it gets old and it requires constant maintenance to make sure that it stands the test of time. This project showed me how the lack of standards and efficient workflows can greatly impact the quality of the code and how it can dramatically slow down progress. It taught me that tech debt will eventually have to be repaid and that cutting too many corners is not good in the long term. Some good maintenance and workflow standardization solved many of this project’s issues.

---