Downloaded 14 times
Uploaded byNick Dreckshage
JS Chicago Meetup 2/23/16 - Redux & Routes
The document discusses the challenges of managing state and routing in JavaScript applications using Redux and React, highlighting issues like global application state and route-based complexity. It introduces two tools, GroundControl and Sambell, aimed at simplifying the development process for single-page applications with opinionated structures and easy data fetching. The author emphasizes the complexity of existing tools and offers a streamlined approach for developers to reduce setup fatigue and improve application organization.
More Related Content
Similar to JS Chicago Meetup 2/23/16 - Redux & Routes
JS Chicago Meetup 2/23/16 - Redux & Routes
- 1.
- 2. nick dreckshage sr. uiengineer @ raise.com https://github.com/ndreckshage @nickdreckshage
- 3. redux & routes…abit broader… easing js fatigue
- 4. babel webpack react react-router eslint npm node redux-simple-router redux-router redux redux-devtools redux-thunk immutable.js universal/isomorphic es6 1000’s of react-starter-kits cssmodules hot loading time traveling ember/angular/etc
- 5. a lot ofpeople have made many really great things a lot people want to build very ambitious things
- 6. but it canbe overwhelming!
- 7.
- 8.
- 9. js fatigue appliesto 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
- 10. https://github.com/raisemarketplace/ground-control https://github.com/ndreckshage/sambell Structured, universal, SPAarchitecture CLI to create universal, SPA with a single file
- 11. easing js fatigue…2new things…
- 12. GroundControl goals (easebuilding): 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.
- 13. sambell goals (easegetting 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.
- 14. redux & routes…whyit’s hard
- 15. disconnected global application state globalroute state https://github.com/ndreckshage/js-chicago-redux-and-routes/tree/master/1-react-router-and-redux
- 16.
- 17. unpredictable imo, routes makesmy 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
- 18. • what didthe 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?
- 19. flat structure greatat first…
- 20.
- 21. 0 confidence whatmy state looks like!
- 22. route based stateorganization By 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
- 26. data fetching • reactrouter 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).
- 27. too many tools…somuch setup… 1774 (and counting) starter kits… https://github.com/search?utf8=%E2%9C%93&q=react +starter&type=Repositories&ref=searchresults
- 28.
- 29.
- 30. why not astarter kit? dislike being thrown in middle of someone else’s code, especially when getting started. out of site out of mind. app code only.
- 31. 1 file. nowebpack, .eslintrc, .babelrc, node_modules, client setup, server setup, store setup, etc.
- 32.
- 33. for prototypes. butcould be for prod, why not.
- 34. last thoughts: reactecosystem is really remarkable. but there is room to make application development easier for us plebs.
- 35.