react-es6-redux
ReactJS Paris - nov 2015
Christophe Rosset
@topheman
Project Genesis
Project Genesis
Original Goal
- try out React & ES6
- try
isomorphicuniversal 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
- 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 ?
Resources
- Dan Abramov at React Europe about Redux & React hot loader
- Redux in 30 lessons by Dan Abramov on egghead.io
- Functional programming in JS by @mpjme - videos serie
redux.js.org - github.com/rackt
Find out about my other projects on
Christophe Rosset - @topheman