search

mizzao / meteor-sharejs

Meteor smart package for transparently adding ShareJS editors to an app
MIT License
225 stars 53 forks source link

Alternative package for ShareDB and Meteor #89

Open houshuang opened 7 years ago

houshuang commented 7 years ago

Hi,

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, and we were very inspired by this repository. 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. It is trivial to add this to a Meteor app (just add two lines to server.js). 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.

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 https://github.com/chili-epfl/FROG/blob/develop/frog/server/share-db-manager.js

the data functions that manipulate a JSON object, just a wrapping over ot-json0 ops https://github.com/chili-epfl/FROG/blob/develop/frog/imports/api/generateReactiveFn.js

a React higher-order component which wraps a component and lets it receive live-updating ShareDB data https://github.com/chili-epfl/FROG/blob/develop/frog/imports/ui/StudentView/ReactiveHOC.jsx

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. https://github.com/chili-epfl/FROG/blob/develop/ac/ac-chat/src/Chat.jsx

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

DavidSichau commented 6 years ago

Very nice, thanks for sharing it.