Benchpress your Legacy Applications With React

Also known as Migrating from Backbone to React.

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

Transcript

1. THE GREAT OUTDOORS
6. GREENFIELD PROJECT
7. HOWEVER
8. NOT ALL PROJECTS ARE GREENFIELD
9. SOMETIMES YOU HAVE TO USE WHAT’S THERE
10. FOR EXAMPLE
14. A LARGE LEGACY PROJECT
15. TOO EXPENSIVE TO DISCARD
16. MUST BUILD WITHIN EXISTING PROJECT
17. WHICH IS WHAT THEY DID
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
27. TheConsoleLog.com
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
50. connectBackboneToReact https://github.com/mongodb-js/connect-backbone-to-react/ hswolff.com @hswolff TheConsoleLog.com