4 ms·

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

by CompuIves 9y ago

zhs 9y ago
Huge fan of CodeSandbox! Out of curiosity what approach did you use to handle real-time collaboration on the backend?
- CompuIves 9y 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!
  - spell-slinger 9y ago
    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.
    - CompuIves 9y ago
      Thank you! Yeah we moved to Kubernetes yesterday! I learned most from the official Kubernetes tutorials (https://kubernetes.io/docs/tutorials/ https://kubernetes.io/docs/tutorials/). I also used mix_docker (https://github.com/Recruitee/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.
Lerc 9y 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 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]
- CompuIves 9y 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.
  - CompuIves 9y ago
    I moved the sandbox to here: https://codesandbox.io/s/3rrq6yx9v1 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.
    - Lerc 9y ago
      That bit is actually quite clear and right where I should have looked for it. https://codesandbox.stream/docs/configuration#configuration-files https://codesandbox.stream/docs/configuration#configuration-...

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

zhs 9y ago

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

CompuIves 9y 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!
- spell-slinger 9y ago
  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.
  - CompuIves 9y ago
    Thank you! Yeah we moved to Kubernetes yesterday! I learned most from the official Kubernetes tutorials (https://kubernetes.io/docs/tutorials/ https://kubernetes.io/docs/tutorials/). I also used mix_docker (https://github.com/Recruitee/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.

Lerc 9y 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 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]

CompuIves 9y 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.
- CompuIves 9y ago
  I moved the sandbox to here: https://codesandbox.io/s/3rrq6yx9v1 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.
  - Lerc 9y ago
    That bit is actually quite clear and right where I should have looked for it. https://codesandbox.stream/docs/configuration#configuration-files https://codesandbox.stream/docs/configuration#configuration-...