3 ms·

I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and d

I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and domain) in a single object. * immutable.js: Obviously for the immutable data structures which plays nicely within the React ecosystem. It also has a rich set of data structures that aren't found natively within JavaScript. For example I make heavy use of Records to simulate domain models. * react-router: For routing within the application. * superagent: For ajax calls. * reselect: If using redux you'll cherry pick various parts of the state tree for your components. If any of the data used within components can be derived then reselect comes into play nicely. It took longer than I had hoped but I finally have a strong set of libraries and project layout I'm happy and productive with.

EC1 11y ago
Why not socket.io for ajax calls?
- scwoodal 11y ago
  I primarily use Django/Django Rest Framework as the back end so web-sockets are a pain right now. I'm looking forward to when Andrew Godwin's channel work gets into Django proper where socket.io would make a lot of sense. Unless I'm missing something and socket.io does ajax requests these days? I haven't used it in quite some time.
  - avtar 11y ago
    Have you looked into using something like Pushpin with Django? http://pushpin.org/about/ http://pushpin.org/about/
Geee 11y ago
Native fetch() and polyfills are also an excellent choice for ajax. There's a comparison of those: http://andrewhfarmer.com/ajax-libraries/ http://andrewhfarmer.com/ajax-libraries/
silviogutierrez 11y ago
Any good tutorials for CRUD-heavy redux apps? Do you dynamically create your action creators? Or did you write createWidget(), updateWidget(), retrieveWidget() and destroyWidget() manually per resource (and their 3 corresponding constants for REQUEST, SUCCESS and ERROR)? And how do you ensure your detail components (WidgetDetail, or WidgetForm) have the widget loaded before displaying? asyncConnect? Thanks in advance for any pointers!
- scwoodal 11y ago
  I'm a visual person so perhaps seeing some code will help. I've gutted a CRUD heavy side project that shows how I lay things out and put it on Github [1]. I left out the back end folder so this repo isn't intended to work. The "users" and "journals" folders are the CRUD parts. I prefer a domain folder structure versus splitting things by function. So instead of folders like "actions/userActions.js" and "reducers/userReducer.js" I'll do "users/actions.js" and "users/reducers.js". Ping me on github if you have any more questions. [1] https://github.com/scottwoodall/react-demo https://github.com/scottwoodall/react-demo
  - silviogutierrez 11y ago
    Whoa thanks! I'll take a look.

EC1 11y ago

Why not socket.io for ajax calls?

scwoodal 11y ago
I primarily use Django/Django Rest Framework as the back end so web-sockets are a pain right now. I'm looking forward to when Andrew Godwin's channel work gets into Django proper where socket.io would make a lot of sense. Unless I'm missing something and socket.io does ajax requests these days? I haven't used it in quite some time.
- avtar 11y ago
  Have you looked into using something like Pushpin with Django? http://pushpin.org/about/ http://pushpin.org/about/

Geee 11y ago

Native fetch() and polyfills are also an excellent choice for ajax. There's a comparison of those: http://andrewhfarmer.com/ajax-libraries/ http://andrewhfarmer.com/ajax-libraries/

silviogutierrez 11y ago

Any good tutorials for CRUD-heavy redux apps? Do you dynamically create your action creators? Or did you write createWidget(), updateWidget(), retrieveWidget() and destroyWidget() manually per resource (and their 3 corresponding constants for REQUEST, SUCCESS and ERROR)? And how do you ensure your detail components (WidgetDetail, or WidgetForm) have the widget loaded before displaying? asyncConnect? Thanks in advance for any pointers!

scwoodal 11y ago
I'm a visual person so perhaps seeing some code will help. I've gutted a CRUD heavy side project that shows how I lay things out and put it on Github [1]. I left out the back end folder so this repo isn't intended to work. The "users" and "journals" folders are the CRUD parts. I prefer a domain folder structure versus splitting things by function. So instead of folders like "actions/userActions.js" and "reducers/userReducer.js" I'll do "users/actions.js" and "users/reducers.js". Ping me on github if you have any more questions. [1] https://github.com/scottwoodall/react-demo https://github.com/scottwoodall/react-demo
- silviogutierrez 11y ago
  Whoa thanks! I'll take a look.