Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

266 views

Published on

This is part 39 of the EWD 3 Training Course. This presentation continues to explore how to develop a React.js application that integrates with QEWD

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 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
  2. 2. Copyright © 2016 M/Gateway Developments Ltd "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;
  3. 3. Copyright © 2016 M/Gateway Developments Ltd 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
  4. 4. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { console.log('rendering MainPage'); return ( <div>{this.displayText}</div> ); } }); module.exports = MainPage; MainPage.js
  5. 5. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { console.log('rendering MainPage'); return ( <div>{this.displayText}</div> ); } }); module.exports = MainPage; MainPage.js Now describes only the View for our component
  6. 6. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { console.log('rendering MainPage'); return ( <div>{ this.displayText }</div> ); } }); module.exports = MainPage; MainPage.js Now describes only the View for our component displayText is now a property of this, not a variable that has to be instantiated in the component itself
  7. 7. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { console.log('rendering MainPage'); return ( <div>{this.displayText}</div> ); } }); module.exports = MainPage; MainPage.js Now describes only the View for our component Dynamic behaviour is now described in a separate module that we load into the MainPage Component here
  8. 8. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { console.log('rendering MainPage'); return ( <div>{this.displayText}</div> ); } }); module.exports = MainPage; MainPage.js Now describes only the View for our component State is still the concern of MainPage, but it's just for triggering re-renders
  9. 9. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { // describe the Component's dynamic behaviour return controller; };
  10. 10. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { // describe the Component's dynamic behaviour return controller; }; Invoked by the parent component like this: componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); },
  11. 11. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { // describe the Component's dynamic behaviour return controller; }; Invoked by the parent component like this: componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); },
  12. 12. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { // describe the Component's dynamic behaviour return controller; }; Invoked by the parent component like this: componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); },
  13. 13. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { // describe the Component's dynamic behaviour return controller; }; Invoked by the parent component like this: componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, New augmented instance
  14. 14. Copyright © 2016 M/Gateway Developments Ltd "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; This was our original Component's logic We need to move the code in red into the Controller module
  15. 15. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { component.displayText = ''; controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; controller.send(message, function(responseObj) { component.displayText = responseObj.message.text; component.setState({status: 'updated'}); }); return controller; };
  16. 16. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { component.displayText = ''; controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; controller.send(message, function(responseObj) { component.displayText = responseObj.message.text; component.setState({status: 'updated'}); }); return controller; }; Initialising and changing the value of this.displayText in the parent component
  17. 17. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { component.displayText = ''; controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; controller.send(message, function(responseObj) { component.displayText = responseObj.message.text; component.setState({status: 'updated'}); }); return controller; }; Changing the parent component's state variable value to trigger a re-render
  18. 18. Copyright © 2016 M/Gateway Developments Ltd Re-bundle and try it again It will run exactly the same as before
  19. 19. Copyright © 2016 M/Gateway Developments Ltd 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

×