Benchpress your Legacy Applications With React

Benchpress your Legacy Applications With React

Also known as Migrating from Backbone to React.

Presented at ReactNYC https://www.meetup.com/ReactNYC/events/242406154/

F863e9eb811851834773398e72614dc1?s=128

Harry Wolff

October 30, 2017
Tweet

Transcript

  1. THE GREAT OUTDOORS

  2. None
  3. None
  4. None
  5. None
  6. GREENFIELD PROJECT

  7. HOWEVER

  8. NOT ALL PROJECTS ARE GREENFIELD

  9. SOMETIMES YOU HAVE TO USE WHAT’S THERE

  10. FOR EXAMPLE

  11. None
  12. None
  13. None
  14. A LARGE LEGACY PROJECT

  15. TOO EXPENSIVE TO DISCARD

  16. MUST BUILD WITHIN EXISTING PROJECT

  17. WHICH IS WHAT THEY DID

  18. None
  19. None
  20. None
  21. Benchpress your Legacy Applications With React

  22. OR Migrating from Backbone to React

  23. HARRY WOLFF

  24. HARRY WOLFF Lead Web Engineer Cloud Services

  25. HARRY WOLFF twitter @ github blog hswolff hswolff hswolff.com

  26. None
  27. TheConsoleLog.com

  28. None
  29. LET’S SET THE STAGE…

  30. HISTORY MongoDB Atlas

  31. HISTORY MongoDB Atlas

  32. HISTORY A lot of our data currently exists in Backbone

    Models. const SettingsModel = Backbone.Model.extend({ isFreeTierPlan() { return this.get('planType') === 'FREE_TIER'; }, }); const settings = new SettingsModel({ planType: 'FREE_TIER' }); console.log(settings.isFreeTierPlan()) // true
  33. Demo Forcing cooperation. HISTORY

  34. HISTORY Backbone.Models emits events when its values change. settings.on('change', function(model)

    { assert(model === settings); // true assert(model.get('hello') === 'world'); // true }); settings.set('hello', 'world');
  35. HISTORY Marionette.Views are built to be used with Backbone.Models.

  36. HISTORY Marionette.Views are built to be used with Backbone.Models. They

    listen to change events in a Backbone.Model and update their template.
  37. HISTORY However React doesn't.

  38. HISTORY However React doesn't. So let’s make it listen.

  39. Demo Going through changes. HISTORY

  40. This is why we created connectBackboneToReact! CONNECTBACKBONETOREACT

  41. ▸ https://github.com/mongodb-js/connect-backbone-to- react/ ▸ It removes a lot of boilerplate

    code. ▸ It standardizes an API between Backbone and React. ▸ Mirrors the API of react-redux for a familiar and friendly experience. ▸ It can be tested in isolation. connectBackboneToReact is a library that makes it easy to use Backbone Models within React. CONNECTBACKBONETOREACT
  42. CONNECTBACKBONETOREACT connectBackboneToReact has rich options. ▸ You can choose which

    Backbone.Model attributes to provide to your React component. ▸ You can define which events you want to listen to. ▸ You can debounce the render event to prevent unnecessary re-renders. ▸ ….and more!
  43. CONNECTBACKBONETOREACT This lets us use the same Backbone.Models for our

    Marionette Views and our React Components.
  44. CONNECTBACKBONETOREACT It makes it possible for us to gradually migrate

    from Backbone to React without a complete rewrite.
  45. CONNECTBACKBONETOREACT Without connectBackboneToReact we would have to write this every

    time we used a Backbone.Model: class MyComponent extends React.Component { componentWillMount() { this.props.model.on('change', this.updateState, this); } componentWillReceiveProps(nextProps) { this.updateState(nextProps.model); } componentWillUnmount() { this.props.model.off('change', this.updateState, this); } updateState(model) { this.setState({ data: model.toJSON() }); } render() { return ( <div>{this.state.data.property}</div> ) } } // Usage <MyComponent model={settings} />
  46. CONNECTBACKBONETOREACT With connectBackboneToReact class MyComponent extends React.Component { render() {

    return ( <div>{this.props.settings.property}</div> ) } } const MyComponentConnected = connectBackboneToReact()(MyComponent); // Usage <MyComponentConnected model={{ settings: settings }} />
  47. Demo Connected and cool. CONNECTBACKBONETOREACT

  48. None
  49. None
  50. connectBackboneToReact https://github.com/mongodb-js/connect-backbone-to-react/ hswolff.com @hswolff TheConsoleLog.com