EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3

Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 39
Building a React.js-based
QEWD Application
(c) Separating Concerns
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;

Separation of Concerns
• Currently they aren't separated
– The dynamic behaviour and its associated
controlling logic is all included in the
MainPage component
– MainPage should ideally just describe the
View logic

"use strict"
var controller;
return {
status: 'initial',
}
},
controller = require('./MainPage-controller')(this.props.controller, this);
},
return (
<div>{this.displayText}</div>
);
}
});
MainPage.js

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
);
}
});
MainPage.js
Now describes only the
View for our component

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<div>{ this.displayText }</div>
);
}
});
MainPage.js
displayText is now a
property of this, not
a variable that has to
be instantiated in the
component itself

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
);
}
});
MainPage.js
Dynamic behaviour is
now described in a
separate module that
we load into the MainPage
Component here

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
);
}
});
MainPage.js
State is still the concern
of MainPage, but it's just
for triggering re-renders

MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};

return controller;
};
Invoked by the parent component like this:
},

return controller;
};
Invoked by the parent component like this:
},
New augmented instance

"use strict"
var displayText = '';
return {
status: 'initial',
}
},
this.props.controller.log = true;
var message = {
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
});
},
return (
<div>{displayText}</div>
);
}
});
This was our original
Component's logic
We need to move the
code in red into the
Controller module

component.displayText = '';
controller.log = true;
var message = {
params: {
foo: 'bar'
}
};
controller.send(message, function(responseObj) {
component.displayText = responseObj.message.text;
});
return controller;
};

var message = {
params: {
foo: 'bar'
}
};
});
return controller;
};
Initialising and changing
the value of
this.displayText in the
parent component

var message = {
params: {
foo: 'bar'
}
};
});
return controller;
};
Changing the parent
component's state
variable value to
trigger a re-render

Re-bundle and try it again
It will run exactly
the same as before

Pattern for Development
• The pattern we've created can be adopted for all of your
components and sub-components
• It cleanly separates the concerns:
– View: the parent component
– Dynamic behaviour: the controller module
• There are alternatives in the React world:
– Flux, Redux, etc
– These can also be used with QEWD
• Worth exploring when you're more familiar with the concepts
within React
• Let's use the simpler pattern described in this part of the
QEWD course for now

EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3 (20)

More from Rob Tweed (7)

Recently uploaded (20)

EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3