Using React and Typescript to Help Build a Sturdier Product

When planning began on the Example Set Viewer, the Cycle development team went in knowing that it was a mountain of a task – the crown on top of a story Cycle has been building for nearly a year. The Cycle team knew the importance of being able to easily manipulate large datasets when building test cases, but managing a complex Data Store with numerous Example Sets, each with potentially thousands of rows, was no small undertaking. In order to build this new functionality to the highest quality, the team incorporated new front-end technologies, primarily React and Typescript.


Why the change

Web technology is one of the fastest-evolving sectors of software development. In the short time since the initial release of Cycle 2.0, much has changed in the web tech landscape. The React UI library and Typescript have quickly become leaders in the space, but tool’s popularity doesn’t mean that it's the best tool for the job. After thorough research, the Cycle team felt confident that these new technologies would drastically improve the quality of our product.

Prior to development of the Example Set Viewer, React had become a team favorite for creating web interfaces and several internal tools had already been built using this library. Incorporating React into Cycle was less a question of if, but when.

React's component-based approach to creating applications creates more encapsulated and precise blocks of user interface. Views are broken down into bite-sized chunks that reflect the state of the data handed to them, allowing the programmer to quickly understand how the component works while also creating an easily testable subset of the overall application. However, the biggest selling point for the team was the performance gain React offers – by updating only individual components as needed, we could avoid redrawing the entire screen for each individual change. This reduction in processing led to a much smoother experience for the user, especially when working with large amounts of data.

While React manages the visual side, Typescript, a superset of the Javascript language, provides the robust type-checking to assure the logic behind-the-scenes is bug-free. By enforcing static types, Typescript allows the programmer to always know exactly what a block of code does, what parameters it expects, and what it will return. Such awareness allows for shorter turnaround on the creation of new functionality as well as debugging existing features.



How it went

As with any new process, incorporating these tools took some ramp-up time:  There were some challenges integrating the new React/Typescript features with the existing Cycle front-end code; acclimating to the new syntax and workflow took some additional effort; and our application architecture went through several iterations before we found the best arrangement.

After a brief adjustment period, the team created new features and fixed bugs much faster than with the previous set of technologies. Much of this additional velocity is due to the improved architecture of the application’s front-end: clear and concise code, enforced with types, and closely aligned with the back-end. This normalization of the codebase allowed back-end developers, who may have rarely come into contact with user-facing features, to begin developing UI with confidence.

Finally, React gave us the ability to easily test individual components, which brought the front-end test coverage to an all time high.



A better product

One of the biggest pain points in test creation with Cycle has been the management of test data. The Cycle team set out to provide the most responsive and reliable viewer to do that, and along the way incorporated some new tools of our own. Making the switch to React and Typescript was an investment for the quality of our software product, particularly the new Example Set Viewer. Thanks to these tools, customers can can expect even greater performance, more responsive interactions, and a sturdier product overall.

This post was written by:

Cameren Dolecheck
Software Developer

Cameren is part of the Cycle software development team. He enjoys building out the user interface and helping to create a good user experience.