react-es6-redux

 

ReactJS Paris - nov 2015

Christophe Rosset

 

@topheman

Project Genesis

Project Genesis

Original Goal

  • try out React & ES6
  • try isomorphic universal JavaScript

Steps

  • feb 2015: backend proxy to github (topheman-apis-proxy)
  • march 2015: first front-end version
  • april 2015: first isomorphic version
  • oct 2015: upgrade to React v0.14 (mainly react-router v1.0.0-rc)
  • nov 2015: add Redux support (finally some flux-like implementation)

Constraints

 

Even on a POC/Side project,

act with the same kind of constraints

as on a bigger project

Constraints

 

features
   

  • async calls to external API
  • mobile friendly

Constraints

 

build setup
   

  • build in 1 step
  • customizable build (different environments)
    • production
    • development
    • mock
    • with / without devtools

Constraints

 

tooling
   

  • ES6 transpiling
  • css preprocessor
  • hot-reloading

Constraints

 

devtools
   

  • sourcemaps
  • redux-devtools

Constraints

 

tests / CI
   

  • unit tests
  • travis

 

still in progress

Constraints

 

documentation

 

online test site

  • production version
  • development version

Libraries

 

  • react
  • redux
  • redux-router / react-router
    (state of the router kept in redux store)
  • redux-thunk (invoke async actions)
  • redux-devtools
  • ...

Dev Workflow

README - setup section

 

  • launch topheman-apis-proxy (to avoid low rate-limit for unauthenticated requests)
  • webpack-dev-server
    • ES6 transpilation with babel (sourcemaps)
    • sass transpilation (sourcemaps)
    • hot-reload EVERYTHING!
  • ReduxDevTools

Demo

 

  • Hot-reload
    • Components
    • Reducers

Keeping state

 

  • ReduxDevTools
    • Time travel

Dev Workflow

Mock mode

 

useful for:

  • offline dev
  • tests

Build

 

Customizable build via process.env.*

 

bundle ready to ship in /build folder

(under git management)

 

access to dev version (sourcemaps & devtools) even online!

click on the button:

I'm a developer, I want to see what's under the hood!

then, open your devtools ...

What I've learned

 

  • immutability
  • functional programming
  • ES6 syntax
  • some webpack tricks

Next

 

Improve unit tests (in progress)

travis-ci.org/topheman/react-es6-redux

 

Refactor some connected components

(that could simply be dumb components)

 

Upgrade to babel 6

 

Add e2e testing

 

Refactor network layer

Questions ?

react-es6-redux

By topheman

react-es6-redux

  • 3,700