Case Study - How upgrading legacy technology improved product quality, faster releases & improved scalability

Summary

A client that Melluli provides software development services runs a SAAS product that recommends diets for Horses. Here users fill out their horse data like gender, age, activity and health conditions and get a tailored diet report. The product has a sophisticated algorithm that analyses the inputs, iterates through different combinations of diets and suggests the best of the lot. The product runs in kiosk mode - within feed company websites - and generates leads for the feed companies when user fills out a contact form to download the diet report.

Challenge

Melluli was hired to enhance the product with new features and improve quality in general. For a single page, progressive disclosure style application, it used CoffeeScript driven user interface. A problem using Coffeescript in this product is that it adds an extra layer to build process where Coffeescript is converted to Javascript that browsers understand and has smaller talent pool of developers who know this framework. Coffeescript has its own fan following due to its Python like syntax and many popular open source products are built using it but it is a hangover from the past and well past its sell by date. (Stackoverflow Survey - Popular Web Frameworks)

Solution

The client product suffered from technology debt and blocked enhancements due to the use of a less known & unsuitable technology in its stack. It is not easy to rewrite software every time a new technology shows up on the horizon and at Melluli we don’t recommend following the casual herd and move to the latest frameworks and tools as and when they arrive. However there are few technologies that change the landscape, disrupt the way we build software and have matured over time due to their wide scale adoption and React framework is one.

Quote from React website -

Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

And from our own experiences -

Keeping business logic closer to presentation makes software maintenance easier. Its the new mantra.

React has abundant talent pool, wide adoption, solid backing by open source community, uses other popular tools like npm and is in active development - ticks everything in the list while choosing a technology.

We moved client product from Coffeescript to React retaining the application functions while fixing small usability issues at first. We also converted backend interactions to proper REST apis for separation of layers. This loose coupling improved testability of the application by several notches. Now the user interface can have tests using various test frameworks, we chose Jest framework as it is widely used in React community. Finally all of this put together reduced regression bugs and deployment debt as more tests meant early detection of bugs and even lesser time to fix them following TDBF (From Meszaros) approach.

After this re-architecture, we started enhancing the product by picking features from backlog based of client’s priority. Until now there were several running instances of the product each tailored to a single feed company and deployed in its own AWS EC2 server. Most of the time the servers were idle. Now we were able to move client customization as personalization driven from property files and sent to React UI at runtime resulting in a set of small load balanced servers serving all the feed companies. At any point, if needed, capacity augmentation was easier now as there was no need to configure a new server for every feed company. This reduced costs for the client, provided higher uptime and ease of scaling capacity on demand.

Summary

Moving the user interface to React framework and the re-architecture in the process allowed setting up new feed companies to try the product out in hours instead of weeks enhancing client’s business tremendously. All of these achieved by using better technology to loosely couple the layers in the technology stack resulting in improved testability, faster development cycles, faster product enhancements, reduced feature debt, reduced deployment costs, faster on-boarding of new customers and enhanced business opportunities.