Building An Advanced Tech Stack For World-Class User Experience

We are constantly innovating at PubMatic and continuously evolving our products to meet customer needs. In a quest to provide best-in-class user experiences, this often means building new features on the latest stack and allowing multiple stacks to co-exist. Over time, this has resulted in a conglomeration of old and new technologies.

A large part of PubMatic’s user interface (UI) was built with AngularJS, though we also leveraged several UI tech-stacks – Angular 1, home-grown framework, and JSP, which was being used for internal pages and less frequently used pages. However, it became increasingly challenging to manage these multiple stacks.

In our commitment to provide optimum user experience in keeping up with ever-evolving customer needs, there are several reasons why we wanted to move away from multiple UI stacks:

• There was operational overhead to maintain different stacks 
• Modern design principles needed to be adopted to avoid incompatibility 
• Some frameworks had reached the end of their lifecycle 
• Difficulty in finding talent with knowledge of all frameworks 

To address these challenges, we put urgency behind our planned migration from these multiple stacks. We evaluated popular frameworks Angular and React based on the parameters below: 

1. Learning curve: What was the knowledge base of our teams and how easily could the framework be understood?  
2. Testing: Availability of testing support through unit testing tools 
3. Development Speed and Productivity: How quickly our teams could develop new code 
4. Flexibility and Freedom: Does the framework offer a sufficient level of flexibility for most projects? 

After evaluating potential solutions, we selected Angular. However, changing the tech stack was challenging, like changing the tires on a moving car: 

1. Speed: Our product owners wanted the fastest turnaround time since our platform is always evolving and there are a lot of feature requests. To make this feasible we estimated all the roadmap features with and without migration efforts. There were trade-offs based on what we could accommodate.  
2. Business Knowledge: When we picked any page for migration, we had to start with an impact analysis spike which then helped our developers understand what that page does and how we can improvise to achieve the business goals. 
3. Platform Stability: The pages in question were all stable in production. We did not want to break good stable features and therefore there were a lot of quality expectations. Unit test cases were automated using Karma and the threshold of coverage was brought up to ~100% as per the organizational standard. Certain process improvements also helped, like having functional test cases early from QA so that developers ran through those scenarios to send better quality QA drops to the QA team. 
4. User Experience: We needed to either revamp outdated pages or change the workflow to give customers a better experience and enhance usability. We decided on a strategy with immediate enhancements, alongside the migration and larger efforts planned with the in-house Scrum teams. Clear discussions and expectation–setting were important among UI developers, QA, UX and product owners. An excellent project management team and Agile collaborations made things more seamless. This helped us achieve a higher level of user experience during the stack migration.  
5. Simple Path for Future Migrations: While developing on the newer tech stack we also had to keep in mind any practices to make our path to future migrations simpler. We selected the CLI method of development for benefits such as built-in Ahead of Time compilation (AoT) support, enforcement of “best practices,“ consistency across multiple projects, reduced JavaScript fatigue, evolution with Angular, and ease of customizations. 

We also needed a solid strategy to use its benefits in line with PubMatic’s microservice architecture and required uniformity across all UI modules. For this challenge, we created a seed UI app which will be used to spawn any new UI module and a common components library. With this strategy in place, for all subsequent upgrades we can follow these simple steps:  

• Upgrade the common components library.  
• Release a version of the components library that supports a new version of Angular. 
• Test existing PubMatic Angular app by using new version of components library. 
• Upgrade seed-app according to the new version of Angular (config properties, directory structure, etc.) 
• Apply changes to all different PubMatic modules by using the pull request created above to apply specific change sets. 

Following these steps, we upgraded all our UI modules from Angular 7 to 8, 8 to 9 within a sprint — all with extensive testing thanks to 100% QA automation, making our lives simple. With this tech stack upgrade, we can offer elegant and faster user interfaces in our products for our valued customers. 

Three takeaways for any migration of this nature:  

1. When you are choosing your new tech stack, you should do your own analysis and identify a platform that works for your business needs, including risk identification and migration. The wrong choice in a technology stack may end in financial loss. Always involve domain experts in these decisions. 
2. Getting the right execution in place is the next big step. You need to have great UI engineers who can convert your plan into action. At PubMatic, we have a world-class UI team that can accomplish large projects with a high level of automation.  
3. Consistent and transparent communication across the organization is key to a successful migration.