This document summarizes Mark Larah's presentation on migrating the frontend stack at Yelp from Python to React. It discusses the motivations for considering a migration, how they approached it incrementally without disruption, and that performance testing showed the React code meeting their targets. It also provides information about Mark's background, Yelp's mission and size, and how they are providing a great developer experience with features like hot reloading and isolated dev playgrounds for React.

1. @mark_larah
Migrating the Frontend Stack from
Python to React @ Yelp

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. Yelp’s Mission
Connecting people with great
local businesses.

5. 20042004

6. Today

7. ● 148M Reviews
● 77M Monthly Unique Users on Desktop Web
● 500+ Engineers
● ~3000 Existing Templates
● ~1000 Unique Routes

8. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

9. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

11. Actual Template Code (Python)

12. Actual Template Code (Python) Unit Test Template Code (JS)

15. Markup
JS

18. Everything

19. Providing a great Developer Experience

20. Providing a great Developer Experience
Hot Reloading
Scoped CSS
Isolated Dev Playground
Generated Documentation
#0CJS

21. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

22. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

30. Update All Callsites
1
Cheetah Button Wraps React
2

31. Update All Callsites
1
Cheetah Button Wraps React
2

33. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

34. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

40. ?

61. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

62. Keeping it Fast

64. 50ms

66. Target RTT QPS
50ms 806
Averages calculated using Vegeta, Apache Bench and Siege
Tested with node 7.4.0

69. “Is this worthwhile?”
“Can we migrate without disruption?”
“How will this impact performance?”

70. React @ Yelp
Today

71. Hypernova
pyramid-hypernova
github.com/Yelp/pyramid-hypernova

72. www.yelp.com/careers
We're Hiring!

73. @YelpEngineering
fb.com/YelpEngineers
engineeringblog.yelp.com
github.com/yelp

74. Questions