Pivoting to React, at Scale

Explore a conference talk from JSConf Iceland 2016 detailing Pinterest's transition from a custom Backbone/Django framework to React. Learn about the challenges faced during the migration process, including performance bottlenecks, code bloat, and scaling issues. Discover the strategies employed to overcome these obstacles, such as measuring individual features, implementing a "Backbone lite" solution, and adopting declarative states. Gain insights into the mistakes made during the transition, including the lack of a top-down strategy and coupling data fetching with rendering. Understand the true value of React in terms of testability and the importance of iteratively updating semantics when pivoting to a new JavaScript framework. Dive into the complexities of managing a large-scale web application with nearly 500,000 lines of code and a team of 164 web developers.

Intro
Always be pivoting The last 20% of a rewrite takes 80% of your time
Meet Denzel, 2013 web platform Built on Backbone.js and Django
Problems with Denzel Performance bottlenecks, CSS/JS bloat, dual code paths
And more ES6, NodeJS, Babel, Webpack
Defining "at scale"
498, 151 lines of code just in our web app! 164 web developers
Pivoting smarter What data structure is a web application most like?
It's a tree
Top down vs. bottom up
Things we did right
Measuring individual features
Backbone lite 80% of the functionality, none of the dependencies
Declarative states
Scaling communications
Mistakes were made
Suggested learning order: React, ES6, npm, JS bundlers, routing. Flux Redux
No top-down strategy
Keeping HTML structure
Data flow
Coupling fetching data and rendering
Testing
The true value of React Testability, not speed
CSS strategy Or lack thereof
Conclusions
Iteratively update semantics To ease the pain of pivoting your JS framework
DNA == code (This expression would fail a strict equality check)