PyScript: Python llega de forma nativa a HTML

mayo 3, 2022
10:54 am

El pasado 30 de abril durante la #PyConUS2022 celebrada en Salt Lake City, se presento lo que muchos desarrolladores habían estado pidiendo por años, tener a Python dentro de HTML de forma nativa.

En el primer ejemplo mostrado el presentador utilizo la etiqueta <py-script> para incluir código de Python dentro de la etiqueta, en este caso utilizando el clásico “Hola Mundo”.

				
					<html>
  <head>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script> print ("¡Hola Mundo!") </py-script>
  </body>
</html>

Python directamente en el navegador permitirá el alojamiento de archivos externos (esto gracias a Pyodide Project) o bien permitirá el alojamiento de aplicaciones sin necesitar específicamente de la configuración de lado servidor, algo muy útil para pequeños scripts que puedan automatizar ciertas tareas de un sitio web o web app.

Todo el ecosistema de Python directo en HTML

PyScript permitirá ejecutar muchos paquetes populares de Python y o apps de notación científica (como numpy, pandas, scikit-learn y más). Por si fuera poco y lo que más llano nuestra atención (al menos la del editor de esta nota) es la posibilidad de interconectar Python con JavaScript; ahora permitirá una comunicación bidireccional entre objetos y espacios de nombres de Python y Javascript, lo que para un desarrollador web deriva en un mar de posibilidades al sumar lo mejor de dos de los más populares lenguajes de programación en la actualidad y con más proyección en el futuro inmediato.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Todo App (Code original)</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> -->
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body class="container">
    <py-script> 
tag="h1"
content="holaa"
myClassName="acitve"
myColor="red"
print(f'<{tag} class="{myClassName}" style="background-color: {myColor}">{content}</{tag}>')
def addp(tag,content):
    print(f"<{tag}>{content}</{tag}>")
for i in range(5):
    addp(f"h{i+1}",f"Header {i+1}")
"<h1>h1 header normal py</h1>"
    </py-script>
    <!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
<h1>Normal header</h1>
</body>
</html>

En el ejemplo anterior se mezclan PyScript y Java Script de forma practica.

En la documentación presentada, se asegura que esta nueva herramienta permitirá también una completa gestión del entorno, brindando la posibilidad a los usuarios definir que paquete y que archivos incluir para que se ejecute el código en su pagina (algo muy similar a lo que pasa con PHP).

Otra de las ventajas que tendrá utilizar PyScript, es el desarrollo de apps de forma visual, usando componentes de interfaz de usuario como normalmente lo harían con HTML (botones, contenedores, cuadros de texto, etc.).

Las posibilidades de esta nueva herramienta, en fase alpha de momento son inmensas y estoy seguro los desarrolladores le encontrarán muchísimos beneficios, pues amplia de forma exponencial las posibilidades de dar rienda suelta a la creatividad del programador.