Wednesday, May 7, 2014: Quick and Dirty Real-time Collaborative Coding Development Environment with code.stypi.com

I have to work on a very small C++ project with my friends, so I want to edit my code like Google Docs.

code.stypi.com provides a real-time collaborative code editor, like Etherpad or Google Docs, but it only supports editing a single file. So some quick and dirty script must be used to enable quick development and testing cycle.

The Nature of the Project

Of course, this approach does not apply in all projects, so here’s some background on the project.

• It’s only a small group assignment. We don’t need permanent storage; just a way to collaborate.
• It consists of only a few C++ source files, no images or binary files.
• I develop on Linux while my friends use Windows.
• It’s a group assignment for the real-time systems engineering course. We have to create simulation using OMNeT++.

Let’s consider the alternatives first, and why we did not use it

Dropbox / Google Drive

• No real-time editing. Must save the file in order for it to synchronize.
• When we edit the same file, Dropbox just marks it as conflict and adds conflicted versions to the Dropbox.
• Binaries (for different platforms) gets added to the Dropbox and synchronized all over. No way to ignore certain files.

GitHub

• Not real-time.
• Too slow cycle: have to save, commit, push, pull, merge.

Nitrous.io / Cloud9 / Koding

• Creating a full-fledged project with a virtual machine and getting my friends to create an account on sites like Nitrous.io, Cloud9 or Koding just for a quick bootstrapping of a project seems to be an overkill.
• I want something more lightweight.
• Cloud9’s collaboration feature is too laggy.
• Koding is too buggy (as of writing).

Etherpad

• No syntax highlighting.

(If you know of a better solution, please leave a comment. Thanks!)

How about Stypi?

code.stypi.com is a real-time collaboration platform.

• It lets you collaborate on writing code. It is usually used for online interviewing.
• It supports syntax highlighting and has a configurable tab size.
• You don’t have to sign in; you can work anonymously.
• It also allows you to access the raw contents. So you can quickly download the code and build them with a quick and dirty script.

The Workflow

1. Collaborate the code on Stypi.
2. Run a script to download the code from Stypi, builds, and test it.
3. Repeat.

Seems simple, right?

Overcoming Single File Limitation

Since Stypi does not have tabs or support multiple files, we decided to work on a single page, and then let the build script split it into multiple files. The convention used is this:

/*FILE file1.h*/
(contents of file1.h)

/*FILE file1.cc*/
(contents of file1.cc)

/*FILE main.cc*/
#include "file1.h"
int main(int argc, char **argv) {
  stuff();
  return 0;
}

Getting the Raw Link

If your Stypi is here:

https://code.stypi.com/lg1ervbj

You can access the raw contents using this URL:

https://code.stypi.com/raw/lg1ervbj

The Download Script

First, I want a script that fetches the code from Stypi and spit out to multiple files.

So I put this into Stypi:

/*FILE download.rb*/
require 'open-uri'

puts "Downloading File:"

code = open('https://code.stypi.com/raw/lg1ervbj').read
code.split(/\/\*FILE ([a-z0-9]+\.[a-z0-9]+)\*\//i).drop(1).each_slice(2) do |file_name, contents|
  puts " ==> #{file_name}"
  File.write(file_name, contents)
end

It simply fetches the code, and uses a regular expression to split it into many files.

Here’s how it now looks like:

This Stypi page contains the code for many files. Each file is identified by a special comment.

Bootstrapping

Next thing, I have to tell my friends to download and install Ruby, MingW and MSYS. Then, I tell them to manually copy the code for download.rb into a new file in a new directory, and then run ruby download.rb.

If all goes well, all files should be downloaded:

After running ruby download.rb, all files (including download.rb itself) have been download.

Building

Since the download script is finished, we can now make a build script!

/*FILE build.sh*/
set -e
g++ file1.cc main.cc

/*FILE test.sh*/
set -e
if [ -e a.out ]; then
  ./a.out
else
  ./a.exe
fi

/*FILE run.sh*/
set -e
ruby download.rb
bash build.sh
bash test.sh

Three files:

• build.sh compiles the source code.
• test.sh runs the compiled code.
• run.sh re-downloads the code, compiles, and runs.

I then told my friends to run ruby download.sh again. It now downloads the required build script.

They can now type bash run.sh to re-download the code, compile, and run it.

Enjoy the Collaboration

Now we can enjoy collaborating on this small project. When we make a change, we can just type bash run.sh to test it.