PyScript: la nueva forma de correr Python en el navegador, gracias a WebAssembly

Curso Básico de Python

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Durante la Conferencia PyCon US 2022, Anaconda, empresa detrás de grandes herramientas en el ecosistema de Python, anunció PyScript una forma de correr Python directamente en el navegador.

PyScript es un nuevo framework que permite crear aplicaciones para el navegador usando Python, JS, CSS y HTML.

¿Qué componentes clave tiene? Veamos.

Correr Python en la web

Sin necesidad de ejecutar el código desde el lado del servidor, ahora se puede ejecutar Python desde el lado del navegador.

Como recordarás, hasta ahora nuestros navegadores solo reconocían JavaScript como lenguaje de programación. Pero con PyScript, que usa WebAssembly por detrás de escena, se puede ejecutar el binario de Python a través de la web.

<!DOCTYPE html>
<html lang="en">
  <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("Hello World!")
    </py-script>
  </body>
</html>

El ecosistema de Python

Este entorno ya viene con librerías comunes como numpy, pandas, scikit-learn y mucho más, por ejemplo aquí usamos numpy:

<!DOCTYPE html>
<html lang="en">
  <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
        a = np.arange(15).reshape(3, 5)
    </py-script>
  </body>
</html>

Python + JavaScript

PyScript tiene comunicación bidireccional entre el entorno de Python y JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
		<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
		<script defer src="https://pyscript.net/alpha/pyscript.js"></script >
  </head>
  <body>
		<div id="mandelbrot ">
			<div class="loading"></>
		</div>
    <py-script>
        from js import (
            console,
            document
        )
        def do_something():
            spinner = document.querySelector("#mandelbrot .loading")
            console.log(spinner)
    </py-script>
  </body>
</html>

Control del ambiente

El desarrollador puede elegir qué paquetes y archivos va a cargar en el entorno.

<!DOCTYPE html>
<html lang="en">
  <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
        - sympy
        - paths:
            - /palettes.py
            - /fractals.py
    </py-env>
    <py-script>...</py-script>
  </body>
</html>

Componentes de UI listos para usar

Ya tiene componentes que se pueden integrar a nuestro HTML y que se ejecutarán en Python.

<body>
  <py-title>To Do List</py-title>
  <py-box widths="4/5;1/5">
    <py-inputbox id="new-task-content">
      def on_keypress(e):
        if (e.code == "Enter"):
          add_task()
    </py-inputbox>
    <py-button id="new-task-btn" label="Add Task!">
      def on_click(evt):
        add_task()
    </button>
  </py-box>
  <py-list id="myList"></py-list>
  <py-repl id="my-repl" auto-generate="true"></py-repl>
</body>

¿Cómo funciona internamente?

PyScript está sobre los hombros de tres gigantes:

Pyodide
Emscripten
WebAssembly

Así sería su arquitectura:

PyScript es una capa extra sobre estás tres herramientas, Pyodide ya era una forma de llevar a Python al navegador en donde embebe a Python gracias a herramientas como Emscripten que compilan todo el lenguaje hacia WebAssembly que es finalmente permite la ejecución de estos binarios a través de la web.

Desde la perspectiva de PyScript es desafortunado que un potente lenguaje de programación como Python no se pudiera usar desde el lado del navegador y aprovechar el estado actual de JS, HTML y CSS para lograr crear aplicaciones robustas.

Es precisamente por esta razón que ven gran oportunidad en que PyScript podrá abrir la frontera y crear una nueva generación de aplicaciones en la web basadas en Python .

¿Qué es WebAssembly?

WebAssembly, abreviado wasm, es un standard abierto que nos permite la ejecución de código binario a travéz de la Web, se puede compilar código en Python, C, C++, Rust etc a este formato para poder usarse desde JavaScript, por lo que tiene el potencial de ser un gran cambio para la web y puede revolucionar el desarrollo actual.

Por ende WebAssembly es la clave para que este tipo de proyectos se puedan llevar a cabo, ya que abre la puerta no solo a ejecutar aplicaciones en Python sino llevar cualquier lenguaje a la Web.

No solo se trata de nuevos frameworks que habilitan otros tipos de lenguajes en la web, sino que además se abre una ventana para que otras compañías usen WebAssembly, con ello traer nuevas experiencias en la web y reusar código que ya funciona. A continuación te presento algunos casos.

Photoshop on Web (Beta)

Abobe anunció en septiembre de 2021 que estaba trabajando en una versión web soportada con WebAssembly. Imagínate todos los algoritmos de procesamiento de imagen que tiene Photoshop escritos posiblemente en C, C# o Rust. Pues ahora se puede portar esto a la web sin necesidad de reescribir todo, y con el mismo rendimiento.

AutoCad

Otra compañía que está usando WebAssembly para portar todo su sistema, algoritmos y paquetes para llevarlo a la web.

Figma

Nos cuenta en su blog cómo logró mejorar los tiempos de carga hasta 3X usando WebAssembly.

PyScript es una gran forma y propuesta de llevar Python a la web y WebAssembly abré este camino para una nueva generación de aplicaciones web que no solo estén basadas en JavaScript.

Déjame en los comentarios tu respuesta a estas preguntas: