Image for post
Image for post

NFL + React

Richard Herrera
Feb 23, 2016 · 6 min read
Image for post
Image for post
React Los Angeles Meetup at the NFL Studios • March 2014

The Path to Wildcat

Image for post
Image for post
A wildcat. He’s quite young, like our framework.
  • Updating shared components across many applications became tedious and unsynchronized.
  • Webpack compilation negatively impacted the development experience by lengthening build, test, and deploy times as our codebases increased.
  • Code-sharing suffered across repositories (especially as various Flux patterns emerged)
  • Can we be smarter about loading components on the browser?
  • Can we effectively share React components across our properties?
  • With HTTP2 on the horizon, can we practically adopt a bundle-free environment?
  • Can we pre-render and serve React pages on multiple domains from one web application?
  • Can we achieve our goals using a monolithic repository and server application across multiple domains and subdomains?
Image for post
Image for post
A graphical mind map of Wildcat. (We know, it’s complicated. We’ll walk through these below.)
  • react-wildcat-handoff is the application client / server renderer
  • react-wildcat-prefetch is an agnostic higher order component to prefetch component data
  • react-wildcat-hot-reloader adds hot-reloading capabilities to Wildcat
  • react-wildcat-ensure is a wrapper for System.import that behaves like Webpack’s require.ensure
  • react-wildcat-test-runners manages end-to-end and unit testing with Karma, Protractor and Mocha.

The Application Server

Image for post
Image for post

Static Asset Management

Image for post
Image for post
www.nfl.com -> moduleA -> www.nfl.com/bundleContainingModuleA.js
sso.nfl.com -> moduleA -> sso.nfl.com/bundleContainingModuleA.js
www.nfl.com -> moduleA -> static.nfl.com/moduleA.js
sso.nfl.com -> moduleA -> static.nfl.com/moduleA.js

The Client

Image for post
Image for post

Dev Tools

Image for post
Image for post

The Road Ahead

Wildcat is still in its infancy. It treads new, unexplored ground in many areas. We hope it can be used as a performance yardstick for the near-future of React applications. There are still many questions to answer and many features to refactor. We invite you to take a look at our framework and reach out with questions or concerns. The NFL Engineering team is only getting started with React. We can’t wait to see what’s next.

NFL Engineers

#NFLengineers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store