A leading water technology company
Overview
Our end client is a leading water technology company committed to “solving water” by creating innovative and smart technology solutions to meet the world’s water, wastewater and energy needs.
In a world of ever-growing challenges, client’s company delivers innovative water technology solutions throughout the cycle of water.
Its technological strength across the life cycle of water is second-to-none. From collection and distribution to reuse and return to nature, our highly efficient water technologies, industrial pumps and application solutions not only use less energy and reduce life-cycle costs, but also promote sustainability.
S&F was hired to improve website performance and user experience mainly on a legacy project that was running for almost 10 years. As the website was serving marketing and e-commerce purposes the project is one of the most crucial parts of the business and basically the face of the company in the eyes of partners that are selling their products on the website and making their own marketing campaigns there.
Challenge
The challenge was to improve the front-end performance of a legacy application that accumulated a significant amount of technical debt over 10 years. We didn’t have the luxury of rewriting 10 years’ worth of code so we could hit our performance goals.
We worked closely with our client’s internal technology team, which consisted mainly of server-side engineers who were occasionally tasked to deliver on UI engineering assignments. We needed not only to address technical challenges but also to educate the internal team in order to reduce the buildup of new technical debt.
We are always happy to share our extensive UI engineering expertise with other team members that are playing a crucial role in the project’s success.
Other technical challenges consisted of dealing with complex environment setup (Windows, VPN), working through legacy code and libraries and updating them at the same time, as well as rebuilding front-end infrastructure so we can start applying modern development best practices.
Also, getting new engineers onboarded with complex legacy applications is always a challenge: you have to build trust quickly and find a way to become a single team.
Solution
Our first step was to assess the front-end code and build a plan that would allow us to both start making progress with code refactoring and keep feature releases rolling out. We reduced CSS and JS bundle size and fixed several UI defects. Then we started to build a solid ground for the transition to the new front-end architecture with a component-based approach.
In parallel, we connected to educate the engineering team in front-end best practices and new ES6 features.
Next, we rebuilt the old templates and upgraded the codebase by moving away from jQuery and Backbone and replacing them with vanilla JS. We also created an environment setup guide so both of our teams can easily onboard new members on-demand.
The third step was starting to work on PWA to improve performance through introducing caching.
All of the above was done while continuing to build/release new features, such as a partner page for Manchester City F.C. Our team for most of the project duration has been one UI engineer and one part-time producer.
Results
The front-end infrastructure rebuild resulted in much easier ways of creating layouts, managing and updating packages, and dependencies. Features delivery and website maintenance take significantly less time now. We reduced the CSS bundle by about 8 times, improved performance and the overall user experience.
Tags: SASS, CSS, jQuery, Backbone, Gulp, Webpack, Episerver, MSSQL