Replacing outdated, high-dependency code with a modern, flexible framework

CHALLENGE: An unwieldy Backbone codebase

After years of iteratively working on our client’s app library in Backbone, using Marionette.js to simplify an increasingly complex and outdated codebase, development was starting to slow as our team encountered new obstacles. 

With more than 20 applications using templates, API layers, and tooling configurations from shared libraries, dependencies were becoming far too highly coupled and fragile; making updating very cumbersome. The tests would often break and were becoming far more complex due to the inter-dependencies, which meant we often spent more time fixing tests than writing code. 

The codebases often included a lot of historic logic that was unnecessary but unpicking it was far too time consuming, risky, and costly. Fortunately, we had implemented our applications in a micro-frontend architecture which meant there was scope for us to move to another framework one application at a time. 

SOLUTION: Rewrite applications in React.js 

The team wanted to use a newer, more flexible framework to simplify coding, create a neater architecture, and make it easier to onboard new developers to the team. As a test, some of our developers built a new application in React.js, isolated from the existing codebase so they were free to experiment. 

The new app, which used the same UI style as our previous work, was faster to write and more efficient – which meant our team could be more productive with React.js. 

We then took a step back and assessed how we wanted to structure the architecture and common components to ensure we weren’t creating new dependencies. 

RESULT: A simplified codebase with efficient testing processes

We’ve now rewritten all our applications using React.js and based on a single style guide, so UI components look and feel consistent across the whole app library. There was a learning curve for the team but, because it’s a modern, popular front-end library, there’s an active developer community to call on for support when we need it. 

Reusable components are each in their own Git repository, which means they’re faster and easier to write, test, and use in new applications – without dependencies. We’ve also split our unit and integration testing, using Jest and Cypress respectively, for more efficient, reliable testing processes.