"Cleaning the Tar: Using React within the Firefox Developer Tools" by James Long

The Firefox Developer Tools have grown into something great, but as the codebase for the frontend has grown it has been difficult to manage complexity. This happens with every project, so what do you do? The easy part is deciding on new abstractions; the hard part is migrating existing code to them.

Join me as I show you the secret workings of developer tools, the complexity of our frontend, and what we might do about it. I'll talk about how important it is to embrace new abstractions and how to slowly migrate large, complex codebases to them. I'll show how React is so helpful with these sorts of migrations. In addition, I'll explore all kinds of things we can do now that we are starting to use React.

I will explain the abstract concepts that React entails, primarily a pure functional UI, and explore various strategies for managing application state, like Flux, single atom app states, immutable data structures, and Relay. I will apply these concepts to real examples and discuss advantages and disadvantages.

Lastly, we want working on our devtools to be delightful, so I will demonstrate how React enables this with hot reloading to see changes instantly while developing, and time travel debugging.

James Long
MOZILLA
@jlongster

James Long works for Mozilla on the Firefox Developer Tools, mostly trying to make debugging JavaScript better. He's spent the last 8 years studying programming languages like Lisp and Scheme, and making apps for the web with JavaScript. He likes to write in-depth articles about interesting programming ideas. Most of his free time is now happily dedicated to his daughter.