js chicago meetup 2/23/16 - redux & routes
Post on 10-Feb-2017
351 Views
Preview:
TRANSCRIPT
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?
top related