CodeSandbox Live – Real-time code collaboration in the browser(medium.com)
medium.com
CodeSandbox Live – Real-time code collaboration in the browser
https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9
3 comments
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.
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.
Holy shit, you built this in 10 days?!?!
Evidently not https://codesandbox.stream/changelog/
Maybe March last year.
Maybe March last year.
Ah, I always forget to keep that page up to date. I'm sorry for that. Since CodeSandbox 2.5 we got some new things, like Parcel support, Typescript configuration support and some other things. I'll make sure to keep that page more up to date.
And if you really want to make sure, we're open source: https://github.com/CompuIves/codesandbox-client.
And if you really want to make sure, we're open source: https://github.com/CompuIves/codesandbox-client.
Hey everyone! I'm the author of this post, I'll be here to answer any questions.
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]
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]
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.
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.
I moved the sandbox to here: https://codesandbox.io/s/3rrq6yx9v1. I'm also curious, how did you find out about the sandbox.config.json? I feel like it's pretty undocumented by now, we could definitely improve on that.
That bit is actually quite clear and right where I should have looked for it.
https://codesandbox.stream/docs/configuration#configuration-...
https://codesandbox.stream/docs/configuration#configuration-...
Huge fan of CodeSandbox! Out of curiosity what approach did you use to handle real-time collaboration on the backend?
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!
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!
Congrats on shipping something so awesome in so little time!
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.
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.
Thank you! Yeah we moved to Kubernetes yesterday!
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.
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.
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!