Collaboration in Thimble (formerly Thimble and Remote Mentorship)

One of the most requested feature in thimble is collaboration. Since the major audience of thimble includes educators, allowing multiple users to collaborate on a session in real time is an important use case for Thimble.

The need for the feature became more and more apparent when we started interacting with educators to understand the feature they might like to see in Thimble.

Fig: A discussion on the need of Collaboration on an open issue

To provide educators with the best possible set of tools for a collaborative learning session was one of the major goals of this project.

I took up this project as a part of my Google Summer of Code internship program. Summer of code is a great initiative for students to work with open source organizations and write impactful code for the open source community. Mozilla has been the pioneer in promoting open standards on the internet, and I was obliged to take up this project for the summer.

Here’s the workflow of events that happened over the course of three months:

Initiation (TogetherJS / Y-JS / Web sockets / WebRTC)
The first step was to decide what library we would use for transmission of events in a session. There were a few options to choose from. Togetherjs, one of Mozilla’s open source project for Collaboration was one of our first choices. It is well tested, has a wrapper to chat with peers, also has a wrapper for syncing Codemirror instances (which is what the editor in Thimble is based on) and also supports operational transformation for the same.
Another choice which the Thimble community investigated was Y-js, which is an awesome library for Collaboration across a lot of editors.
However, after some research and prototypes on these two libraries, it became clear that they would hinder development later on, since we didn’t only want to sync codemirror instances, but the whole filesystem underneath.
We narrowed down to using WebRTC (simplewebrtc, a wrapper around it, to be specific) for transmission of events and ended up writing the wrappers for interpreting codemirror events ourself. WebRTC also had the added advantage of being peer to peer

Speeding up (Code Code Code)
After deciding the library, we moved to writing the actual code. The major features to be worked on were Collaborative editor

1. Syncing the file system
2. Sending files in case I add a new one (images/pdf’s etc)
3. Adding/Deleting/Renaming a file
4. Initializing the file system

Testing and high level stuff
Right now, the state of the collaboration branch supports a good level of collaboration. Files are synced across the file system and the editors, clients can be invited with a unique room id to collaborate on a project on brackets.
We are looking into ways to add operational transformation to the same to make sure we’re 100% synced at all times, and the system handles collisions as well.
You can test out a hosted demo here. With this project, we have made brackets a collaborative editor, and our focus will be on shifting the same to Thimble.

Right now the state of the collaboration branch is as follows:

https://github.com/mozilla/brackets/compare/890d5b56eac4a7f4ab8168030b8f5351fe85d9bc...collaboration