redux & routeshttps://github.com/ndreckshage/js-chicago-redux-and-routes

nick dreckshage sr. ui engineer @ raise.com https://github.com/ndreckshage @nickdreckshage

redux & routes…a bit broader…

easing js fatigue

babel

webpack

react

react-router

eslint

npm

node

redux-simple-router

redux-routerredux

redux-devtools

redux-thunk

immutable.js

universal/isomorphic

es6

1000’s of react-starter-kits

css modules

hot loading

time traveling

ember/angular/etc

a lot of people have made many really great things

a lot people want to build very ambitious things

but it can be overwhelming!

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.v956cs93z

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.v956cs93z

js fatigue applies to both setup & building a spa with react & redux.

ember / ember-cli does some really nice things. best practices for a redux spa?

convention -> configuration -> happy medium

https://github.com/raisemarketplace/ground-control

https://github.com/ndreckshage/sambell

Structured, universal, SPA architecture

CLI to create universal, SPA with a single file

easing js fatigue…2 new things…

GroundControl goals (ease building): simplify react/redux/spa architecture. scalable & organized. treat routes as isolated, stateless pages - like a server side refresh. provide opinionated reducer structure so developer doesn’t have to think about it. universal data fetching api to easily control rendering.

sambell goals (ease getting started): ultimate simplicity. a universal, single page app with a single file. index.php ease. not a starter kit, move complexity behind the scenes. app code only. nice defaults but highly configurable. incremental complexity.

redux & routes…why it’s hard

disconnected global application state

global route state

https://github.com/ndreckshage/js-chicago-redux-and-routes/tree/master/1-react-router-and-redux

react-router-redux (previously redux-simple-router) connects them.

unpredictable imo, routes makes my immutable,

testable reducers / application state feel like a global, mutable variable.

https://github.com/ndreckshage/js-chicago-redux-and-routes/tree/master/2-react-router-and-redux

• what did the previous route do to my application state?

• if i navigate back to a previous route, is the previous state still there? do i need to manually reset state? garbage collection?

• how do i add new reducers to the store for a route that needs it. if a new route is added, i need to change everything? code splitting?

flat structure great at first…

still ok…

0 confidence what my state looks like!

route based state organizationBy fundamentally organizing state based on the routing structure, we simplify our ‘world view’ to our active route.

GroundControl: • Organizes Redux reducers based on routes • Automatic nested reducers • Coordinates top level application state (still global) • Keeps reducer implementations intact (testable) • Clears out stale state, leaves parent route state. • Feels more like server side dev (ctrl+f5)

https://github.com/ndreckshage/js-chicago-redux-and-routes/tree/master/3-react-router-and-redux

data fetching• react router leaves data fetching up to you. • server side, sync makes more sense. client side async might. so you

decide! inverted data fetching api. and it’s universal. • makes sense for a router. colocated component data fetching

makes sense for falcon / graphql (build queries).

too many tools…so much setup… 1774 (and counting) starter kits…

https://github.com/search?utf8=%E2%9C%93&q=react+starter&type=Repositories&ref=searchresults

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.v956cs93z

http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html

why not a starter kit? dislike being thrown in middle of someone else’s code,

especially when getting started. out of site out of mind. app code only.

1 file. no webpack, .eslintrc, .babelrc, node_modules, client setup, server setup,

store setup, etc.

configurable!

https://github.com/ndreckshage/sambell/blob/master/src/app/gerty.defaults.js

for prototypes. but could be for prod, why not.

last thoughts: react ecosystem is really remarkable. but there is

room to make application development easier for us plebs.

thanks! questions?