Brython: reemplazando JavaScript con Python en la interfaz

¡Hola, Habr!



Para satisfacción de nuestros lectores, nuestro trabajo continúa actualizando los libros de Python . Pero la búsqueda continúa en esta dirección, y hoy nos gustaría mencionar a Brython, Python para navegadores. El artículo es corto, un poco juguetón y detective, intentamos mantener el estilo del autor.



Este artículo proporciona una introducción rápida al trabajo con Brython , una implementación de Python para el desarrollo de aplicaciones para el usuario (navegador).



El proyecto completo está publicado aquí .



Introducción



Envidiosos del éxito de los programadores de JavaScript, los conspiradores de Python se reunieron en secreto para discutir el futuro de Python en este mundo apocalíptico. JavaScript está en todas partes, devorando la limpieza de Python. Armado con Node.js , JavaScript ha invadido el territorio de Python y ha perdido su papel dominante como el amado lenguaje del lado del servidor donde anteriormente rivalizaba con Ruby (¿ recuerdas esos días ?). Entonces es hora de incursionar en el corazón del territorio de JavaScript: el navegador.



No olvides tu historia (y recuerda el futuro)



Este dilema no se limitó a los conspiradores antes mencionados. Había otro caballero de capa y daga, el autor de Transcrypt . Decidió escribir un compilador para Python que compila código directamente en JavaScript, pero como buen envenenador, no dejó rastro de Python detrás de él. Parecía prometedor.



Otros prefirieron aprovechar las lecciones de historia. Simplemente inmigre con toda la familia. Al menos así pensaban los creadores de Pyodide . Iban a crear un enclave en el lado de JavaScript con un intérprete de Python completo que pudiera ejecutar código Python. En consecuencia, cualquier código Python podría ejecutarse allí. , incluida la mayor parte de su pila de ciencia de datos, donde hay enlaces al lenguaje C (por ejemplo, Numpy, Pandas).



También parece muy prometedor. Pero las pruebas perezosas iniciales realizadas por el autor de Pyodide mostraron que la página se cargaba un poco lento al principio.



Luego, los conspiradores lo hicieron exactamente con el espíritu de los buenos conspiradores: crearon otro compilador para convertir Python a JavaScript, pero esta vez para compilar a JavaScript al cargar la página (no como Transcrypt, que compila el código en JavaScript de antemano). Así se formó la Hermandad Brython. Una serpiente para gobernarlos a todos.



Hola Mundo



Escribamos el tradicional 'Hola mundo'



Y aquí está el soldado Brython (estoy hablando del compilador).



<script type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
    
<body onload="brython()">
...
</body>
      
      





En la etiqueta que se body



muestra arriba, escribimos el código en Brython:



<script type="text/python">
from browser import document

document <= "Hello World"
</script>

      
      





Simplemente agregamos Hello World al elemento document



. Hmm. Muy fácil.



En su totalidad - a continuación.



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
    </script>
</head>

<body onload="brython()">

<script type="text/python">
from browser import document

document <= "Hello World"
</script>
</body>
</html>
      
      





En este caso, la página simplemente mostrará el saludo "Hola mundo".



Calculadora



Escribamos una calculadora en Brython. Todo su código está publicado aquí .







Sí, lo adivinaste, necesitamos una mesa. Vamos a hacerlo.



from browser import document, html
calc = html.TABLE()

      
      





Agreguemos solo la primera fila. Es decir, mostraremos el campo de números (llamémoslo result



) y la tecla C.



calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +
                html.TD("C"))
      
      





Sí, no estoy muy seguro de esta sintaxis con <=



. Pero, juzgue usted mismo, es una biblioteca tan genial, así que acepto.



Ahora agreguemos el teclado



lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
      
      





Finalmente, agregue calc



a document



.



document <= calc
      
      





Hasta ahora todo bien. ¿Cómo conseguimos que todo esto funcione? Primero, necesita tomar una referencia al elemento de resultado para manipularlo cuando se presionan las teclas.



result = document["result"] #       id
      
      





A continuación, debemos actualizar result



cada vez que se presiona cualquier elemento del teclado. Para ello, creemos un controlador de eventos. Confiemos en los desarrolladores de Brython y encontremos que este código funciona. Preste atención a las manipulaciones result



según el botón que presionó.



def action(event):
    """  "click"     ."""
    # ,  ,   "target" 
    #  event 
    element = event.target
    # ,   ,    "text" 
    value = element.text
    if value not in "=C":
        #    
        if result.text in ["0", "error"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        # 
        result.text = "0"
    elif value == "=":
        #      
        try:
            result.text = eval(result.text)
        except:
            result.text = "error"
      
      





Finalmente, vincule el controlador de eventos anterior a un evento click



en todos los botones.



for button in document.select("td"):
    button.bind("click", action)
      
      





Ves lo simple que era. Pero en serio, Brython me parece una obra maestra de la ingeniería y quizás la mejor ilustración de mi amor por el lenguaje Python. ¡Apoye a los desarrolladores y déles un asterisco en el repositorio de Github!



All Articles