{"id":5220,"date":"2019-05-04T08:47:25","date_gmt":"2019-05-04T08:47:25","guid":{"rendered":"https:\/\/gtechbooster.com\/?p=5220"},"modified":"2023-06-21T11:42:59","modified_gmt":"2023-06-21T11:42:59","slug":"science-plus-python-webassembly-equals-pyodide","status":"publish","type":"post","link":"https:\/\/gtechbooster.com\/science-plus-python-webassembly-equals-pyodide\/","title":{"rendered":"Science plus Python & WebAssembly Equals Pyodide"},"content":{"rendered":"\n

Based on Iodide, we now have Pyodide which allows a Python\ninterpreter to run inside the browser and create living documents there,\n thus bringing data science to the browser.<\/p>\n\n\n

\"\"<\/a><\/div><\/div>

As we’ve seen in “Run VSCode in the browser<\/a>“, portability is the new trend sought after. And with that we mean the ease of running everything inside the ubiquitous browser, be it an IDE, a game or an interpreter.\u00a0<\/p>\n\n\n

Pyodide is the Python offspring of Iodide, the attempt to bring\nJavascript and science to the browser. Iodide was already a success, but\n since Javascript had no well-defined scientific stack whereas Python\ndoes, the idea of replacing JavaScript with Python was suggested. And\nthus, Pyodide.<\/p>\n\n\n

The solution was to make a Python interpreter run inside the\nbrowser’s Javascript virtual machine and, unlike VSCode’s code-server\nwhich has a server part that the client\/browser communicates with, the\nPython interpreter is loaded exclusively into the browser client-side\nwithout any remote components.<\/p>\n\n\n

That happens because of the magic of Webassembly, which allows compiling languages other than Javascript for use inside the browser. For example Perl with WebPerl<\/a>. The notion here is that your Perl, or Python or whatever, code is not translated to JavaScript, but instead their respective interpreters\/binaries are ported to WebAssembly which subsequently targets the Javascript VM living inside the browser.<\/p>\n\n\n\n

In the case of Pyodide it was a Python interpreter which was followed\n quickly with support for Numpy, Pandas and Matplotlib, by far the most\nused modules in the Python science ecosystem, and later on with support\nfor Scipy and scikit-learn.So not just Python but Python+Scientific\nstack.<\/p>\n\n\n

It is worth noting that Pyodide has full access to the browser\u2019s Web\nAPIs.This means that while the data loading and processing is performed\nin Python, the results are handed over to Javascript and WebGL for doing\n the plotting using for instance JS libraries like d3.<\/p>\n\n\n

It also makes possible accessing the DOM through Python without touching Javascript, but as WebAssembly cannot currently directly access the DOM this happens through a proxy.To access any Web API, WebAssembly needs to call out to JavaScript, which then makes the Web API call. Emscripten therefore creates the HTML and JavaScript glue code needed to achieve this.<\/p>\n\n\n\n

In Pyodide you do that by importing the document object from JavaScript over to the Python side.<\/p>\n\n\n

from js import document<\/code><\/p>

\"\"<\/a><\/div><\/div>\n\n\n

and then start calling methods on it from Python:<\/p>\n\n\n

document.getElementById(\"myElement\")<\/code><\/p>\n\n\n

In this example we’re making UI widgets:<\/p>\n\n\n

%% py<\/code>
from js import iodide<\/code>
button = iodide.output.element('button')<\/code>
button.textContent = \"Click me!\"<\/code>
count = 0<\/code>
def onclick(evt):<\/code>
  global count<\/code>
  if elt.style.backgroundColor == 'rgb(255, 255, 255)':<\/code>
     elt.style.backgroundColor = '#ffcccc'<\/code>
     elt.innerText = \"I've been changed \" + str(count) + <\/code>\" times!\"<\/code><\/p>\n\n\n

  else:<\/code>
     elt.style.backgroundColor = '#ffffff'<\/code>
     elt.innerText = \"I've been changed \" + str(count) + \" times!\"<\/code>
count += 1<\/code>
button.addEventListener('click', onclick)<\/code><\/p>\n\n\n

There’s an ongoing debate based on the current Webassembly’s\ninability to call the WebAPI’s directly without the intervention of\nJavascript. The debate is whether WebAssembly is going to render\nJavascript obsolete since you can program the browser through any\nWebassembly supported language.If direct access to the DOM is possible\nthen you might have a case.<\/p>\n\n\n

While Pyodide is based on Iodide, it may be used standalone in any\ncontext where you want to run Python inside a web browser. Iodide,\nhowever, forms the basis of a tool with which you can create living\ndocuments in the browser comprising of your code, plots, data tables,\neven interactive visualizations into one document, running your code and\n witness its results exclusively inside the browser.Furthermore you can\nexport and share your notebook so that others can easily access the\nsource and replicate and extend your presentation.<\/p>\n\n\n

Their repos on Github with their installation instructions can be found at project Iodide<\/a> and project Pyiodide<\/a> while there’s also an interactive playground at A Brief Tour of Pyiodide<\/a> where you can do your experiments and experience how it works without having to install anything.<\/p>\n\n\n

There you have it;Python after Data Science conquers the Browser too.\u00a0<\/p>\n\n\n

More Information<\/h4>\n\n\n