Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Migrating the Frontend Stack from Python to React @ Yelp

271 views

Published on

Yelp has over half a million lines of template and frontend code. React provides a new experience for both our developers, and our users. This talk is a deep dive into how we are enabling developers to convert our templates/frontend stack over to React, and to do so whilst iterating quickly.

We'll share some lessons we've learned from migrating a codebase to React at scale, including:
- Some of the architectural challenges faced migrating a Python-based stack to React
- How we do React Server Side Rendering in a Python environment
- How we support a company culture shift to React

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Migrating the Frontend Stack from Python to React @ Yelp

  1. 1. @mark_larah Migrating the Frontend Stack from Python to React @ Yelp
  2. 2. ➔ From the U.K. ➔ Core Web Team @ Yelp, 2+ years ➔ Non-computery things I enjoy ◆ Making Bread, Eating Bread ◆ Chocolate ◆ Cheese ◆ Terrible Puns About Me @mark_larah github.com/magicmark
  3. 3. Yelp’s Mission Connecting people with great local businesses.
  4. 4. 20042004
  5. 5. Today
  6. 6. ● 148M Reviews ● 77M Monthly Unique Users on Desktop Web ● 500+ Engineers ● ~3000 Existing Templates ● ~1000 Unique Routes
  7. 7. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  8. 8. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  9. 9. Actual Template Code (Python)
  10. 10. Actual Template Code (Python) Unit Test Template Code (JS)
  11. 11. Markup JS
  12. 12. Everything
  13. 13. Providing a great Developer Experience
  14. 14. Providing a great Developer Experience Hot Reloading Scoped CSS Isolated Dev Playground Generated Documentation #0CJS
  15. 15. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  16. 16. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  17. 17. Update All Callsites 1 Cheetah Button Wraps React 2
  18. 18. Update All Callsites 1 Cheetah Button Wraps React 2
  19. 19. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  20. 20. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  21. 21. ?
  22. 22. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  23. 23. Keeping it Fast
  24. 24. 50ms
  25. 25. Target RTT QPS 50ms 806 Averages calculated using Vegeta, Apache Bench and Siege Tested with node 7.4.0
  26. 26. “Is this worthwhile?” “Can we migrate without disruption?” “How will this impact performance?”
  27. 27. React @ Yelp Today
  28. 28. Hypernova pyramid-hypernova github.com/Yelp/pyramid-hypernova
  29. 29. www.yelp.com/careers We're Hiring!
  30. 30. @YelpEngineering fb.com/YelpEngineers engineeringblog.yelp.com github.com/yelp
  31. 31. Questions

×