PyScript
PyScript es un framework que lleva en el ecosistema de aplicaciones Python desde que se menciono en la Conferencia PyCon US 2022, por Anaconda.
Este nuevo framework permite ejecutar código Python directamente desde el navegador, permitiendo integrar las aplicaciones con de este lenguaje con JS, CSS y HTML.
Definiciones
WebAssembly
WebAssembly (WASM) es un estándar de código binario de bajo nivel que mejora el rendimiento de las aplicaciones web en navegadores modernos. Permite ejecutar código de alto rendimiento de lenguajes como C, C++, Rust, entre otros, en los navegadores de manera eficiente. WebAssembly se integra con JavaScript y proporciona acceso a las API del navegador. Es utilizado para aplicaciones como juegos en línea, edición de imágenes y videos, realidad virtual, entre otros, ofreciendo rendimiento y portabilidad en el entorno web.
Pyodide
Pyodide es un proyecto desarrollado por Mozilla que combina Python con WebAssembly para permitir la ejecución de código Python en un entorno web. Proporciona una distribución completa de Python, incluidas bibliotecas científicas y de análisis de datos populares. Con Pyodide, los desarrolladores pueden crear aplicaciones web interactivas que utilizan Python como lenguaje principal sin necesidad de instalar Python en el sistema local. También permite la interoperabilidad entre Python y JavaScript, lo que facilita la integración de código Python en aplicaciones web existentes.
Emscripten
Emscripten es una herramienta de compilación desarrollada por Mozilla que convierte código fuente en lenguajes como C y C++ en código WebAssembly (WASM), permitiendo la ejecución eficiente de aplicaciones de alto rendimiento en navegadores web. Proporciona un conjunto de herramientas y bibliotecas para facilitar la compilación y la interoperabilidad con el código fuente original. Al utilizar Emscripten, los desarrolladores pueden llevar sus aplicaciones al entorno web sin necesidad de reescribir completamente su código en JavaScript, aprovechando las ventajas de rendimiento de WebAssembly.
Pyodide
Pyodide es un proyecto desarrollado por Mozilla que combina Python con WebAssembly para permitir la ejecución de código Python en un entorno web. Proporciona una distribución completa de Python, incluyendo bibliotecas científicas populares, lo que permite realizar cálculos complejos y análisis de datos en el navegador sin necesidad de instalar Python localmente. Pyodide también permite la interoperabilidad entre Python y JavaScript, lo que facilita la integración de código Python en aplicaciones web existentes. En resumen, Pyodide ofrece la capacidad de ejecutar Python en el navegador y aprovechar las bibliotecas y capacidades de Python en aplicaciones web.
Donde encontrar información PyScript
- En su sitio oficial https://pyscript.net/
- Puede segarles en sus redes sociales:
Como funciona PyScript
Para entender el funcionamirto de PyScript, veamos la siguiente imagen.
- PyScript actualmente se basa en Pyodide
- Pyodide embebe a Python gracias a herramientas como Emscripten que compilan todo el lenguaje hacia WebAssembl.
- PyScript admite escribir y ejecutar código de Python en un navegador, y brindará soporte para otros lenguajes en el futuro.
Cómo usar PyScript
PyScript se instala dentro del código HTML, se añade dentro de las etiquetas HEAD las siguientes etiquetas:
- <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
- <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Luego en el body del HTML vamos a añadir las sigueintes etiquetas que cumplen una funcion especifica.
- <py-env>: define los paquetes necesarios para ejecutar el código de Python.
- <py-script>: es donde escribes el código Python que luego se ejecutará dentro de la página web.
- <py-repl>: crea un componente REPL (read-eval-print-loop) que evalúa el código insertado y muestra los resultados.
Veamos algunos ejemplos
Mostrar en pantalla un mensaje procesado por Python
Este ejemplo mostraremos un mensaje procesado por Python usando la instrucción print:
<!DOCTYPE html>
<html lang="es">
<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>
print("Hola desde codigoelectronica.com")
</py-script>
</body>
</html>
Podemos observar que en el head se incluye las etiquetas mencionadas en cómo usar PyScript y la etiqueta py-script para escribir el codigo fuente de Python.
Al guardar y abrir en el navegador, podemos observar el mensaje que colocamos en la instrucción print.
Ejemplo con librerías y variables
Ahora, tomando el ejemplo anterior, vamos a añadir la librería numpy para procesar numero, veamos el código.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-env>
- numpy
</py-env>
<py-script>
import numpy as np
arr = np.array([1, 2, 3, 4, 5])
print("Suma de todos los elementos:", np.sum(arr))
print("Promedio de los elementos:", np.mean(arr))
print("Máximo valor:", np.max(arr))
print("Orden inverso:", np.flip(arr))
</py-script>
</body>
</html>
El resultado es el siguiente:
