React migration

Goal

To migrate the AngularJS app to React.

Problems to solve

#Support

AngularJS was coming to the end of life in terms of support from the maintainers.

#Test coverage

Due to the speed-to-market delivery of the initial app, there were deficiencies in the testing coverage.

#Hiring

To ensure the company has access to the best talent available we need to be using a modern front-end architecture.

Solutions

Microservices

We were able to embed micro react apps inside of the main structure of the Angular JS app. This was achieved using Single SPA. We began by migrating low traffic areas of the site. The React app itself went through several iterations of approaches but eventually settled on a similar approach to the existing AngularJS approach.

Code flags

We introduced switches that allowed us to define which parts of the site could be switched between AngularJS and React. These also mitigated risk on rollout as we had the ability to switch back to legacy implementations if we needed to. The flags were managed via a management page. We introduced best practices ensuring these flags were removed after full adoption.

Testing

Initially the company attempted to separate the front end business logic from the specific framework and libraries we were using. This vanilla JS layer would have comprehensive testing coverage and mean that the JS library could be swapped out in the future. The theory was sound but the approach was not popular with the engineers. Eventually, testing coverage was achieved using React testing library and end to end tests were introduced using Cypress.

Take aways

These things take much longer than anticipated. There was a lot of wavering on the best approach. Ultimately I think a 3rd party opinionated approach via an established framework would have wielded quicker results.