CodeSandbox Live – Real-time code collaboration in the browser
medium.com
medium.com
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!
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.
Maybe March last year.
And if you really want to make sure, we're open source: https://github.com/CompuIves/codesandbox-client.
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!
Also thanks for this writeup. You recently migrated your servers to Kubernetes, right? What learning resources would you recommend for deploying a Phoenix app to k8?
If it is too time consuming to answer my questions, don't worry. The most important part of this message is thank you for building codesandbox. It makes the web a better place.
I learned most from the official Kubernetes tutorials (https://kubernetes.io/docs/tutorials/). I also used mix_docker (https://github.com/Recruitee/mix_docker) as a reference on how to build the image. The advantage of Kubernetes is that you can have the same way to deploy for all servers, so if you learn how Kubernetes deploys you automatically know how to deploy Phoenix applications.
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]
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.
https://codesandbox.stream/docs/configuration#configuration-...