El proyecto fue anunciado en PyCon US 2022 y actúa como un wrapper alrededor del proyecto Pyodure, que carga el intérprete CPython como un módulo de navegador WebAssembly.
“PyScript es un marco que permite a los usuarios crear aplicaciones Python ricas en el navegador utilizando una combinación de Python con HTML estándar”, explica Anaconda en un artículo reciente de blog.
“PyScript tiene como objetivo ofrecer a los usuarios un lenguaje de programación de primera clase que tenga reglas de estilo coherentes, sea más expresivo y sea más fácil de aprender.”
Si bien el proyecto Pyodide te permitía ejecutar Python en el navegador anteriormente, lleva un tiempo acostumbrarse a la sintaxis y no es tan elegante como simplemente escribir un programa Python y pegarlo en tu página HTML.
Sin embargo, Python actúa como un wrapper, permitiéndote integrar código Python directamente entre las etiquetas py-script y hacer que Pyodide lo ejecute automáticamente.
Ejemplo de Uso
Para usar PyScript, simplemente descárgalo de su sitio web oficial y agrega estas líneas a tus páginas HTML:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>El código PyScript se coloca entre etiquetas py-script.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body> <py-script> #codigo-aqui </py-script> </body>
</html>Por ejemplo, el siguiente fragmento ilustra un pequeño ejemplo de Hello World usando PyScript y su ejecución directamente en el navegador. Observa cómo la función pyscript.write() te permite generar datos directamente en un elemento HTML.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyScript test</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div style="padding:10px">
<py-script>
import datetime as dt
# Imprimir "¡Hola Mundo!" en la consola del navegador
print("¡Hola Mundo!")
# Escribir la fecha actual en el elemento con id "date"
pyscript.write('date', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>
<p>La fecha de hoy es: <label id="date"></label></p>
</div>
</body>
See the Pen Pyscript-HTML by Alex (@htmldesdecero) on CodePen.
Los desarrolladores también pueden ampliar las páginas PyScript a través de paquetes Python adicionales integrados en Pyodide o a través de aquellos almacenados en el sistema de archivos local.
Además de ejecutar código incrustado en HTML, también es posible agregar un editor de código directamente en una página HTML usando la etiqueta py-repl para que puedas escribir código y ejecutarlo, como se muestra a continuación.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyScript test</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1>Editor de código PyScript</h1>
<py-repl>
# Aquí puedes escribir y ejecutar código Python
</py-repl>
</body>
El uso del editor facilita probar el código sobre la marcha y ver qué funcionará y qué no con PyScript.
See the Pen Etiqueta-py-repl by Alex (@htmldesdecero) on CodePen.
¿Más ejemplos?. A continuación se muestra un ejemplo con el cálculo de Pi para 3 decimales después del punto decimal:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba de PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
def wallis(n):
pi = 2
for i in range(1, n):
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
return pi
pi = wallis(100000)
s = f"π es aproximadamente {pi:.3f}"
print(s)
</py-script>
</body>
</html>Bueno, no ocultaré el hecho de que lleva mucho tiempo procesarlo y no creo que realmente sea utilizable para aplicaciones web públicas en general. Pero es gracioso. Incluso podemos usar paquetes y otros módulos, crear interfaces e incluso recuperar valores en páginas HTML con la función pyscript.write así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>pytest</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1 id="pi">xxx</h1>
<py-script>
def wallis(n):
pi = 2
for i in range(1, n):
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
return pi
pi = wallis(100000)
s = f"π está aproximadamente {pi:.3f}"
pyscript.write('pi', s)
</py-script>
</body>
</html>
Palabras Finales
Si bien JavaScript ya puede realizar casi todo lo que quieras crear con PyScript, y con Python considerado como el lenguaje de programación más popular, PyScript abre la puerta a muchos proyectos interesantes en el futuro.
Para comenzar con PyScript, puedes visitar su página del proyecto en GitHub, que también incluye muchos ejemplos de código.
