Softjourn

Case Study: Migration from Backbone to React - Making the Right Decision

The client was interested in partnering with Softjourn due to our experience with legacy code rewrite and migration projects, our talented solutions architects with specialized industry knowledge, and the great results we shared with this client on their
ABOUT THE CLIENT:
Project_icon
Project:Automation functionality for travel & business expense approvals testing full length of block
Date_iconClient since:
2011
Headquarters_icon
Headquarters:United States
Technology_icon
Technologies:
Challenge:

When Softjourn’s team started analyzing the client’s Backbone.js platform, we found more than a few issues that our client was also worried about. 

We advised the client to have a separate team that would ensure the migration, and provided them with a detailed roadmap. 

Solution:

While Backbone provided an organized structure to the client’s codebase and definitive models that could communicate with data, using React as a view library significantly improved their application's performance since React uses the virtual DOM.

Result:

The results of migrating to React are: 

  • Improved compatibility
  • Better development downtime
  • More tools for testing and debugging
  • Scalability
  • Great tool for dynamic web apps

The Need

Choosing the best JavaScript framework for a single-page application is often complicated due to the fact that new technologies emerge more often than ever before. However, there are developers who not only understand all the benefits and challenges of using a particular tech stack but take into account the business side of the project. That’s how our client decided to move away from an outdated Backbone and start using React, as it would ensure the speed and efficiency of their application. 

Our client is a big name in the expense management industry that wanted to offer their clients a chance to save time and money through optimization. After many successful projects working with Softjourn, they knew that our team was more than capable of providing insightful suggestions and brilliant solutions for this project. 

The client was interested in partnering with Softjourn due to our experience with legacy code rewrite and migration projects, our talented solutions architects with specialized industry knowledge, and the great results we shared with this client on their past projects. 

Since our experts possess deep financial software expertise and extensive hands-on experience from numerous fintech projects, the client knew we’d be able to help them on this difficult and critical project - migrating from the Backbone framework to React.

imag19

The Need

When the client initially developed their platform, it made sense for them, like many others at the time, to use Backbone because it was one of the most popular and simple frameworks. As time passed, fewer websites supported Backbone and instead turned to more modern frameworks, like React or AngularJS. 

Another problem the client had to deal with was the lack of Backbone developers on the market. Backbone is a JavaScript framework based on MVC architecture and while it’s useful for the fast development of single-page applications, it demands the use of additional tools and has a steep learning curve. 

It soon became clear that due to a lack of current website support and hireable developers that switching to a new framework would be the necessary next step for our client’s app development. 

We recommended that the client should make the move to React because it is one of the leading technologies for building fast-performing applications. React is known for expediently building scalable applications that are simple to maintain and don’t require the use of any additional tools. 

We also suggested React because the client wanted to make their platform more user-friendly and intuitive. Plus, Reach has a relatively shallow learning curve and a large community of developers who share their knowledge online. 

We analyzed the client’s old framework and the potential framework side-by-side to ensure the client understood the similarities and differences they would have if they proceeded forward with the migration, relating to coding speed, overall performance, documentation, relevancy, cost of development, and community support. 

After consulting with Softjourn’s business analytics experts and our team of developers, the client realized how important it would be to have a separate team that would work on rewriting Backbone to React. Having a separate team would ensure the quality and timeliness of the migration. Our team provided a detailed roadmap and advised our client on best practices each step of the way.

Image_Backbone_vs_React_js

The Challenge

When Softjourn’s team started analyzing the client’s Backbone.js platform, we found more than a few issues that our client was also worried about. The following are problems we found with Backbone.js and how we could utilize React to overcome these challenges:

Non-Reusable Views - Backbone views are much more challenging to reuse than React components. At times they can be frustrating for clients to deal with because they usually rely on rendering engines, like Underscore or Mustache, which may restrict functionality.

The issues we saw with Backbone’s reusability were things we could solve with React, as it offers several reusable components and the ability to create universal components with approved designs ready to be added to the platform. 

Updating the DOM Is Difficult - When it comes to performance, Backbone views cannot update DOM parts without re-rendering the whole DOM, which can be very costly. React overcomes this problem by using the virtual DOM and only updating the DOM parts that need a re-render.

Scaling and Maintenance - As Backbone.js is difficult to scale and maintain, and it wasn’t easy to find the developers able to do it, the logical path forward was to engage in a massive migration of the platform’s functionalities for easier scaling and maintenance. 

Rewriting all pages from scratch would be time-consuming for the team and would hurt the business side of the project. Instead, we opted for a different approach that involves rewriting some features on React and importing them into the Backbone code. 

After the migration of key features, our team started improving other functionalities and noticing what else could be improved. The UI screens were working better than before and were more in line with the current tech stack. Overall the migration from Backbone.js to React was a necessary step to make the application more effective. 

The Benefits

Backbone is primarily a JavaScript MVC framework, whereas React identifies itself as a JavaScript UI library. While Backbone provided an organized structure to the client’s codebase and definitive models that could communicate with data, using React as a view library significantly improved their application's performance since React uses the virtual DOM.

With React, the client’s application UI now has two distinct views: tiles and a mosaic gallery. This way, their users can make folders, put different types of reports into customized folder systems, and organize them according to their needs. Users can also use UI rules and forms to create their own mosaic where their company documentation is saved in one place. 

The main advantages of using React are:

Compatibility. Some frameworks often require frequent rewrites to ensure the code is updated, but with React, things are kept pretty simple. Their API is public, and since it doesn’t change that often, Facebook and other big companies easily update their coding base using old elements. 

Development downtime. React makes development very fast due to ready-made elements that can be easily reused. The component-based approach makes React understandable and fairly easy to maintain. Developers can quickly take over projects and understand what needs to be done. 

Testing and debugging. React uses its tools for testing and debugging, while Backbone doesn’t. And with the help of modularity, it makes it easy to remove and add elements to ensure optimal performance. 

Great tool for dynamic web apps. React simplified the process of building dynamic web apps with a JavaScript expansion. Using virtual DOM instead of a real one is a big advantage as it allows developers to add changes faster and easier. 

Scalability. With modularity, React applications scale easily. You can start small and continue growing the development as needed. For example, you can start by creating an MVP and then make it a single-page application to see where the development focus should be. 

Conclusion

With the very large and growing community of JavaScript ecosystems, new frameworks and libraries are emerging every year. As these frameworks are used as a foundation for a broad range of applications, and our client has an expense management platform, they realized that they would see a lot of benefits from migration to React. 

Clients should choose the best framework for their business needs. This means weighing the capabilities of the development team, product requirements, and future plans before choosing what framework. Analyzing and comparing what framework will work best for your development is also crucial.

Softjourn helped our client select the most optimal framework that fit their project and development goals while deeply considering their business needs as a whole. The client considered Softjourn as the key reason for the success of their transformation process, mainly due to the expert guidance we provided and the work our team did to help the migration happen smoothly. 

Our client now has a more intuitive platform that their users will love to use every day that will serve them for years to come. This project is still active, and our teams are working on further updating and improving our client’s application. 

Partnership & Recognition

Softjourn's IAOP 100 award
Intix Member
Microsoft Gold Partner
Xamarin Authorized Consulting Partner
Monax Parntership
Softjourn in the Inc. 5000 list

Want to Know More?

Fill Out the Form to Discuss Your Idea With Us!