[OTHER]: Online client-side playground with test runner

[hatemhosny]

What would you like to share?

Great project, thank you!

I want to share with you an online, client-side playground that I have created for the algorithms in this project. It imports code implementations from the repo and runs the tests.

Demo: https://hatemhosny.github.io/thealgorithms-javascript

Code can be edited in the code editor (using Monaco on desktop and CodeMirror6 on mobile). The code runs in the browser (in a sandboxed iframe), with no need for a backend. Test runner is available, which runs the tests in the browser using Jest.

Direct links to a specific algorithm are supported. When a new algorithm is selected from the dropdown menu, the URL querystring parameter algorithm is changed to the selected one. This URL can be shared and the selected algorithm will be loaded by default. e.g. https://hatemhosny.github.io/thealgorithms-javascript/?algorithm=Recursive/Factorial

Clear Links to your project are added (in the project GitHub repo, the deployed page and in imported code) as indicators for the source of the implementations and tests.

The source code for my project can be found here: https://github.com/hatemhosny/thealgorithms-javascript.

This playground is built using LiveCodes, a feature-rich, open-source, client-side code playground that supports 80+ languages/frameworks. The playground is embedded in the page using LiveCodes SDK.

Disclosure: I am the author of LiveCodes.

I'm just letting you know about the project and thanking you for such a great resource. If you think LiveCodes can be useful in the official website or for direct links to run samples in the repo, please let me know. If you want to change the UI of the playground, LiveCodes SDK has a headless mode which can give you full control over the UI, maintaining the ability to communicate with the playground using various SDK methods (e.g. for running code or tests and getting console output and test results). In addition, if you require extra features, I'm open for discussion.

Of course, feel free to close this issue whenever you feel suitable.

Additional information

No response

[appgurueu]

Nice project!

We have a playground on the website already, but it lacks test support.

Would you be interested in integrating your playground / adding test support to the website?

Either way I think we might want to link your playground from the Readme. @TheAlgorithms/javascript_maintainers @TheAlgorithms/website_maintainers thoughts?

[cclauss]

On the Python repo, we use a Microsoft Dev Container and a GitPod.

• https://github.com/TheAlgorithms/Python/tree/master/.devcontainer
• https://gitpod.io/#https://github.com/TheAlgorithms/Python

How does LiveCodes compare with these?

[hatemhosny]

Thank you @appgurueu @cclauss

We have a playground on the website already, but it lacks test support.

I did notice the playground on the website. As you mentioned, it does not currently run tests. In addition, the Monaco editor is not supported in mobile browsers as mentioned in the official website. LiveCodes playground can run tests using Jest, and has good mobile support (on mobile, the default code editor is CodeMirror6 which has great mobile support).

Would you be interested in integrating your playground / adding test support to the website?

Sure, I'd be interested to help integrating that to the website/repo.

On the Python repo, we use a Microsoft Dev Container and a GitPod.

• https://github.com/TheAlgorithms/Python/tree/master/.devcontainer
• https://gitpod.io/#https://github.com/TheAlgorithms/Python

How does LiveCodes compare with these?

LiveCodes is a totally client-side app. It does not need any backend servers. All code processing/compilation (including the 80+ languages/frameworks), code evaluation, and tests run inside the browser. It can be hosted on any static file server or CDN. In addition there is an easy-to-use SDK that allows embedding playgrounds and communicating with them. The SDK is also available as a React component which can make integrating the playground in the website easier.

Please guide how to proceed. Shall I start a PR in the website repo?

[appgurueu]

I'd ask @Panquesito7 for a transfer of this issue to the website repo. After the website maintainers have given their input, you could start working on a follow-up PR.

[hatemhosny]

I have updated the playground to also include all the algorithms in the TypeScript repo.

Demo:
https://hatemhosny.github.io/thealgorithms-javascript/?lang=ts

When running TypeScript algorithms, the playground also allows showing the compiled JavaScript code.

The playground has also been updated to the latest LiveCodes release which updated Jest to latest version (v29.7) and allowed watching for code changes to auto-run tests.

Are the TypeScript repo maintainers the same as here or shall I notify them there?

[appgurueu]

We are the same (@raklaptudirm and me).

[hatemhosny]

@cclauss

This is an initial attempt for Python algorithms: https://hatemhosny.github.io/thealgorithms-python/

LiveCodes runs Python in the browser (with no backend server), including doctest, using Brython. Example: https://livecodes.io/?template=python

Most algorithms and their tests run in the playground, even those that import form the standard library. However, importing external libraries does not work.

LiveCodes supports running Python using Pyodide. Example: https://livecodes.io/?template=pyodide
Pyodide allows importing many scientific libraries. But this is a much larger download.

We can, however, select which "runtime" to use for each algorithm.

Let me know what you think.

[cclauss]

Let's go with Pyodide because we are quite religious about using the very latest version of Python and I tend to upgrade Pyodide and this repo needs a fair amount of scientific Python which as you state is a focus of Pyodide.

[hatemhosny]

Let's go with Pyodide because we are quite religious about using the very latest version of Python and I tend to upgrade Pyodide and this repo needs a fair amount of scientific Python which as you state is a focus of Pyodide.

I have updated the Python playground to use Pyodide: https://hatemhosny.github.io/thealgorithms-python/
Now scientific libraries (e.g. numpy) can be used:
e.g. https://hatemhosny.github.io/thealgorithms-python/?algorithm=machine_learning/decision_tree

Please note that Pyodide is loaded with every update to get a new environment. This affects performance.
If you want faster performance, the code can re-run in the same previously loaded Pyodide environment if you remove the last line # __livecodes_reload__
This works as if you keep running extra code in a Jupyter notebook vs restarting the kernel.
Edit: this is no longer needed. The environment now resets on update without needing full reload, which resulted in significantly improved performance.

[Panquesito7]

Nice project!

We have a playground on the website already, but it lacks test support.

Would you be interested in integrating your playground / adding test support to the website?

Either way I think we might want to link your playground from the Readme. @TheAlgorithms/javascript_maintainers @TheAlgorithms/website_maintainers thoughts?

What readme do you mean exactly? 🤔

Also, this idea sounds very interesting. Good work, @hatemhosny. I would love if you could incorporate it into the current website we have. 🙂

[hatemhosny]

thank you @Panquesito7
I will start working on a PR. I will let you know if I need guidance. Thank you.

Meanwhile, I have added a playground for R: https://hatemhosny.github.io/thealgorithms-r/
It uses WebR to run R locally in the browser (using WebAssembly)
WebR supports running a number of R packages (https://repo.r-wasm.org/). Example: https://livecodes.io/?template=r

@cclauss
Also I have updated the Python playground: https://hatemhosny.github.io/thealgorithms-python/
Significantly improved performance, reset environment on update without having to add any flags in code, upgrade to the latest Pyodide version and use micropip to automatically install any imported library.