Blog

Rebuilding the Performance Report in React

by Kylor Hall, Frontend Lead, Sharesight

For the past year at Sharesight we’ve put a lot of work into focusing on the user experience and modernisation of our user-facing code, with a very popular JavaScript library called React.

This past week we launched a pretty major refresh of our Performance Report. Previously, this report was rendered with Rails and users would spend a lot of time refreshing the page – without good indication that something was happening. Also, a common topic on our forum has been around our datepickers traditionally being a bit difficult to use. Sharesight hasn’t quite been so friendly to mobile users either, but we’ve been working to improve that too. All of these things are changing and this release is a key example.

The long-term goal with React at Sharesight is to build new pages and features with it and go through and update the most commonly used (or difficult to use) pages, one by one. Sharesight is a very complex application, with hundreds and hundreds of pages, and this will take time, but we’re dedicated to our users’ experience.

Let’s dive into some of these changes!

Immediately some users will notice that the page loads pretty much instantly when it didn’t before. Investors with many holdings would often have to wait for our performance calculations to happen before the page loads, but now we’re doing that asynchronously via our public API, once a user loads the page. So instead of a white page, users get a loading indicator telling them something’s happening. The same goes for anytime a user changes the date or other filter – instead of reloading the page, we just refresh the data and let the user know.

We’re doing our best to make things faster, but at the end of the day there’s a lot of complex data we crunch to give performance on decade-old investments, so one of our approach vectors is to just make it more friendly to the user.

The filtering has been revamped quite a bit as well; we’ve been testing a new datepicker on our Cash Account pages over the past several months and we’re happy with where it’s at. With all of our filtering, when a user makes a change, the page updates immediately.

old-vs-new-datepicker

Sharesight wasn’t initially designed to be very mobile-friendly, but we’re trying to change that. It’s hard to display a ton of data to our users and previously we gave mobile users a very long table and expected them to scroll. Now we trim down this table and try to fit everything into a single view.

old-vs-new-mobile

Some of the major work was really behind the scenes. Sharesight is built on data, so a recent goal has also been to modernize our APIs and give our users and partners access to the same data that we use internally. With this new release, the Performance Report is now built on a new, beta version of our public API.

Next Up

We’ve got a lot of changes planned, and some already in development. The Performance Report and the Portfolio Overview have a lot in common, so we’ll be updating that soon as well. We’ll also be taking this same approach on other reports and make them consistently better across the board.

We’d love to hear your feedback. A lot of our focus is on user experience, so if your experience can be improved in any way, reach out and let us know! Contact us via that little chat box in the lower-right-hand corner of any page inside our application, via Social Media, or post something on our Community Forum.

FURTHER READING