Continuamos, después de un tiempo considerable, a hablar de Webassembly. Esta vez como lenguaje base usaremos Python.
Como herramienta extra usaremos Pyodide, una distribución de CPython compilada a WebAssembly (WASM) que permite ejecutar código Python directamente en el navegador web o en Node.js. No es necesaria su instalación, aunque existe la posibilidad de hacerlo.
Pyodide nos permite:
- Ejecutar Python en el navegador sin instalación.
- Usar librerías científicas y de análisis de datos.
- Integrar Python con JavaScript y el DOM.
- Crear notebooks y aplicaciones web interactivas.
Programando en Python (y Pyodide)
Hagamos algunos ejercicios para comprobar el funcionamiento de esta herramienta.
Ejemplo 1. Escribir el clásico "Hola, mundo" en Python y Pyodide.
holamundo.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hola Mundo con Pyodide</title> <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script> </head> <body> <h1>Ejemplo Pyodide</h1> <pre id="output"></pre> <script> async function main() { let pyodide = await loadPyodide(); let result = await pyodide.runPythonAsync(` print("Este codigo Python se ejecuta desde código Javascript") `); document.getElementById("output").textContent = "Hola, mundo en Python con WebAssembly!!"; } main(); </script> </body> </html>
Lo abriremos en el navegador:
Si abrimos la herramienta de desarrollador podemos observar el siguiente mensaje:
Como se puede ver solo bastó con agregar el archivo de pyodide desde la etiqueta de ``src`` de la página HTML.
<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
Si tienes problemas con su visualización ejecuta esto:
$ python -m http.server 8000
Abre tu navegador en esta ruta: http://localhost:8000/holamundo.html
Ejemplo 2. Crear un sencillo conversor de grados celsius a grados fahrenheit.
conversor.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Conversor Celsius a Fahrenheit</title> <!-- Cargar Pyodide desde el CDN oficial --> <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script> </head> <body> <h1>Conversor con Pyodide</h1> <label for="celsius">Grados Celsius:</label> <input type="number" id="celsius" value="0"> <button onclick="convertir()">Convertir</button> <p id="resultado"></p> <script> let pyodide; async function main() { pyodide = await loadPyodide(); } main(); async function convertir() { let celsius = document.getElementById("celsius").value; let fahrenheit = await pyodide.runPythonAsync(` c = ${celsius} f = (c * 9/5) + 32 f `); document.getElementById("resultado").textContent = celsius + " °C = " + fahrenheit + " °F"; } </script> </body> </html>
Ejecutamos de nueva cuenta:
$ python -m http.server 8000
Abrimos el navegador en esta ruta: http://localhost:8000/conversor.html
Si todo va bien, veremos este formulario HTML donde introducimos los grados celsius y su conversión a grados fahrenheit:
Continuaremos con el tema de Webassembly, quizás hagamos un post sobre Webassembly con Go, Rut o hasta Java.
Enlaces:
https://pyodide.org/https://webassembly.org/
Comentarios
Publicar un comentario