SlideShare a Scribd company logo

Optimizing React at Postmates

•
•
T
Trey Huffine

Optimizing React at Postmates. Lessons that we learned on how to increase developer productivity and improve code we as rebuilt our web application.

Related slideshows

Era of server less computing final
Era of server less computing finalEra of server less computing final
Era of server less computing final
 
Deep dive into share point framework webparts
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webparts
 
Sahi
SahiSahi
Sahi
 
1 of 25
Download to read offline
Optimizing React @ Postmates July 13, 2017 Trey Huffine @treyhuffine
Overview • Optimize Developer Impact and Happiness • Measure Performance • Optimize React
Optimize Developer Impact and Happiness
(old) Frontend • Node service to render views and proxy API calls • SSR React to React Router SPA • Model-based state management (built in house) • Browser caching mechanisms for data • Webpack builds • Less for styles • Tests? #YOLO (but set up for unit tests w/ a headless browser)
Motivation • Node service to render views and proxy API calls • SSR React to React Router SPA • Model-based state management (built in house) • Browser caching mechanisms for data • Webpack builds • Less for styles • Tests? #YOLO (but set up for tests w/ a headless browser) Universally use JavaScript, non-blocking I/O and allow for SSR SEO, perceived improvements with HTML prebuilt Easy to reason about and separates concerns Improve performance by reducing unnecessary API calls Awesome asset pipeline, code splitting, all that great stuff Built in JS and battle tested The infrastructure is there but we want to really make it part of the team culture
Optimizing React at Postmates
Results • SSR added complexity and required vetting all packages. Ultimately reduced dev velocity for minimal or unknown gains. • Models didn’t scale with code or team size. • Need to take advantage of Dan Abramov’s ideas the community and available tools. • Global state makes things very easy to reason about and inspect the application. Also provides performance with everything in memory.
Results • Want to optimize for development velocity and enjoyment in addition to optimizations code performance • Make it easier to onboard new engineers • Snapshot testing and other methods to make it more enjoyable while also providing confidence in changes • Handle A/B testing, event tracking, and data collection with ease
(future) Frontend • Go service to render views and proxy API calls • Client-side React SPA with React Router v4 • Redux • PostCSS using BEM or CSS Modules or CSS in JS (still debating)
Measuring Performance
Tools • Lighthouse by Google (for webpages themselves, not just React) • React Perf Add-on
Lighthouse Setup 3 options: npm, Chrome extension, or CLI lighthouse https://order.postmates.com/bun-mee-vietnamese-sandwich-eatery-san-francisco lighthouse https://www.grubhub.com/restaurant/bun-mee-2015-fillmore-st-san-francisco/258912 lighthouse https://www.trycaviar.com/san-francisco/bun-mee--fillmore-5923
Results
Results
React Perf Add- on Setup Optional Chrome Extension - search “react perf chrome"
Optimizing React
Goal • Reduce touching the DOM / renders • Decrease file size • Avoid unnecessary server calls
Methods • Build for production • Use `key` correctly in lists • Manage `shouldComponentUpdate` • Use PureComponent
Build for Production
Build for Production
Use key correctly Unique key Math.random() as key 28 operations 713 operations Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
Component Updates Can assess with the `why-did-you-update` package
PureComponent
Postmates Largest on-demand delivery platform 5-10% growth week-over-week 1 Fulfill over one million deliveries per month On-demand logistics connecting a three-sided market 2 3 4 5 Operate in all major cities6 Will actively be contributing to and releasing OSS7 Available on Android, iOS and Web
Optimizing React @ Postmates team-tech-recruiting@postmates.com postmates.com/jobs @postmatesdev @treyhuffine

More Related Content

Optimizing React at Postmates

  • 1. Optimizing React @ Postmates July 13, 2017 Trey Huffine @treyhuffine
  • 2. Overview • Optimize Developer Impact and Happiness • Measure Performance • Optimize React
  • 4. (old) Frontend • Node service to render views and proxy API calls • SSR React to React Router SPA • Model-based state management (built in house) • Browser caching mechanisms for data • Webpack builds • Less for styles • Tests? #YOLO (but set up for unit tests w/ a headless browser)
  • 5. Motivation • Node service to render views and proxy API calls • SSR React to React Router SPA • Model-based state management (built in house) • Browser caching mechanisms for data • Webpack builds • Less for styles • Tests? #YOLO (but set up for tests w/ a headless browser) Universally use JavaScript, non-blocking I/O and allow for SSR SEO, perceived improvements with HTML prebuilt Easy to reason about and separates concerns Improve performance by reducing unnecessary API calls Awesome asset pipeline, code splitting, all that great stuff Built in JS and battle tested The infrastructure is there but we want to really make it part of the team culture
  • 7. Results • SSR added complexity and required vetting all packages. Ultimately reduced dev velocity for minimal or unknown gains. • Models didn’t scale with code or team size. • Need to take advantage of Dan Abramov’s ideas the community and available tools. • Global state makes things very easy to reason about and inspect the application. Also provides performance with everything in memory.
  • 8. Results • Want to optimize for development velocity and enjoyment in addition to optimizations code performance • Make it easier to onboard new engineers • Snapshot testing and other methods to make it more enjoyable while also providing confidence in changes • Handle A/B testing, event tracking, and data collection with ease
  • 9. (future) Frontend • Go service to render views and proxy API calls • Client-side React SPA with React Router v4 • Redux • PostCSS using BEM or CSS Modules or CSS in JS (still debating)
  • 11. Tools • Lighthouse by Google (for webpages themselves, not just React) • React Perf Add-on
  • 12. Lighthouse Setup 3 options: npm, Chrome extension, or CLI lighthouse https://order.postmates.com/bun-mee-vietnamese-sandwich-eatery-san-francisco lighthouse https://www.grubhub.com/restaurant/bun-mee-2015-fillmore-st-san-francisco/258912 lighthouse https://www.trycaviar.com/san-francisco/bun-mee--fillmore-5923
  • 15. React Perf Add- on Setup Optional Chrome Extension - search “react perf chrome"
  • 17. Goal • Reduce touching the DOM / renders • Decrease file size • Avoid unnecessary server calls
  • 18. Methods • Build for production • Use `key` correctly in lists • Manage `shouldComponentUpdate` • Use PureComponent
  • 21. Use key correctly Unique key Math.random() as key 28 operations 713 operations Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
  • 22. Component Updates Can assess with the `why-did-you-update` package
  • 24. Postmates Largest on-demand delivery platform 5-10% growth week-over-week 1 Fulfill over one million deliveries per month On-demand logistics connecting a three-sided market 2 3 4 5 Operate in all major cities6 Will actively be contributing to and releasing OSS7 Available on Android, iOS and Web
  • 25. Optimizing React @ Postmates team-tech-recruiting@postmates.com postmates.com/jobs @postmatesdev @treyhuffine