Benchpress your Legacy Applications With React

Slide 1

Slide 1 text

THE GREAT OUTDOORS

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

GREENFIELD PROJECT

Slide 7

Slide 7 text

HOWEVER

Slide 8

Slide 8 text

NOT ALL PROJECTS ARE GREENFIELD

Slide 9

Slide 9 text

SOMETIMES YOU HAVE TO USE WHAT’S THERE

Slide 10

Slide 10 text

FOR EXAMPLE

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

A LARGE LEGACY PROJECT

Slide 15

Slide 15 text

TOO EXPENSIVE TO DISCARD

Slide 16

Slide 16 text

MUST BUILD WITHIN EXISTING PROJECT

Slide 17

Slide 17 text

WHICH IS WHAT THEY DID

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Benchpress your Legacy Applications With React

Slide 22

Slide 22 text

OR Migrating from Backbone to React

Slide 23

Slide 23 text

HARRY WOLFF

Slide 24

Slide 24 text

HARRY WOLFF Lead Web Engineer Cloud Services

Slide 25

Slide 25 text

HARRY WOLFF twitter @ github blog hswolff hswolff hswolff.com

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

TheConsoleLog.com

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

LET’S SET THE STAGE…

Slide 30

Slide 30 text

HISTORY MongoDB Atlas

Slide 31

Slide 31 text

HISTORY MongoDB Atlas

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Demo Forcing cooperation. HISTORY

Slide 34

Slide 34 text

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');

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

HISTORY Marionette.Views are built to be used with Backbone.Models. They listen to change events in a Backbone.Model and update their template.

Slide 37

Slide 37 text

HISTORY However React doesn't.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Demo Going through changes. HISTORY

Slide 40

Slide 40 text

This is why we created connectBackboneToReact! CONNECTBACKBONETOREACT

Slide 41

Slide 41 text

▸ 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

Slide 42

Slide 42 text

CONNECTBACKBONETOREACT connectBackboneToReact has rich options. ▸ You can choose which Backbone.Model attributes to provide to your React component. ▸ You can deﬁne which events you want to listen to. ▸ You can debounce the render event to prevent unnecessary re-renders. ▸ ….and more!

Slide 43

Slide 43 text

CONNECTBACKBONETOREACT This lets us use the same Backbone.Models for our Marionette Views and our React Components.

Slide 44

Slide 44 text

CONNECTBACKBONETOREACT It makes it possible for us to gradually migrate from Backbone to React without a complete rewrite.

Slide 45

Slide 45 text

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 (

{this.state.data.property}

) } } // Usage

Slide 46

Slide 46 text

CONNECTBACKBONETOREACT With connectBackboneToReact class MyComponent extends React.Component { render() { return (

{this.props.settings.property}

) } } const MyComponentConnected = connectBackboneToReact()(MyComponent); // Usage

Slide 47

Slide 47 text

Demo Connected and cool. CONNECTBACKBONETOREACT

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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