JS Chicago Meetup 2/23/16 - Redux & Routes
1 like606 views
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.
JS Chicago Meetup 2/23/16 - Redux & Routes
- 2. nick dreckshage sr. ui engineer @ raise.com https://github.com/ndreckshage @nickdreckshage
- 3. redux & routes…a bit 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 css modules hot loading time traveling ember/angular/etc
- 5. a lot of people have made many really great things a lot people want to build very ambitious things
- 6. but it can be overwhelming!
- 9. 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
- 10. https://github.com/raisemarketplace/ground-control https://github.com/ndreckshage/sambell Structured, universal, SPA architecture CLI to create universal, SPA with a single file
- 11. easing js fatigue…2 new things…
- 12. 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.
- 13. 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.
- 14. redux & routes…why it’s hard
- 15. disconnected global application state global route state https://github.com/ndreckshage/js-chicago-redux-and-routes/tree/master/1-react-router-and-redux
- 17. 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
- 18. • 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?
- 19. flat structure great at first…
- 20. still ok…
- 21. 0 confidence what my state looks like!
- 22. route based state organization 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 • 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).
- 27. 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
- 30. 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.
- 31. 1 file. no webpack, .eslintrc, .babelrc, node_modules, client setup, server setup, store setup, etc.
- 33. for prototypes. but could be for prod, why not.
- 34. last thoughts: react ecosystem is really remarkable. but there is room to make application development easier for us plebs.