- PyScript permet embeure Python en HTML mitjançant WebAssembly, suportant llibreries potents com NumPy i Pandes.
- Brython tradueix el codi Python a JavaScript, ideal per manipular el DOM i elements SVG de forma lleugera.
- WebAssembly és la tecnologia clau que permet executar llenguatges compilats a la web amb un rendiment gairebé nadiu.
- Hi ha alternatives tradicionals basades en servidor com Flask i Django per manejar la lògica de backend.
Portar la potència de Python a l'entorn del navegador ha estat durant molt de temps el somni de molts desenvolupadors. Fins fa res, si volies que alguna cosa es mogués a la web, JavaScript era el rei indiscutible i l'única opció viable per executar lògica al client sense dependre d'un servidor extern.
Tot i això, el panorama ha canviat radicalment gràcies a l'aparició de diverses eines i estàndards que permeten trencar les barreres del backend . Avui dia, hi ha múltiples camins per integrar Python amb HTML, des de compiladors que tradueixen el codi fins a l'ús de tecnologies binàries que permeten un rendiment sorprenent directament a la pestanya del teu navegador líder com Chrome.
PyScript: La revolució d'Anaconda
Un dels salts més importants es va produir amb el llançament de PyScript per part d'Anaconda. Aquest framework no és més que una capa envoltant sobre Pyodide, Emscripten i WebAssembly (Wasm), el que permet que Python s'executi al client de forma gairebé transparent. El més atractiu és que permet escriure codi Python directament dins d'etiquetes HTML personalitzades com <py-script>, facilitant enormement la creació d'aplicacions interactives.
Per posar-lo en marxa, només cal incloure els fitxers CSS i JS de PyScript a la capçalera del document. Un dels seus grans avantatges és que suporta llibreries pesades com NumPy, Pandes o Scikit-learn, les quals es poden configurar mitjançant l'etiqueta <py-env>. A més, PyScript ofereix una comunicació bidireccional amb JavaScript, permetent manipular el DOM del navegador mitjançant el mòdul js de Python.
Pel que fa a la interfície, PyScript no es queda curt, ja que ofereix components d'UI integrats com a <py-button> o <py-inputbox>, que executen funcions de Python en interactuar amb ells. No obstant això, cal tenir en compte que, en basar-se en WebAssembly, el temps de càrrega inicial pot ser elevat i el rendiment en dispositius mòbils es pot veure compromès.
Brython: Python traduït a JavaScript
Si busquem una alternativa més lleugera en termes de càrrega, Brython és una opció clàssica. A diferència de PyScript, Brython és una implementació de Python 3 escrita totalment en JavaScript que tradueix el codi de Python perquè el navegador pugui entendre'l. Perquè funcioni, és imprescindible trucar a la funció brython() en l'esdeveniment onload del cos de lHTML.
Brython destaca per la seva capacitat per interactuar amb elements HTML i SVG. Mitjançant lús de lobjecte document, És possible injectar contingut dinàmicament o dibuixar figures geomètriques en un llenç SVG utilitzant operadors propis com =< per afegir nodes a l'arbre del document. Tot i la seva versatilitat, té limitacions: no suporta tots els mòduls de la biblioteca estàndard i requereix que l'entrada i la sortida de dades es gestioni a través d'elements HTML, ja que print() o input() no funcionen de la manera tradicional.
Altres implementacions i comparatives
L'ecosistema és ampli i hi ha altres projectes interessants. D'una banda tenim Skulpt, que suporta Python 2 i 3 mitjançant JavaScript, i Transcrypt, que actua com un compilador cap a JS, encara que aquest últim sembla haver quedat en l'oblit. També hi ha VistaPython, que proposa un enfocament diferent mitjançant un intèrpret de bytecode escrit en JavaScript i un analitzador generat amb Antlr, cosa que facilita l'actualització a noves versions de Python.
Si comparem els enfocaments, veiem que Brython i Skulpt usen analitzadors manuals difícils de mantenir. Per contra, Pyodide (la base de PyScript) és un port real de CPython a WebAssembly, cosa que garanteix una compatibilitat molt més gran, encara que a costa de ser un paquet molt més pesat de descarregar. VistaPython intenta buscar un equilibri entre flexibilitat i pes , optimitzant els perfils de càrrega perquè les aplicacions siguin ràpides a qualsevol dispositiu.
Mètodes tradicionals i backend
No tot ha de passar al navegador. Per a molts, la forma més robusta d'unir Python i HTML segueix sent l'ús de frameworks de servidor com Flask a Python o Django. En aquest esquema, Python gestiona la lògica al servidor i envia l'HTML renderitzat al client, o bé actua com una API de REST que intercanvia dades en format JSON amb un frontend escrit en JavaScript mitjançant fetch o axios.
Hi ha també mètodes més antics com CGI (Common Gateway Interface), que encara que avui es consideren obsolets per la seva complexitat, van ser la base de la web dinàmica. Per als que només necessiten presentar dades, convertir notebooks de Jupyter a HTML és la via més ràpida per publicar informes tècnics sense complicacions tècniques.
El motor darrere de tot: WebAssembly
La veritable màgia que permet que llenguatges com Python, C++ o Rust arribin a la web és WebAssembly (Wasm). Aquest estàndard obert permet l' execució de codi binari amb un rendiment proper al nadiu. Gràcies a Wasm, empreses com Adobe han pogut portar Photoshop a la web , i AutoCad o Figma han optimitzat els seus processos de càrrega i processament de dades de forma dràstica.
La capacitat d'executar Python al client, ja sigui mitjançant la traducció de Brython o la potència binària de PyScript, obre un món de possibilitats per crear eines de ciència de dades i aplicacions complexes sense que l'usuari hagi d'instal·lar res al vostre ordinador, democratitzant l'accés a la programació avançada.
La integració de Python a la web ha evolucionat des de simples scripts al servidor fins a l'execució binària mitjançant WebAssembly, permetent triar entre la lleugeresa de la traducció a JavaScript amb Brython o la potència completa de PyScript i Pyodide, transformant així la manera com concebem el desenvolupament frontend.
