- PyScript allows embedding Python in HTML using WebAssembly, supporting powerful libraries such as NumPy and Pandas.
- Brython translates Python code to JavaScript, making it ideal for lightweight manipulation of the DOM and SVG elements.
- WebAssembly is the key technology that allows compiled languages to run on the web with near-native performance.
- There are traditional server-based alternatives like Flask and Django for handling backend logic.
Bringing the power of Python to the browser environment has long been a dream for many developers. Until recently, if you wanted anything to move on the web, JavaScript was the undisputed king and the only viable option for executing client-side logic without relying on an external server.
However, the landscape has changed radically thanks to the emergence of various tools and standards that break down backend barriers . Today, there are multiple ways to integrate Python with HTML, from compilers that translate the code to the use of binary technologies that enable amazing performance directly in the tab of your leading browser like Chrome.
PyScript: The Anaconda Revolution
One of the most significant leaps forward came with Anaconda's release of PyScript. This framework is simply a wrapper layer over... Pyodide, Emscripten and WebAssembly (Wasm)This allows Python to run almost transparently on the client. The most appealing aspect is that it allows you to write Python code directly within custom HTML tags, such as <py-script>, greatly facilitating the creation of interactive applications.
To get started, simply include the PyScript CSS and JS files in the document header. One of its great advantages is that It supports heavy libraries such as NumPy, Pandas, or Scikit-learn, which can be configured using the tag <py-env>In addition, PyScript offers a bidirectional communication with JavaScriptallowing manipulation of the browser's DOM using the module js Python.
As for the interface, PyScript doesn't fall short, as it offers integrated UI components , the <py-button> o <py-inputbox>which execute Python functions when interacted with. However, it should be noted that, being based on WebAssembly, The initial loading time may be long. and performance on mobile devices may be compromised.
Brython: Python translated to JavaScript
If we're looking for a lighter alternative in terms of load, Brython is a classic choice. Unlike PyScript, Brython is a Python 3 implementation written entirely in JavaScript. translate the Python code so that the browser can understand it. For it to work, it is essential to call the function brython() in the event onload of the HTML body.
Brython stands out for its ability to interact with HTML and SVG elements. Through the use of the object document, it's possible inject content dynamically or draw geometric figures on an SVG canvas using custom operators such as =< to add nodes to the document tree. Despite its versatility, it has limitations: It does not support all modules of the standard library and requires that data input and output be handled through HTML elements, since print() o input() They don't work in the traditional way.
Other implementations and comparisons
The ecosystem is broad, and there are other interesting projects. On one hand, there's Skulpt, which supports Python 2 and 3 via JavaScript, and Transcrypt, which acts as a compiler to JavaScript, although the latter seems to have been forgotten. There's also VistaPython, which proposes a different approach using a bytecode interpreter written in JavaScript and a parser generated with Antlr, making it easier to upgrade to newer versions of Python.
Comparing the approaches, we see that Brython and Skulpt use manual parsers that are difficult to maintain. In contrast, Pyodide (the foundation of PyScript) is a true port of CPython to WebAssembly, guaranteeing much greater compatibility, albeit at the cost of being a much larger package to download. VistaPython attempts to strike a balance between flexibility and size , optimizing load profiles to ensure applications run quickly on any device.
Traditional methods and backend
Not everything has to happen in the browser. For many, the most robust way to combine Python and HTML remains using... server frameworks such as Flask in Python or DjangoIn this scheme, Python handles the logic on the server and sends the rendered HTML to the client, or it acts as a REST API that exchanges data in JSON format with a frontend written in JavaScript using fetch o axios.
There are also older methods like CGI (Common Gateway Interface), which, although now considered obsolete due to their complexity, formed the basis of the dynamic web. For those who simply need to present data, converting Jupyter notebooks to HTML is the fastest way to publish technical reports without technical complications.
The engine behind it all: WebAssembly
The real magic that allows languages like Python, C++, and Rust to reach the web is WebAssembly (Wasm). This open standard enables the execution of binary code with near-native performance. Thanks to Wasm, companies like Adobe have been able to port Photoshop to the web , and AutoCAD and Figma have drastically optimized their data loading and processing.
The ability to run Python on the client, whether through Brython translation or the binary power of PyScript, opens up a world of possibilities for creating complex data science tools and applications without the user having to install anything on their computer, democratizing access to advanced programming.
The integration of Python on the web has evolved from simple server-side scripts to binary execution via WebAssembly, allowing you to choose between the lightweight translation to JavaScript with Brython or the full power of PyScript and Pyodide, thus transforming the way we conceive of frontend development.
