đź‘Ť (Kudos) Reacts Only
The Beginning
I remember the first day of my internship quite clearly — dressing classy not trashy (no need, everyone wears athleisure 24/7), timing myself to arrive exactly on time, and steeling myself in front of the door before realizing it was locked. I was one minute late.
Damn.
We started with awkward introductions — “Hi, my name is Megan. I go to Penn, and I’ll be interning as a web engineer on the Multisport Team… yep.” — followed by similarly awkward nods. Shortly after, one of the engineers on my team tried to entertain the doe-eyed interns by talking through her work. Day one over.
On the next day, the internship began for real. My mentor Varun assigned me tickets to fix bugs from the start, so I began working through the codebase. I learned which files I’d be working on the most and created my first PR (code Pull Request) during the first week.
After a week or so, I was getting a little too comfortable working on the three files I knew well. In a well-timed maneuver to get me out of my comfort zone, Varun paired me up with web engineers from other teams to work on various tickets. From this, I learned the quirks of our database system, writing tests using rspec, what a `prod console` was, and the different layers that made Strava tick. Web engineers at Strava work across the stack, so being exposed to various parts of the codebase is crucial.
And, of course, I experienced my first WoW, the infamous Workout of the Week. I died. I tried to get myself together in the shower, only to realize I didn’t bring any sort of toiletries, shower shoes, or socks. Luckily for me, an angel named Melissa saved my ass. I will never forget the moment when she offered to let me borrow her shampoo. #womenatstrava
:trust-the-server:
A brief history lesson: nine years ago, Strava started as a web platform that allowed cyclists to upload their GPX files. With the mobile revolution, addition of the recording screen, and some engineering magic, Strava launched and gained traction on Android and iPhone.
Now, the Strava app looks quite different on Android and iPhone, which is inevitable due to the constraints imposed by the platforms. However, the troubling part is that the same activity can show different stats on each platform because the logic used on the clients are not identical. To add more fun to the problem, the database for activities is relational, and each stat for an activity maps to a column. Considering Strava hosts over a billion activities, even adding a single stat would mean massive amounts of backfilling or engineering support to ensure the database wouldn’t break.
The Multisport Team took this as a challenge. The proposed solution to the problem was a modular API driven by the server. With this approach, all the logic and calculations would be done by the server, and each client would simply have to correctly render each module without being concerned by what the information was. As an additional bonus, this meant that the clients could reliably reflect the changes in the module. The mobile apps are updated weekly while the web deploys the server three times daily on Docker/Mesos. Instead of having to wait for the weekly update, any changes could be made in the server and become visible on the client within the day.
Action and REACTion
With the server side of the modular activity details mostly done, I turned my focus to the remaining problem. The scope of the project meant both mobile clients were being developed simultaneously to use the new API, but the web had yet been untouched. And it showed. A lot. A large part of Strava’s web frontend code has not changed much since it was initially written, which meant unholy amounts of nested `if` statements in HAML files, CoffeeScript, and lines of mysterious jQuery decorating each view.
The engineers at Strava know firsthand how painful it is to work with such a fragile JavaScript stack, so the the web team put a large portion of the previous two guild weeks into learning and setting patterns for React. I was fortunate enough to experience guild week during my internship, which gave me enough confidence to take a stab at converting the web activity details page to React.
There were a couple technical details to be considered. We needed to load the information from the new stats API. One option was to integrate the new stats API with the existing endpoint of the web activity details page, which would ensure that the React component always had a populated state. However, we decided to have the component make an AJAX call to the stats API on load. This allows the React component to hydrate its state with the information it needs without needing to gather and pass in the information as props. This approach also leaves the other parts of the page isolated from the React component.
Additionally, we had to rethink how we could use the new endpoint. Whereas the mobile apps show at most 6 stats per activity, the web shows the full set of stats. It was nonsensical to have an unordered set of stats, which called for a grouping scheme to send related stats, such as average speed and maximum speed, as a pair. Since one of the goals of the activity details refurbishment was the ability to add new stat types easily, the React component also had to be flexible enough to accommodate new stats without the need to write additional code. We adopted a templating approach, where the server sends a group of stats with a key that signifies the React component that the stat should map to. A pseudo-intelligent container component parses the keys and passes each stat to the proper React component.
Reflections
It’s daunting but unbelievably exciting to be able to jump on something new to the company as an intern. This level of trust and responsibility given to each intern is what sets the Strava internship experience apart. With mentors
who review your code with such care that they notice grammar mistakes in your comment (the highlight of my internship), teammates who spend hours talking through their work to make sure the interns didn’t feel out of place on their first day, and runners who selflessly share shampoo, face, and body wash with someone they just met, you don’t feel like an intern. You’re part of the team.
Special thanks to Varun for organizing the blog series and being an awesome mentor/bureaucrat, Rod for all your yoga activities, Alex for reviewing my giant React PRs, my fellow interns for those gourmet sandwiches, and everyone at Strava for making this summer so special.
