Navigating the Integration Maze: Blending Technologies Post-Merger for a Single, Robust Product

Author: Fatma Tanrısevdi

First challenge for front-end team; theming

In late 2022, a significant merger took place that set the tech industry. ProntoPro and Armut, both respected in their respective domains, decided to join forces. The merger was not just a fusion of two companies but a blend of cultures, technologies, and visions aiming for a unified future. It was a very long journey, and we plan to share a series of articles about the entire project, detailing how we navigated through and adjusted our course in response to the challenges we encountered, given the numerous problems we had to solve. The integration decision resulted from a critical post-merger realization. In reviewing our product portfolio, we've identified that having two distinct products serving the same industry presents a considerable challenge, particularly in terms of coherence and efficiency.  By unifying our products into a single one, we aimed to offer a cohesive solution that better meets the evolving needs of our industry, streamline our operations, enhance user satisfaction, unify teams and focus our resources more effectively.

Continuing from the realization mentioned above, we embarked on a journey filled with meticulous evaluations to determine our direction forward. We delved deep into comparing the differences between the two products, conducting thorough feature gap analyses. ProntoPro, operating across Italy, Spain, France, Germany, Switzerland, and Austria, was utilizing six different databases, one for each country. We chose Austria as our pilot migration country, focusing on minimizing risks associated and kicked off the initiative. The processes I've briefly touched upon each deserve their own article, such as how we conducted the feature gap analysis. However, I want to focus here on how the frontend team tackled the first major problem they encountered. For this test country (and later for other countries as well), we decided to keep the design as consistent as possible while retaining ProntoPro brand’s colors. I've finally reached the main topic of the article: how we made theme changes in Angular SPA projects.

Implementing Theme Changes in Angular SPA

Before the merger, Armut utilized Angular for its frontend technology. However, post-merger, a strategic decision was made to transition to the React environment. This transition was part of a parallel re-platforming project (a topic for another article:)). Given the gradual nature of this transition, we began researching how we could maintain ProntoPro’s brand colors on a country-by-country basis in our existing Angular applications. Armut hosted several Single Page Applications (SPAs) such as customer, pro onboarding, and customer pro dashboards, which were pivotal in managing all customer interactions.

Note: This project kicked off towards the end of 2022. At that time, we were using Angular version 14, and we decided not to upgrade to a newer version until the completion of the integration process. Although there may not be significant differences, it’s important to note that everything discussed here is compatible with Angular 14.

Implementing Theme Changes in Angular SPA

Let’s delve into the specifics of implementing theme changes across our Angular SPAs, all of which are housed within a monorepo. A critical aspect of our architecture is the use of shared modules stored in libraries, which also contain our common styling elements. Our past decision to use SCSS for styling these applications significantly streamlined our theming process, thanks to SCSS's ability to utilize variables. This feature was particularly advantageous because many of our styling variables, such as colors, were already defined in variable files, making our task much more manageable and easier.

The crucial step we took was to segregate the brand colors into separate SCSS documents, ensuring that the file names remained consistent across themes:

libs/assets/src/scss/themes/armut/_theme-variables.scss

libs/assets/src/scss/themes/prontopro/_theme-variables.scss

These variable files were then imported into the main component styling file of our applications. However, the import statements used only the file names, leaving us with the question: How does the application know where to find these files? 

The answer lies in a pivotal component of Angular applications, the angular.json configuration file.

By adding specific lines to the angular.json file (illustrated in an upcoming image), we directed Angular to the correct file path based on the application being built. This clever trick allowed us to dynamically switch between theme variables without altering the core logic of our applications.

If you run the task below, your app will use the theme file under prontopro folder; ng build customer-onboarding -c=tr-prod And just like that, by leveraging the power of SCSS variables and Angular's configuration capabilities, we were able to implement a flexible theming solution that could be easily adapted across different brands and countries, all while maintaining a consistent user interface. This approach not only simplified our development process but also paved the way for a more unified and cohesive product post-merger.

You might wonder how we handled the theming of icons and images. For icons, we use an internal font icon library, which makes it easier for us to adapt by simply changing the colors. This approach significantly simplified our work.

As for images, we employed a method similar to the theme folder approach. We assigned the theme as a constant based on the country ID and created a theme folder for images as well. The examples below will clarify this further.

To summarize, this integration experience provided us with an invaluable learning opportunity, not only in tackling technical challenges but also in navigating the complexities of cultural integration and striving to preserve the essence of what each company brings to the table. Every day brought new insights, observations, and the chance to learn something unique, making it a once-in-a-lifetime process. It was completed successfully through great teamwork and dedication.

As I've mentioned, we're eager to share the knowledge gained from this process and anticipate publishing many more articles. Please, stay tuned!