One of the most troublesome parts of developing web applications has been working with the DOM (Document Object Model) implemented across multiple browsers. As bits of HTML markup accumulate in an application—especially in one as information-dense as Octopart's BOM Tool—the browser has to work harder and harder to manage and visually render all of these elements.

The BOM Tool was originally developed using the AngularJS framework. Angular did a good job of managing the BOM Tool's complexity, but it was still subject to the limitations imposed by the DOM. This was especially true with rendering the BOM Tool in older browsers like Internet Explorer 8—an application still in use by many Octopart users. From a developer perspective, we  also found that AngularJS had a steep learning curve, one that slowed down feature development with new members of our team.

React, a client-side JavaScript library developed by Facebook, offered us an entirely new way of developing web applications. The most notable change has been a performance increase. By creating its own "virtual DOM," React is able to render user interface changes very quickly in response to changes in the underlying data—even in IE8. Since React itself is simply a UI library, we also use the Flux method of organizing applications. This combination has allowed us to reason much more easily about the BOM Tool's interaction with Octopart's data, and focus our efforts on getting new features out the door.

The BOM Tool rewrite was completed in just 2 weeks. In that time, we also built in 2 new features that have been on our users' wish lists for some time: the addition of distributor pricing data in the main CSV export, and also export of distributor-specific CSVs. And there are more BOM Tool features on the way.