---------------------------------------- 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. ----------------------------------------