Building a hoverboard — an evolutionary migration from Angular to React

Earlier this year we migrated our legacy client app to our new global frontend framework. This framework was previously codenamed “Future Stack” because it was the technology stack for the future. Given that the future is now, we internally rebranded this framework Flux. This pays homage to the Flux Capacitor that makes time travel possible in the Back to the Future films.

In order to understand why this migration took place and the challenges along the way, we need to go back in time. So get your Flux Capacitor fluxing and climb into the DeLorean as we hit the accelerator to take it to 88 miles per hour.

ClearScore launches on Angular

We are now back in January 2015 where a younger Justin (our CEO), Frank (Head of Design) and myself all sat in a small office in Hammersmith with the daunting task of building the first free credit scoring platform in the UK. Justin and Frank immediately went to work on the initial concepts and their passionate debates on donuts and creation of a Zen Garden became of the stuff of legends.

What was clear from the onset was this was going to be no normal financial product. The designs were bold and ambitious. It was going to look graphically beautiful, with seamless transitions and smooth blurring effects that would create a calm experience for users. For this we needed a rich single page application and the only realistic way of efficiently delivering this was using a proven JavaScript framework. To quickly hire experienced developers, a restriction was set that this framework had to have been in market for at least 2 years.

Below were the contenders at that time and the decision matrix from which we chose Angular over two other rivals: Backbone.js and Ember. Soon afterwards we hired seasoned frontend developer veterans in the form of Antony and Neil who coded the first version of the ClearScore client app that we successfully launched on the 15th of July 2015.

The Rise of React

Fast forward a year and ClearScore now had 2.2 million users on the site which beat even our most optimistic projections. They loved the look and feel of ClearScore. This contributed to us winning the Startup and Innovation of the Year at the Fintech Innovation Awards and the IT Team of the Year at the FS Tech Awards.

There were still numerous challenges to overcome. It was no secret that Google were working on the next version of Angular. The announcement that Angular 2 moved into Beta came in December 2015, but disappointingly it would not be backwards compatible. This meant that updating from 1.x to 2.x would require a full rewrite of the app. In order to stick to one of our Engineering Principles of continuously removing legacy there were two options to move forward:

1. Revolutionary — choose a new framework and rewrite the app as quickly as possible in one big step (more efficient but carries the most risk)
2. Evolutionary — find an approach by which we can slowly move from one framework to another in a series of smaller steps (less efficient but has the least risk)

Since there were no evolutionary options on the table, we looked at what frameworks could be used for a rewrite. React (Facebook’s JavaScript library) had now been in market for a couple of years and was rapidly gaining attention in the development community. The decision matrix was reused and React was a clear winner over Angular 2. Due to this, we made the decision to rewrite the registration flow from Angular 1.x into React which completed in November 2016.

Evolution with Atomic Design

Even though Angular 1.x was deprecated in the registration flow, it had taken nearly three months. A rewrite wasn’t going to be a viable option for the client app which was the bulk of the codebase. We needed to find an evolutionary approach that would enable us to rewrite parts of the client app over time. This would allow us to get close enough to completion to cutover in a few sprints rather than stop all development for months on end.

One unexpected side effect of rewriting the registration flow was that it looked significantly better. The buttons and fields were all pixel perfect. This was because each component had been broken out and redone with the latest designs. An interesting coincidence is that on the day we moved the registration flow to React, Brad Frost published his book on Atomic Design. This outlined a set of design principles (apparently inspired from his high school chemistry class) to create pages built from smaller parts which he called atoms, molecules, organisms and templates.

This model guided our thinking on how we could evolve the client app. In true ClearScore fashion, we made it a friendly competition. Our Frontend Developer (FED) Community formed two separate teams each trying to prove which framework, Angular v2+ or React, would lend itself to an evolutionary migration. In order to facilitate this work, the concept of FED Friday’s was born which meant that once a week all the developers would work on this.

By August 2017 we finally had our answer: React was the winner! A proof of concept had been successful built by one of the teams with components embedded within the legacy Angular app. This was a huge win. We now knew the appropriate technology to use, had a migration strategy and, as a bonus, a reusable set of components would be created that we could use across all our web apps.

Rollout of the Global Platform

Since then things have changed considerably. The Design Systems team has been created and has made it their mission to create all the components that we require.

The FED Team have now advanced the architecture to be able to support several key features that we need for a global platform. Our India launch was built on this new architecture in August 2018; South Africa was then migrated in February this year. For the UK, we took a hybrid Evolutionary/Revolutionary approach which involved merging most of the development teams together for 6 weeks to cutover in April this year.

There is no doubt that there were some skateboarding accidents along the way, but we now have the hoverboard of our dreams. It is fast, beautiful and it feels like the future is now.