16 April 2016

React Amsterdam 2016: Migrating Safely to React

Speaker: @jamischarles (PayPal)
Download: Slides

From complex to simple


Pain PayPal had:
  • Too many abstraction layers
  • Low confidence
  • Difficult state bugs
Original focus: Ship, not maintainability.


Simple -> predictable -> Reliably

View layer


Obvious solution: PayPal choose to use React.

Lessons learned with React:
  • React simplifies the view (fewer files)
  • Quick win
  • Push it to production to test it in the wild

Routing layer


Originally: Backbone routing was used.
Solution: Use React Router and bridge with Backbone router for the time being.

Rewrite took 3 weeks.

Data layer


Originally: Backbone models & collections which become complex easily.
Solution: Redux. You can go back and forth in time,  reducing the debugging time from hours to minutes.

What about old data?
Rebuilding means lots of A/B testing and QA.

Advise


Use as much vanilla JavaScript as possible. Backbone was chosen 2 years ago and now they already moved on. So try not to rely too much on React and Redux, we will have the same problems in 2 years time.