iHeart - Complex Universal Single-Page JS App

iHeart was my first real web engineering role at a large corporation.

I was hired as a “Web Engineer” to the web team, responsible for iheart.com. The team was surprisingly small, only consisting of two other senior engineers (who I owe a ton of thanks to for mentoring me as I was pretty much a complete noob at the time). Funny enough, both engineers left within a span of 6 months, leaving me as the solo web engineer for a solid 3 months before we hired a contractor. I was thrown into the fire pit, and am glad it happened because it was a tremendous learning opportunity.

Overview

iheart.com gets 20M unique visits/month and has 70 million registered users. It’s not just an ordinary website though - it’s a full-fledged music player that can play custom artist or user based radio stations, live radio, and podcasts.

Since page refreshes would be extremely disruptive to any music listening experience, naturally it was a single-page app, with server-side rendering for performance and SEO benefits. Previously they’d been on a Python stack, but recently they’d (mainly one really ambitious engineer) completed a full-rewrite onto a Node/React stack.

This was before React frameworks like Redux, so it had been created with its own custom framework, revolving around an event emitter taken from Backbone. The code was highly modularized, with the player itself, tracking, and ads split off into their own private NPM modules. There was a heavy use of client-side caching via localStorage.

Ultimately it was a very well engineered application (though not without weaknesses, which I’ll discuss later), so getting a chance to work on this and wrap my head around it really exposed me to good engineering practices.

Some Achievements

  • UDP logging
  • JW Player bugs
  • Over-modular. When the one person leaves, everyone is screwed
  • Continuous Integration
  • Cloud
  • Office bs
  • pics of meeting musicians
  • Mobile banner ad
  • htop, production issues
  • Anonymous listening

Importance of documentation (when Long left)

Annoyances - IE8 support

Starting athlete on soccer and volleyball teams

TO BE CONTINUED