CodeSandbox Live – Real-time code collaboration in the browser

https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9

by bpierre • 8 years ago

31 16 8 years ago

medium.com

CompuIves8• 8 years ago

Hey everyone! I'm the author of this post, I'll be here to answer any questions.

zhs• 8 years ago

Huge fan of CodeSandbox! Out of curiosity what approach did you use to handle real-time collaboration on the backend?

CompuIves8• 8 years ago

Thank you! Our backend server is an Elixir (Phoenix) server. It has a separate Elixir process for every current live room, we store all state in Redis. So in case we do a rolling deploy we won't drop any connections and continue where we stopped.

The server is mostly responsible for keeping all room state (the editors, the owner, operations per module) and transforming operations. When an operation comes in at the server, like an insertion, the server will check what revision that operation is at and transform it accordingly if the sent operation is based on outdated code. Then that operation will be broadcasted to the clients and again transformed on the clients to handle any inconsistency.

The library we use for doing the transformations is called ot_ex.

I hope this quick view is clearly written, let me know if there are any other questions!

Lerc3• 8 years ago

Ok a couple of things.

1) This is awesome.

2) /s/vanilla doesn't work on .stream but does on .io

3) in the live text "To share your sandbox for real time collaboration you need to be a CodeSandbox Patron." you don't specify if all collaborators need to be patrons or not. I assume not, but best to make that clear.

4) I retrofitted the default React template into my standard first project when I teach JavaScript. https://codesandbox.stream/s/xvw9p3z0k4 It works on every second reload. Also, can I turn off the react voodoo live update thing? [edit: found the last bit in sandbox.config.json]

CompuIves8• 8 years ago

1) Thank you!

2) Ah that's really stupid of me, `.stream` was our staging server. I should mention this somewhere, codesandbox.io should have the latest version with live.

3) Good one! I'll update it.

4) That's a super nice sandbox, I love tutorials that use gameplay, makes it much more fun to learn. I'd move it to the io domain, because our stream database is horribly outdated. I'll add a redirect from stream soon to avoid confusion.

somebee• 8 years ago

Always impressed by your incredible pace of development! Congrats!

CompuIves8• 8 years ago

Thank you very much! I appreciate it.

timdorr2• 8 years ago

How long did this take to build?

I'm impressed that you can build and ship this with a small team and short time, whereas the VS Code and Atom teams are still in beta with their live coding features. I understand scope and scale are very different, but this is a great accomplishment!

CompuIves8• 8 years ago

Thank you very much! It was definitely one of the most fun features to build.

I started working on this on March 15th, and the past few days was about testing everything, preparing the release and squashing bugs. The advantage of this type of functionality is that there are tons of high quality papers and articles already written on the subject, especially this one helped me a lot: http://www.codecommit.com/blog/java/understanding-and-applyi.... There were a lot of sleepless nights involved too.

I'm not sure about the VS Code and Atom teams, but I imagine that there are more constraints and there is more functionality to implement since they work with hundreds of potentially big files. I think those factors make it harder to implement this functionality than in the case of CodeSandbox.

timdorr2• 8 years ago

Holy shit, you built this in 10 days?!?!

CodeSandbox Live – Real-time code collaboration in the browser

Related Stories