crepl: Atom sync, share code and state

11 Feb 2017

With crepl you can write and run ClojureScript together. Any changes to the code are synced to everybody instantly. Something like Google Docs for ClojureScript. You can also use nice libraries such as Reagent to make your own UI. An example of making UI's in crepl is in this blog post. However, anything you do in the UI, such as clicking a button, would not be synced to everybody else. Because of this the collaborative features for crepl where limited to code. But crepl now has a solution for this:

Crepl now has a "Atom sync" that keeps both your code and state in sync and changes will show up instantly for everybody!

Atom sync

Atom sync keeps your code and your state for your Reagent UI in sync. To use atom sync you need to replace the single reagent.core/atom for the UI state with a crepl.atom-sync/atom-sync in your Reagent app in crepl.

Atom sync in action:

How it works

Atom sync is a two-way connection between your code and your state atom. When the state atom changes, for instance by a UI action, the content of the atom is put in the code. When the content of the atom is changed in code, the actual state atom is updated. Because crepl already keeps the code in sync for everybody, this keeps the state in sync as well.

Atom sync can also sync plain ClojureScript atoms, when you are not using Reagent.

Alternatives

As an alternative to atom sync you can use some other form of shared state that is accessible through ClojureScript. Things like Firebase, Parse, RethinkDB/Horizon or maybe even Datomic Client or perhaps a Google Spreadsheet.

Try the demo yourself:

The code from the Tic-Tac-Toe game from the demo video above is here. You can load it in your own crepl by running this code:

(require 'crepl.tools)

(crepl.tools/import-from-url! "https://gist.githubusercontent.com/thegeez/15913d9fce7698738697fe58ee4e8a94/raw/98e91842b45f8f2620599e473a9e0f5d95943f7b/crepl_tic-tac-toe.clj")

Try crepl here: crepl.thegeez.net