Shownotes redux/react

gistfile1.txt

# What's redux?

 - state + action -> reducer -> store -> connect (utils)(component) -> render
 - reducers are scoped to action types

## redux's connect function

Responsible for mapping { state, dispatch } to props as first curried parameter. Second curried parameter is the component.
=> export default connect(mS, mD)(Comp);

## Optimising `mapStateToProps`

Reselect lets you define your selectors in a separate file. `createSelector` creates a memoized function.

Immutable objects, and copying all data "every time" is faster when we can shortcut the recomputations as often as possible and have efficient equality comparison, preferably on reference equality.

# Default workflow: adding new interaction

 1. Design your component/page
 2. Add in 'mapStateToProps' and 'mapDispatchToProps'
 3. Make it a 'prototype' by just navigating to the 'correct' page on submit: "dispatch(push('myNextStep'))"
 4. Add MyPage.propTypes to get help from console in dev mode
  i. Add in primitive data props
  ii. Add in action props (that can be called from callbacks)
 5. Add action constants, add action tests, add action
 6. Link stubbed actions to HTML
~ take a coffee ~
 7. Consider what you want to 'happen' when an action is performed
 8. This is called a 'reducer'. Write a test for it.
 9. Link reducer in page/component

# Undo versus opportunistic actions

 - http://redux.js.org/docs/recipes/ImplementingUndoHistory.html
 - vs jumpToPast and then replay with merge, resequencing it all

## What consistency boundaries?

 - Individual components? (textbox, etc) Prefer internal state.
 - Routing? Navigation ACTIONs
 - Page components/functionality.
 - Alternative formulations: see calmm-js

# Service Workers

 - Needs HTTPS (except on localhost)
 - 24 hour windows (https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update) and (https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/onupdatefound)
 - Support: FF, Chrome, Opera. No support: Safari, IE (https://jakearchibald.github.io/isserviceworkerready/)

# Using Service Workers

 - plugin for webpack
 - creates sw.js
 - import { install } from 'offline-plugin/runtime';
   install();
 - will "auto update" at least every 24 hours

# HTTP 2.0

 - Aims to make parallel, pipelined requests
 - Will support server push in the future, but not yet
 - Suave's status 

## Minutia/experiences

 - Early nginx builds had trouble with POST
 - Bugs now fixed
 - [chunk].[contenthash].js naming std alleviates problem
 - asynchronous routing allows chunking