Continuous Improvement: Development with ES(6-7), React and Redux

thursday-talk_11-11-2015.md

Continuous Improvement: Development with ES(6-7) / React / Redux

ES(6-7)

• Adopt on the technology radar from Thoughtworks
• More functional, easier to follow techniques (async/await)
• No more waiting for new code features with Babel.io
• New techniques promote better predictability and reusable code
• Demo
• All features https://ponyfoo.com/articles/es6

function squareOld(n, callback) {
  setTimeout(() => callback(null, n * n), 500)
}

// Olden Day with Callbacks
(function() {
  squareOld(6, function(err, squared) {
    console.log('6 ^ 2 = ' + squared);
  })
}());

function square(n) {
  return new Promise(resolve => {
    setTimeout(() => resolve(n * n), 500)
  })
}

// Promises, yay, much better!
(function() {
  square(5).then(function(squared) {
    console.log('5 ^ 2 = ' + squared);
  })
}());

// Now - Wow a non-javascript developer can finally understand this...
(async function() {
  const squared = await square(4)
  console.log(`4 ^ 2 = ${squared}`);
}());

React.js

• Trial in Thoughtworks, same as Spring Boot
• Component based application development

import './slideshow.less'
class Slideshow extends Component {
  renderSlide(slide) {
    return <img src={slide.src} />
  }
  render() {
    return <div className='slideshow'>{this.props.slides.map(this.renderSlide)}</div>
  }
}

• No more left over CSS styles and JS methods (are they being used still?)
• JSX is great, no more JS/HTML separation
• Smart/Dumb components technique allows us to keep state out of components, they should only use what is given to them (one-way data flow)

Redux

• Flux technique is in trial as well
• Redux is the most popular re-invisioning of flux
• Principles
  • One state store (broken into tree branches for different areas of your application)
  • Components trigger actions and do not hold or modify state
  • Pure reducer functions produce a new state from a given state and action
    • Immutability allows us to quickly check for state changes
• Reducers Pseudo Code

// Ordered List of Actions (Action Timeline)
var actions = []
// Immutable state
var state = {}
// Dispatch Action
function dispatch(action) {
  // Reducers return a new state after handling an action
  return reducers.reduce((state, reducer) => reducer(state, action), state)
}

Hot reloading

• Keeps state (through proxies)
• No page refresh
• Fast development (with wallaby, even better)

Redux

• No mutation!
  • Mutation has unpredictable side effects all over the place which are hard to trace the source of

Developer tools

• It's all about the tools... stop making the same mistakes (DRY)
  • ESLint (for static analysis)
  • Hot reloading (keeping state and no refresh)
  • Debug monitor (see action/state changes, and helpful error messages)

Drawer Planner Demo

Links

• https://www.youtube.com/watch?v=xsSnOQynTHs