----------------------------------------

   hi!
             'codename'
          'Mapbox GL Online'
            Mapbox / @tmcw

    a pretty big react app
    (also uses flux, etc)

----------------------------------------

 STACK

 * React
 * Flux
 * React-router
 * Immutable.js
 * Written in ES6 w/ 6to5

----------------------------------------

 STATS

 * ~5 elite designvelopers
 * 65 components
 * 217 test assertions
 * 20 dependencies
 * 4 months in

----------------------------------------

 BACKGROUND

 * JavaScript shop front & back
 * Backbone, jQuery, _ templates
 * d3 for HTML
 * Already taken the immutable leap
 * Never transpiled / cross-compiled

----------------------------------------

 REACT is pretty good

- Only found one bug in React core
- Avoiding shouldComponentUpdate
- Tracebacks can be a little weak
- Library size is a concern
- React versions across deps sucks

----------------------------------------

   Obligatory React Question

        STATE VS PROPS

- Props: control from elsewhere
- State: temporary internal self-control


----------------------------------------

 IMMUTABLE the only way to undo/redo

```js newVersion(stylesheet =>
      stylesheet.update(foo => 'bar'))```

 actions create versions on a stack,
 never changing data in-place

----------------------------------------

 TEMPLATES have always sucked

 d3 was the first step for our template
 avoidance.

 Dynamic pages should be updated
 the same way they're bootstrapped

----------------------------------------

 ES6 eases the pain of writing
 functional JavaScript

```js var flip = (name) => (query) =>
  xtend({}, query, {
    [name]:
      (query[name] === '0') ? 1 : 0 })```

----------------------------------------

 USE   Arrow functions
       Template strings
       Object syntax

 AVOID List comprehensions
       Data structures
       Async syntax

----------------------------------------

  Avoiding Bugs

  - propTypes always
  - Pause on Caught Exceptions
  - Sentry
  - JSHint
  - TBD: Flow annotations

----------------------------------------

  TESTS tape + karma-tap

  Jest is cool but
  - Jasmine + async = :(
  - Doesn't test cross-browser bugs
  - Won't work with WebGL
  - Slow in our testing

----------------------------------------

  FLUX

  We use the Facebook flux module.
  Reflux mostly saves typing

    typing is not the problem


----------------------------------------




  (pain points)




----------------------------------------

  ASYNC

  NOBODY has solved async. There is no
  example to follow, no good
  documentation. Not a problem of
  syntax, but of structure.


----------------------------------------

  PROBLEMS WITH ASYNC

  * Async & routing are app-wide
    concerns for which bad solutions
    affect all parts of your software
  * Async is the one thing you will
    always need to mock in your tests

----------------------------------------

  OUR APPROACH

  * Async in actions only
  * Some actions return Promises
  * We wait for async in react-router
  * All AJAX is in one utility module.


----------------------------------------

  DRAWBACKS

- Promises fail quietly: nothing should
  ever fail quietly.
- Async is tied into routing
- Who knows if this is the way
  to do this: async is under-documented
  and under-shared.
----------------------------------------

  TRANSITIONS

  Transitions on the internet are
  rotten to the core. You can get
  either control or performance
  but never stability.


----------------------------------------

  ES6 bleeding-edges

  Use use 6to5, which is better
  than traceur, but toolchains suck:
  source maps, jshint, tests,
  node compatibility.
  Bleeding edge = bleeding edge.

----------------------------------------