Step 1: Turbo mode portfolios
The most visited page on Carta is also one of the most complicated. The portfolio can aggregate data across hundreds of companies, displaying cost, value, ownership percentage, gain/loss, multiple and IRR.
On Carta, this data flow from company cap tables into investor portfolios. As a result, it is always up to date and accurate. But generating portfolios with hundreds of companies on the fly was too slow; some of the larger portfolios could take up to 30 seconds to load.
Our solution was to create a table in our database to essentially cache the rows of the portfolio page. The trick is then to regenerate the numbers whenever an event occurs that should cause the investor's portfolio to change. So instead of calculating the entire portfolio at load time, we make updates to the relevant pieces of the portfolio whenever something changes. Internally, we've been referring to these as "turbo mode" portfolios.
These are the before and after load times for three of our largest portfolios:
Step 2: Carta for Investors as a single page app
For the first few years of building MVPs at Carta, the process for building a new feature looked like this:
Someone from product puts together a page in HTML and CSS that does nothing but looks the way we want.
A little over a year ago we decided to ditch Knockout in favor of React. Knockout worked well for us when we were building simple pages with a small amount of interactivity. React involves more boilerplate and more specialized knowledge but lends itself better to organizing a large code base. Incidentally, it's a lot easier to hire people who know React than people who know Knockout.
Now every new page is its own little SPA (single page app) written in React. Even the simplest pages use Redux and Redux-Saga. This is a heavy duty infrastructure which seemed like overkill for a long time but is finally paying off.
Over the past year, we had converted the majority of our pages to React. We made a final push to convert the remaining pages and then used React Router, combineReducers and saga composition to stitch everything together into an SPA.
SPAs are faster than traditional websites because they don’t require full page loads during site navigation. The browser already knows how every page should look and behave and only needs to make minimal asynchronous requests for data as you navigate.
It turned out to be a great idea writing all of our React features using Redux and Redux-Saga, as it would have been much harder to stitch everything together otherwise. We’ll continue to build off of this foundation in React to unlock more performance enhancements, and we will keep working towards the goal of turning all of Carta into an SPA.
Thanks to Tiago Lira, Leonardo Cabral, Evandro Myller and Wakim Jraige who have spent the past few weeks working on this!