Collaboratively editable forms, and other stuff - ShareDB + Meteor

[houshuang]

Hi all,

As part of our project to build a Meteor platform for authoring collaborative learning exercises FROG, we had the need to embed collaborative editing deeply, including simple text, rich text, and even collaboratively editable forms - we use react-jsonschema-forms very extensively in our tool, and wanted to see if we could make these collaboratively editable.

We had a student (Dario Anongba) work with us for one semester on this project. Initially we wanted him to look at embedding ShareDB into Meteor, inspired by the work of mizzao. As his work progressed, we realized we could release a pure JS package, instead of a Meteor package, with React components that make it extremely easy to begin using ShareDB, including a simple textarea, the Quill editor, and most interesting, react-jsonschema-form (RJF). RJF is a tool made by Mozilla which can generate very complex forms based on a simple JSON object specification. Our package supports most of the RJF functionality, and let’s you easily construct a form with multiple text fields, checkboxes, select menus etc, which are all synced to a ShareDB collection, maintaining cursor position for the text fields, etc.

We published the work in the package collab-react-components. We hope this would be useful to the community, and would love feedback about the API design, the implementation etc. . He also had some early work on coordinating between ShareDB collections and Mongo collections, which can be found here, but in the end we decided to go towards a pure JS package, because we will not need this kind of one-to-one mapping in our Meteor app anyway. Adding this to a Meteor app is as simple as dropping two lines in server.js, and using the components in the client imports.

We’d also like to express our gratitude to the authors of Meteor and the community, it’s an amazing platform to develop on.

One final thing that you might find interesting is the way we handle shared data between learning activities. The idea is that learning activities are pluggable NPM packages, which should not know anything about Meteor or database structure etc. Instead, they export React components, which receive as props data, an arbitrarily complex JSON object, and dataFn, a collection of functions to operate on the data structure. In the background, all the synchronization is done with ShareDB at ot-json0, and it works really well. Our platform is in rapid development, but if you’re interested, the main files to look at are

• managing the ShareDB server, and automatically generating new collections based on templates

• the data functions that manipulate a JSON object, just a wrapping over ot-json0 ops

• a React higher-order component which wraps a component and lets it receive live-updating ShareDB data

• an example activity - a fully fledged chat, which live-updates, in 30 not very dense lines (imagine that the groups are split into groups, which generates different collections, so that you will have multiple chat “rooms” at the same time). The beauty is that there is nothing in all the files above specific to chat, and the same thing works just as well for our other activities.

Would love to keep in touch with anyone using ShareDB for interesting stuff, or using Meteor for synchronous collaboration etc.

best

Stian
CHILI - EPFL

[efrancis]

This is really cool! I’ve been building a collaborative editor in Meteor on-and-off for awhile now based off of the ProseMirror editor. The project is here but still not done yet. It uses a service-discovery solution at the application level using this architecture, because sessions of documents are kept in memory and clients have to find the server with the right session for their document, connect to it, and keep themselves up to date and handle conflict resolution, then the in-memory document on the server is written to db on a set interval.

Is your server-side entirely on Meteor? Or are you running separate ShareDB servers just for the collaboration?

[houshuang]

Hi,

great, will definitely check out your tool and architecture. Right now, we’re just using the standard ShareDB server, although it’s launched as a library from ./server.js by Meteor, so we are not running a separate process. However, it does open a separate websocket to Meteor’s DDP connection.

I think it would be possible to multiplex it over DDP, by using Method.calls to submitOps, and then applying them server-side. To receive the ops back to the client, one way would be to create a Meteor collection not synced to the database ({connection: none}) for each document, and have the client subscribe to it… However, not sure the added complexity is worth avoiding two websocket connections.