Python como lenguaje FrontEnd

imagen / Sebastiaan ter Burg
  
1 de Julio de 2015   1  

El día de hoy hemos probado Brython, un lenguaje de scripting para páginas web en el lado del cliente, así es, pareciera cuento de hadas pero python se puede utilizar como sustituto de javascript, y es que ha tomado éxito ultimamente ya que programadores dedicados a python han iniciado su desarrollo en tecnologías web.

Basta con tan solo incluir un fichero JS e indicar en las etiquetas de <javascript> que el texto a utilizar será de tipo python para que ya puedas programar en el lado del cliente con el lenguaje.

 

En Pythoniza.me hemos realizado un ejemplo básico de su funcionalidad para que puedas ver un panorama general de implementación.

El ejemplo tiene como objetivo cambiar de color un texto al hacer click en un elemento del sitio web.

1. Descargamos el fichero brython.js desde el sitio https://goo.gl/VWGVnd

3. añadir la librería a nuestro documento html

1
2
3
4
5
6
7
8
<html>
<head>
<title>Ejemplo Brython</title>
</head>
<body onload="brython()">
<script src="brython.js"></script>
</body>
</html>

Como se puede apreciar se agregó en el evento onload de body la función “brython()” esto permite que se ejecute el código que se agregará mas adelante.

4. Añadimos unos elementos en el documento html, en este caso agregaremos un elemento h1 con el texto Pythoniza.me y 3 elementos div de la siguiente manera:

1
2
3
4
5
6
7
8
<html>
<head>
    <title>Ejemplo Brython</title>
</head>
<body onload="brython()">
<div style="display:inline-block;width: 20px;height: 20px;background: #4443ff" id="color1"></div>
  <div style="display:inline-block;width: 20px;height: 20px;background: #e3821f" id="color2"></div>
  <div style="display:inline-block;width: 20px;height: 20px;background: black" id="color3"></div>
  <h1 style="display: inline-block;" id="saludo">Pythoniza.me</h1>
    <script src="brython.js"></script>
</body>
</html>
   

5. agregamos el script de python de la siguiente manera

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/python">
from browser import document as doc,alert
 
def change_1():
    doc["saludo"].style.color="#4443ff"
 
def change_2():
    doc["saludo"].style.color="#e3821f"
 
def change_3():
    doc["saludo"].style.color="black"
 
doc["color1"].bind("click",change_1)
doc["color2"].bind("click",change_2)
doc["color3"].bind("click",change_3)
</script>

Es importante indicar a la etiqueta javascript que el typo de script que se está utilizando es de tipo “text/python”.

Explicando un poco el código brython:

Hemos definido 3 funciones change_1, change_2 y change_3 cada uno de ellos tiene la mision de cambiar el color del texto ejecutando doc[“saludo”].style.color=”xcolor” , como podemos ver doc es el alias del objeto document que se importó en la linea 2, y entre los corchetes o brackets se indica el id del elemento a manipular junto con su atributo style.color. Esto es lo equivalente a realizar

1
document.getElementById(men).style.color="#d32e12";

en javascript.

Ahora nuestro ejemplo quedaría en algo similar a la imagen siguiente:

Ejemplo de brython

Podemos cambiar de color el texto presionando cualquiera de los cuadros de color.

Como puedes ver utilizar python en el lado del cliente es posible gracias a esta singular librería de JS.

Puedes descargar el ejemplo en github en la siguiente url: https://github.com/gaspardzul/testBrython

Si deseas conocer mas a fondo Bryhton puedes visitar su página oficial en donde se puede consultar un galería de ejemplos desarrollados totalmente en python sustituyendo javascript.



Gaspar Dzul

Desarrollador Front End y Móvil.

Etiquetas