How does Repl.it render Turtle graphics? (i.e., I am pretty sure graphics are rendered on a server and somehow sent back to the client, but I want to know more about how its done.)
Why: I am developing an in-browser editor (GitHub - uclaacm/TeachLAFrontend: 🌱the frontend for Teach LA's online IDE, designed to teach kids how to code!) as part of ACM’s UCLA branch, and our in-house editor is used by our teaching teams at ACM. I have made a short blogpost documenting my observations (mzchael.com).
Any help is appreciated!
I am not an expert on replit’s infrastructure, but I will tell you what I know (not much into details). It’s more of a basic overview.
The basics: the output is displayed in an Output tab (which I couldn’t find documentation on), and is obviously different from a Webview tab. It is used for graphics, for local graphics like pygame and turtle. Obviously, the code is run on a server and sent to the client.
This output relies on a separate domain (id.repl.co I think). Schools often block this domain to prevent proxies from being used. With the firewalled output alternative domain, the firewalled repls can’t access the internet so there is no risk of proxies.
Repls run on some sort of sandboxed Ubuntu virtual machine. They use Nix for system dependency management (but this is mostly irrelevant for Turtle).
The SO post you saw says that replit uses x11vnc, this is probably the most useful thing to explore. So, the code is run on the server and a window is created there by the user’s program, which is then streamed to the browser via a separate domain. Of course, x11vnc also supports user input for the window, which includes manipulating the window. Generally, the “monitor size” or max resolution seen by the program is the size of the canvas pane, which may change, so fullscreen works well here.
Currently in replit, when a graphics program ends, the output is cleared to black (which is not good).
id.repl.co is also used for normal webviews in editor, just never displayed.