July 8, 2014

Om dev component

I play with React and Om since 3 monthes now and everyday I discover new feature/usecase that I didn’t even think about before starting.

I made 2 small personnal apps in React and an other bigger one in Om for my family. The Om one is a Cordova mobile app that manage our tv shows and subtitles. One of the cool thing that Om allow me to do is to save my app state in localStorage (3 lines of code) so I don’t have to think about persistence. Doing so, I figured out that it also allow us to comeback to the same state of the app, as if we never actually left or killed it and that’s a pleasant feeling.

After reading time travel post from David Nolen and playing with Goya, I really wanted to find a project to implement the undo/redo.
That’s when I discover that even if I don’t need it for my users, I surely need it for my developement.

I think it would be really nice to have a dev component that helps us with things we are stupidly used too in our workflows.

State history navigation or undo/redo is one of them but we could have more.
What about:

State snapshot in localstorage so you can go to the desired state every time you refresh your page instead of wasting 5 clicks to find the state you are interested in for your current dev.
GoTo state input so you can have a coworker that found a bug in a specific state and share it with you.
Pretty print state, mostly to use with the previous one as we already have some developer tools like the React dev tool in chrome.

Thanks to the Single, Simple and Observable State pattern, we can develop this features in simple steps.

Thanks to Om, :instrument and :tx-listen, I’m able to make a non intrusive dev component that does not require any change for the “managed” component and provide everything we need.

So far, it’s just a wrapper function around om/root.

(omdev/dev-component my-component
    (atom {:text "Instrument!"
           :list [{:text "Milk"} {:text "Cookies"} {:text "Applesss"}]})
    {:target (.getElementById js/document "app")
     :tx-listen (fn [tx-data root-cursor]
                  (println "listener 1: " tx-data))})

That will add this UI at the bottom of the page

See it in action http://iorekz.github.io/

Extra thoughts

While developing those features, I realized it would be nice to have some of them in production : How usefull would it be if, for every javascript error, we send the user state history (maybe interleaved with user events/call-stack) to our servers. It would be really easy to debug and then re-run this history with the debugged code in order to make sure it solved the problem.
We can even use those data to automatically write a test/regression-test that looks like:

initialState -> [events] -> finalState.

Here is the git repository om-dev-component.

It’s my second clojure/clojurescript project so any comment (from style convention to frequent mistakes) would be well received.

Contact me or offer me a job with the bottom “say hello” section :p

Kudos