strategies for mitigating complexity in react based redux applicaitons

HELLO,REACT.JS VANCOUVER!

[email protected]

https://github.com/garbles

Strategies for Mitigating Complexity in React

Based Redux Applications

Designing for Simplicity

"The computing scientist’s main challenge is not to get confused by the complexities of his own making."

- E. W. Dijkstra

"The bottom line is that simplicity is a choice. It's your fault if you don't have a simple system."

- Rich Hickey (Simple Made Easy)

"Complexity is the root cause of the vast majority of problems with software today… The primary status of complexity as the major cause comes simply from the fact that being able to understand a system is a prerequisite for avoiding all of them, and of course it is this which complexity destroys."

- Moseley & Marks

COMPLEX SIMPLE

Stateful components. Stateless components.

Too many props. Use Redux containers liberally.

Conditional statements in reducers. Normalize at boundaries.

Scattered with side-effects. Side-effects at one point in the update loop.

COMPLEX SIMPLE

Stateless components

"The core premise for React is that UIs are simply a projection of data into a different form of data. The same input gives the same output."

- Sebastian Markbåge

class Dropdown extends React.Component { constructor() { super();

this.state = {open: false}; this.handleToggle = () => { this.props.onToggle(); this.setState({open: !this.state.open}); } }

render() { const { options, selected, onSelect } = this.props;

const { open } = this.state;

// render some stuff }}

class Dropdown extends React.Component { constructor() { super();

this.state = {open: false}; this.handleToggle = () => { this.props.onToggle(); this.setState({open: !this.state.open}); } }

render() { const { options, selected, onSelect } = this.props;

const { open } = this.state;

class Dropdown extends React.Component {- constructor() {- super();-- this.state = {open: false};- this.handleToggle =- () => {- this.props.onToggle();- this.setState({open: !this.state.open});- }- }- render() { const { options, selected, onSelect,+ open,+ onToggle } = this.props;

- const {- open- } = this.state;

class StatefulDropdown extends React.Component { constructor() { super(); this.state = {open: false};

this.handleSelect = () => this.setState({open: !this.state.open}); }

render() { return ( <Dropdown options={this.props.options} selected={this.props.selected} open={this.state.open} onToggle={this.handleToggle} onSelect={this.props.onSelect} /> ); }}

class StatefulDropdown extends React.Component { constructor() { super(); this.state = {open: false};

this.handleSelect = () => this.setState({open: !this.state.open}); }

render() { return ( <Dropdown options={this.props.options} selected={this.props.selected} open={this.state.open} onToggle={this.handleToggle} onSelect={this.props.onSelect} /> ); }}

Always keep lowest level components stateless

Keep them ALL stateless if you can

Switches can be flipped in a store and it Just Works™. More control.

You can always wrap a stateless component if you need stateful behavior.

Use Redux containers liberally

function Targeting(props) { const { advancedTargetingAvailable, advancedTargetingEnabled, advancedTargetingExpanded, cookieTargetingEnabled, domain, hideRules, urlTargets, onRuleChangeAndSave, onRuleChange, onRemoveRule, onAddRule, onDomainChange, frequency, cookieTarget, geoTargets, referrerTargets, onChangeFrequency, onBlurFrequency, onChangeCookieType, onBlurCookieName, onChangeCookieName, onExpandAdvancedTargeting, onToggleGeoTargetsEnabled, onToggleReferrerTargetsEnabled, onChangeGeoTargets, planUpgradeLink, firstName,

function Targeting(props) { const { domain, advancedTargetingAvailable } = props;

return ( <div> <div> Domain: {domain} Pro Account? {advancedTargetingAvailable} </div> <FrequencyContainer /> <GeoContainer /> <ReferrerContainer /> </div> );}

Low cost for huge readability win (components only require what they need).

Depending on hierarchy it may be a perf win.

Normalize at boundaries.

class App extends React.Component { render() { const { backgroundColor, onClick } = this.props;

return ( <div style={{backgroundColor}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }

(state, action) => { switch (action.type) { case 'CHANGE_COLOR': return { ...state, backgroundColor: action.color }; }};

const state = { backgroundColor: 'white'};

connect( // mapStateToProps state => state,

// mapDispatchToProps dispatch => ({ onClick: color => {type: 'CHANGE_COLOR', color} }))(App);

return ( <div style={{backgroundColor}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }}

const initialState = { backgroundColor: 'white'};

function reducer(state, action) { switch (action.type) { case 'CHANGE_COLOR': return { ...state, backgroundColor: action.color }; default: return state; }};

const AppContainer = connect( // mapStateToProps state => state,

// mapDispatchToProps dispatch => ({ onClick: color => dispatch({type: 'CHANGE_COLOR', color}) }))(App);

Requirements change!

(state, action) => { switch (action.type) { case 'CHANGE_COLOR': return { ...state, backgroundColor: action.color }; }

const state = { backgroundColor: 'white'

const initialState = { backgroundColor: 'white',+ borderColor: null};

class App extends React.Component { render() { const { backgroundColor, onClick,+ borderColor } = this.props;

+ const border = borderColor ? `35px solid ${borderColor}` : null;+ return (- <div style={{backgroundColor}}>+ <div style={{backgroundColor, border}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }}

const initialState = { backgroundColor: 'white',+ borderColor: null};

class App extends React.Component { render() { const { backgroundColor, onClick,+ borderColor } = this.props;

+ const border = borderColor ? `35px solid ${borderColor}` : null;+ return (- <div style={{backgroundColor}}>+ <div style={{backgroundColor, border}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }}

Requirements change!

const initialState = { backgroundColor: 'white', borderColor: null,+ width: '100%'};

class App extends React.Component { render() { const { backgroundColor, onClick, borderColor,+ width } = this.props;

const border = borderColor ? `35px solid ${borderColor}` : null;

return (- <div style={{backgroundColor, border}}>+ <div style={{backgroundColor, border, width}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }}

const initialState = { backgroundColor: 'white', borderColor: null,+ width: '100%'};

class App extends React.Component { render() { const { backgroundColor, onClick, borderColor,+ width } = this.props;

return (- <div style={{backgroundColor, border}}>+ <div style={{backgroundColor, border, width}}> <button onClick={() => onClick('red')}> Red </button> <button onClick={() => onClick('green')}> Green </button> <button onClick={() => onClick('red')}> Blue </button> </div> ) }}

class App extends React.Component { render() { const { backgroundColor, onClickRed, onClickGreen, onClickBlue, onClickYellow borderColor, width } = this.props;

return ( <div style={{backgroundColor, border, width}}> <button onClick={() => onClickRed()}> Red </button> <button onClick={() => onClickGreen()}> Green </button> <button onClick={() => onClickBlue()}> Blue </button> <button onClick={() => onClickYellow()}> Yellow </button> </div> ) }}

class App extends React.Component { render() { const { backgroundColor, onClickRed, onClickGreen, onClickBlue, onClickYellow borderColor, width } = this.props;

return ( <div style={{backgroundColor, border, width}}> <button onClick={() => onClickRed()}> Red </button> <button onClick={() => onClickGreen()}> Green </button> <button onClick={() => onClickBlue()}> Blue </button> <button onClick={() => onClickYellow()}> Yellow </button> </div> ) }}

Boilerplate (more actions, larger reducers).

Code is easier to remove if it is no longer required.

Fewer code paths.

Easier to type check if you're into that.

Side-effects at one point in the update loop.

Action Dispatcher Store View

Action

Action Dispatcher Store

Action

Action Dispatcher Store

Action

const initialState = { user: { id: 1, name: 'Bob' }, busyState: 'READY'};

let watch = watcher();

watch = applyHandler( watch, ['busyState', 'user.name'], ([busyState, name]) => busyState === 'SAVING' && name.length > 0 updateUser, store => store.dispatch(savingUserComplete()));

const store = createStore(reducer, initialState, watch);

All actions are synchronous.

Async is represented in state by default.

All side-effects occur at the end of the update loop.

Easier to substitute based on the context.

COMPLEX SIMPLE

THANKS!

https://www.infoq.com/presentations/Simple-Made-Easy

http://shaffner.us/cs/papers/tarpit.pdf

https://github.com/reactjs/react-basic

strategies for mitigating complexity in react based redux applicaitons

Engineering