I have designed 2 web based code playgrounds that you may find interesting.
https://try.gambitscheme.org is a playground for the Scheme language (specifically Gambit Scheme). It has a REPL and a code editor that saves files in the browser local storage. It also has a tutorial for learning the basics of Scheme.
https://codeboot.org is a playground for Python (there's an old version that supports JavaScript and we may resurrect it at some point). It was specifically designed as a simple IDE to teach programming to beginners and is in use at the Université de Montréal. Aside from the simple and intuitive UI, it has two important features for teaching:
1) Fine granularity single-stepping of Python code to help teach students how the computer goes about executing the code. It displays a bubble containing the variables in scope and their values.
2) It can bundle programs and the current state of execution in a URL that can be embedded in documents (HTML, PDF, PowerPoint, Keynote, etc) so that coding examples can be executed by the students in a single click. It also allows students to create simple web apps that require no installation and can easily be shared with others (because the URL contains all the relevant code of the app). You will find examples of this feature on the following pages:
I have played a bit with Pyodide and it is very promising for client-side web programming, particularly because of the philosophy similarities between Python and JavaScript, which make interaction more seamless.
Being interpreted is a hindrance, though: The interpreter itself is at least a few megabytes in size, constraining wider usability (IMO).
I'm enthusiastically waiting for solutions to "compile" Python code to WASM, instead of running it with a WASM-compiled interpreter. LPython[0] promises so, but it's still in alpha stage.
I guess you can prepare the necessary packages and mount them in the WASI file system for the Python binary (WASI allows this). Then you can import these packages in your Python code.
If I may be forgiven for asking, what about web app playgrounds? Does anyone know a good solution for embedding whole sandboxed products for demonstration purposes?
Of course if you’d rather build your own less functional copy from scratch in order to waste several months and avoid shipping, I have some colleagues you might enjoy working with.
The motivation was initially to build interactive documentation where you could play with the code examples and see how they change things, but it's being used to demonstrate plugins on the WordPress directory, build staging sites, add no-risk places to experiment.
Surprisingly has been taking over some of the native development tools because it provides a sandboxed and isolated environment that needs no other dependencies and leaves no junk on your computer once it's done. It's trivial to change the PHP version being run (making testing on different version of PHP easy) by adding `--php 5.6`, for example, which is something a bit gnarly to do otherwise unless running PHP inside Docker.
Another surprise is that once loaded, it runs very fast, faster than native PHP and MySQL (the Playground can connect to MySQL but runs sqlite by default). I attribute this to having everything in memory and bypassing the filesystem.
It's been the kind of project that only gets better the more it's used. It turns out that having a no-setup, no-trace, isolated, risk-free app playground is an incredible tool for more purposes than we first realize. Someone even put the Playground inside an iOS app and it runs smoother than the native WordPress app.
As for a good solution? Just a lot of work I guess but WASM is critical to it. Any device or platform that supports JavaScript can run the sandbox/playground app: VSCode, `node` itself, a browser, a mobile device…
> There is also Kohei Tokunaga's container2wasm initiative8, which converts arbitrary Docker images into WASI binaries. It looks promising, but it generates 100+ MB binaries for even the smallest Alpine-based images.
NixOS produces smaller containers, from around 10mb.
Readit News
https://try.gambitscheme.org is a playground for the Scheme language (specifically Gambit Scheme). It has a REPL and a code editor that saves files in the browser local storage. It also has a tutorial for learning the basics of Scheme.
https://codeboot.org is a playground for Python (there's an old version that supports JavaScript and we may resurrect it at some point). It was specifically designed as a simple IDE to teach programming to beginners and is in use at the Université de Montréal. Aside from the simple and intuitive UI, it has two important features for teaching:
1) Fine granularity single-stepping of Python code to help teach students how the computer goes about executing the code. It displays a bubble containing the variables in scope and their values.
2) It can bundle programs and the current state of execution in a URL that can be embedded in documents (HTML, PDF, PowerPoint, Keynote, etc) so that coding examples can be executed by the students in a single click. It also allows students to create simple web apps that require no installation and can easily be shared with others (because the URL contains all the relevant code of the app). You will find examples of this feature on the following pages:
https://codeboot-org.github.io/presentations/
https://codeboot-org.github.io/cegep/ (in french, but just click on the images)
Being interpreted is a hindrance, though: The interpreter itself is at least a few megabytes in size, constraining wider usability (IMO).
I'm enthusiastically waiting for solutions to "compile" Python code to WASM, instead of running it with a WASM-compiled interpreter. LPython[0] promises so, but it's still in alpha stage.
[0] https://lpython.org/
This kind of defeats the idea of interactive code snippets in the docs (but might still be useful in other use cases).
One thing I like about pyodide is that it supports lots of packages like numpy. How would you support packages like this with a WASI approach?
I haven't tried this though :)
Of course if you’d rather build your own less functional copy from scratch in order to waste several months and avoid shipping, I have some colleagues you might enjoy working with.
https://playground.wordpress.net
The motivation was initially to build interactive documentation where you could play with the code examples and see how they change things, but it's being used to demonstrate plugins on the WordPress directory, build staging sites, add no-risk places to experiment.
Surprisingly has been taking over some of the native development tools because it provides a sandboxed and isolated environment that needs no other dependencies and leaves no junk on your computer once it's done. It's trivial to change the PHP version being run (making testing on different version of PHP easy) by adding `--php 5.6`, for example, which is something a bit gnarly to do otherwise unless running PHP inside Docker.
Another surprise is that once loaded, it runs very fast, faster than native PHP and MySQL (the Playground can connect to MySQL but runs sqlite by default). I attribute this to having everything in memory and bypassing the filesystem.
It's been the kind of project that only gets better the more it's used. It turns out that having a no-setup, no-trace, isolated, risk-free app playground is an incredible tool for more purposes than we first realize. Someone even put the Playground inside an iOS app and it runs smoother than the native WordPress app.
As for a good solution? Just a lot of work I guess but WASM is critical to it. Any device or platform that supports JavaScript can run the sandbox/playground app: VSCode, `node` itself, a browser, a mobile device…
NixOS produces smaller containers, from around 10mb.
https://yazz.com/