4 ms·

Where does React's Immutability Helpers fall in this spectrum? I was mulling over switching my entire codebase to ImmutableJS when a friend asked to try them fi

by jasim 11y ago

Where does React's Immutability Helpers fall in this spectrum? I was mulling over switching my entire codebase to ImmutableJS when a friend asked to try them first. It worked out well, but I wonder whether anyone here has experience with it in a large long-running project. So far it has allowed me to use Javascript primitives everywhere; all I need to ensure is to avoid direct mutation and use `update` that gives a new object whose properties shares the same references with the original one, except for the path in which the leaf node that needs to be mutated sits.

jlongster 11y ago
Those helpers are basically the equivalent of seamless-immutable, which uses native JS objects but updates them by copying. You make the exact same tradeoffs as if you chose it over Immutable.js. Comparing those two libs represents the choice of either persistent data structures or copying JS ones. (Note that seamless-immutable also enforces immutability by using `Object.freeze` in development)
- jasim 11y ago
  Thanks for the helpful reply, much appreciated.
- baddox 11y ago
  It's worth mentioning that the ES6 array spread operator provides similar functionality: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#A_more_powerful_array_literal https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... The object spread operator (proposed in ES7) is essentially syntactic sugar for Object.assign: https://github.com/sebmarkbage/ecmascript-rest-spread https://github.com/sebmarkbage/ecmascript-rest-spread https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... I've even used jQuery's extend in legacy projects: https://api.jquery.com/jquery.extend/ https://api.jquery.com/jquery.extend/
dustingetz 11y ago
I am the author of react-cursor, which abstracts over the react immutability helpers[1], which I have used in four large projects. It scales great and I recommend it over full-on action-store-dispatcher flux (redux and the rest) for almost all projects except the very largest (like multiple frontend teams). Action-store-dispatcher is less direct and has an abstraction tax compared to just connecting views to state directly. A React.js lead even just wrote on twitter [2], "Starting to see a trend of premature fluxing of react apps. Try plain @reactjs first and bring in flux only when you absolutely need it." Here's a screenshot of a pretty big project that scaled great with cursors: http://curator-lilita-10664.bitballoon.com/work-area-metadata.png http://curator-lilita-10664.bitballoon.com/work-area-metadat.... We had all sorts of complexity scaling problems while building this, but none of them were due to state management, migrating to cursors made 99% of pain due to complicated ui state go away. [1] https://github.com/dustingetz/react-cursor https://github.com/dustingetz/react-cursor [2] https://twitter.com/floydophone/status/649786438330945536 https://twitter.com/floydophone/status/649786438330945536

by jasim 11y ago

jlongster 11y ago

Those helpers are basically the equivalent of seamless-immutable, which uses native JS objects but updates them by copying. You make the exact same tradeoffs as if you chose it over Immutable.js. Comparing those two libs represents the choice of either persistent data structures or copying JS ones. (Note that seamless-immutable also enforces immutability by using `Object.freeze` in development)

jasim 11y ago
Thanks for the helpful reply, much appreciated.
baddox 11y ago
It's worth mentioning that the ES6 array spread operator provides similar functionality: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#A_more_powerful_array_literal https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... The object spread operator (proposed in ES7) is essentially syntactic sugar for Object.assign: https://github.com/sebmarkbage/ecmascript-rest-spread https://github.com/sebmarkbage/ecmascript-rest-spread https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... I've even used jQuery's extend in legacy projects: https://api.jquery.com/jquery.extend/ https://api.jquery.com/jquery.extend/

dustingetz 11y ago

I am the author of react-cursor, which abstracts over the react immutability helpers[1], which I have used in four large projects. It scales great and I recommend it over full-on action-store-dispatcher flux (redux and the rest) for almost all projects except the very largest (like multiple frontend teams). Action-store-dispatcher is less direct and has an abstraction tax compared to just connecting views to state directly. A React.js lead even just wrote on twitter [2], "Starting to see a trend of premature fluxing of react apps. Try plain @reactjs first and bring in flux only when you absolutely need it." Here's a screenshot of a pretty big project that scaled great with cursors: http://curator-lilita-10664.bitballoon.com/work-area-metadata.png http://curator-lilita-10664.bitballoon.com/work-area-metadat.... We had all sorts of complexity scaling problems while building this, but none of them were due to state management, migrating to cursors made 99% of pain due to complicated ui state go away. [1] https://github.com/dustingetz/react-cursor https://github.com/dustingetz/react-cursor [2] https://twitter.com/floydophone/status/649786438330945536 https://twitter.com/floydophone/status/649786438330945536