Om but in javascript

by

Edit July 2015: currently the most promising framework based on immutability is Redux! take a look! It does not use cursors like Om (neither Om Next does not use cursors).

Cursors are not really scalable, despite using CQRS principles described below, it still creates too much boilerplate in components, that is hard to maintain, and add friction when you want to move components around in an existing app.

Also, it’s not clear for many devs on when to use and not use cursors, and I see devs using cursors in place they should not be used, making the components less reusable that components taking simple props.

Redux uses connect(), and clearly explains when to use it (container components), and when not to (stateless/reusable components). It solves the boilerplate problem of passing down cursors down the tree, and performs greatly without too much compromises.

I’ve written about drawbacks of not using connect() here

Despite not using cursors anymore, most parts of my answer remains valid IMHO

I have done it myself in our startup internal framework atom-react

Some alternatives in JS are Morearty, React-cursors, Omniscient or Baobab

At that time there was no immutable-js yet and I didn’t do the migration, still using plain JS objects (frozen).

I don’t think using a persistent data structures lib is really required unless you have very large lists that you modify/copy often. You could use these projects when you notice performance problems as an optimization but it does not seem to be required to implement the Om’s concepts to leverage shouldComponentUpdate. One thing that can be interesting is the part of immutable-js about batching mutations. But anyway I still think it’s optimization and is not a core prerequisite to have very decent performances with React using Om’s concepts.

You can find our opensource code here:

It has the concept of a Clojurescript Atom which is a swappable reference to an immutable object (frozen with DeepFreeze). It also has the concept of transaction, in case you want multiple parts of the state to be updated atomically. And you can listen to the Atom changes (end of transaction) to trigger the React rendering.

It has the concept of cursor, like in Om (like a functional lens). It permits for components to be able to render the state, but also modify it easily. This is handy for forms as you can link to cursors directly for 2-way data binding:

<input type="text" valueLink={this.linkCursor(myCursor)}/>

It has the concept of pure render, optimized out of the box, like in Om

Differences with Om:

  • No local state (this.setState(o) forbidden)

In Atom-React components, you can’t have a local component state. All the state is stored outside of React. Unless you have integration needs of existing Js libraries (you can still use regular React classes), you store all the state in the Atom (even for async/loading values) and the whole app rerenders itself from the main React component. React is then just a templating engine, very efficient, that transform a JSON state into DOM. I find this very handy because I can log the current Atom state on every render, and then debugging the rendering code is so easy. Thanks to out of the box shouldComponentUpdate it is fast enough, that I can even rerender the full app whenever an user press a new keyboard key on a text input, or hover a button with a mouse. Even on a mobile phone!

  • Opinionated way to manage state (inspired by CQRS/EventSourcing and Flux)

Atom-React have a very opinionated way to manage the state inspired by Flux and CQRS. Once you have all your state outside of React, and you have an efficient way to transform that JSON state to DOM, you will find out that the remaining difficulty is to manage your JSON state.

Some of these difficulties encountered are:

  1. How to handle asynchronous values
  2. How to handle visual effects requiring DOM changes (mouse hover or focus for exemple)
  3. How to organise your state so that it scales on a large team
  4. Where to fire the ajax requests.

So I end up with the notion of Store, inspired by the Facebook Flux architecture.
The point is that I really dislike the fact that a Flux store can actually depend on another, requiring to orchestrate actions through a complex dispatcher. And you end up having to understand the state of multiple stores to be able to render them.

In Atom-React, the Store is just a “reserved namespace” inside the state hold by the Atom.

So I prefer all stores to be updated from an event stream of what happened in the application. Each store is independant, and does not access the data of other stores (exactly like in a CQRS architecture, where components receive exactly the same events, are hosted in different machines, and manage their own state like they want to). This makes it easier to maintain as when you are developping a new component you just have to understand only the state of one store. This somehow leads to data duplication because now multiple stores may have to keep the same data in some cases (for exemple, on a SPA, it is probable you want the current user id in many places of your app). But if 2 stores put the same object in their state (coming from an event) this actually does not consume any additional data as this is still 1 object, referenced twice in the 2 different stores.

To understand the reasons behind this choice, you can read blog posts of CQRS leader Udi Dahan,The Fallacy Of ReUse and others about Autonomous Components.

So, a store is just a piece of code that receive events and updates its namespaced state in the Atom.

This moves the complexity of state management to another layer. Now the hardest is to define with precision which are your application events.

Note that this project is still very unstable and undocumented/not well tested. But we already use it here with great success. If you want to discuss about it or contribute, you can reach me on IRC: Sebastien-L in #reactjs.

This is what it feels to develop a SPA with this framework. Everytime it is rendered, with debug mode, you have:

  • The time it took to transform the JSON to Virtual DOM and apply it to the real DOM.
  • The state logged to help you debug your app
  • Wasted time thanks to React.addons.Perf
  • A path diff compared to previous state to easily know what has changed

Check this screenshot:

enter image description here

Some advantages that this kind of framework can bring that I have not explored so much yet:

  • You really have undo/redo built in (this worked out of the box in my real production app, not just a TodoMVC). However IMHO most of actions in many apps are actually producing side effects on a server, so it does not always make sens to reverse the UI to a previous state, as the previous state would be stale

  • You can record state snapshots, and load them in another browser. CircleCI has shown this in action on this video

  • You can record “videos” of user sessions in JSON format, send them to your backend server for debug or replay the video. You can live stream an user session to another browser for user assistance (or spying to check live UX behavior of your users). Sending states can be quite expensive but probably formats like Avro can help. Or if your app event stream is serializable you can simply stream those events. I already implemented that easily in the framework and it works in my production app (just for fun, it does not transmit anything to the backend yet)

  • Time traveling debugging ca be made possible like in ELM

I’ve made a video of the “record user session in JSON” feature for those interested.

More Related Contents:

  1. Is there a “Best Practices” on designing an application written both in React and React-Native?
  2. Programmatically navigate using React router
  3. My React Component is rendering twice because of Strict Mode
  4. How to set one component’s state from another component in React
  5. Template not provided using create-react-app
  6. Is it possible to use if…else… statement in React render function?
  7. Component does not remount when route parameters change
  8. How to cancel a fetch on componentWillUnmount
  9. React.createElement: type is invalid — expected a string
  10. What is use of curly braces in an ES6 import statement?
  11. Handling async request with React, Redux and Axios?
  12. react setState with dynamic key
  13. Sending the bearer token with axios
  14. Remove console.logs with Webpack & Uglify
  15. How do I custom style the underline of Material-UI without using theme?
  16. react-router vs react-router-dom, when to use one or the other?
  17. Reactjs: Unexpected token ‘
  18. React – the right way to pass form element state to sibling/parent elements?
  19. Warning: It looks like you’re using the development build of the Firebase JS SDK
  20. Pass multiple parameters to event handlers in React
  21. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  22. How to minimize the size of webpack’s bundle?
  23. How to enable file upload on React’s Material UI simple input?
  24. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  25. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  26. How to bundle a React app to a subdirectory on a server?
  27. How to test Async Storage with Jest?
  28. Children won’t render when using a layout in ReactJS
  29. How do I window removeEventListener using React useEffect
  30. Cannot find module ‘sass’

Leave a Comment