Curso de Brython en Español - Introducción


Primeros pasos con Brython

Si te encanta python y quieres adentrarte en el mundo del desarrollo web del lado del cliente (lo que se ejecuta en el navegador) ¡estás de enhorabuena!

Brython es una implementación de python que se ejecuta en el navegador web con la que puedes crear aplicaciones web sin tener que utilziar javascript.

!! Bienvenido a este curso de Brython en español !!


¿Qué es Brython?

Brython es una implementación del lenguaje de programación Python que se ejecuta en el navegador web, lo que significa que brython puede utilizarse para crear aplicaciones web que se ejecutan en el frontend sin utilizar javascript.

Esta fantástica implementación de python funciona perfectamente tanto en navegadores de escritorio como en navegadores web móviles, y es posible crear aplicaciones para iOs/Android combinando Apache Cordova y Brython.

Por otra parte, utiliando librerías para CPython como eel, o utilizando ironpyton y webview2 puedes crear aplicaciones de escritorio con interfaz gráfica basada en tecnología web, al estilo de las aplicaciones electron.

Como bien dice la web oficial de brython, este no pretende ser una sustitución de javascript, sino una opción mas para los que están mas cómodos con python. De hecho, puedes crear aplicaciones cuya lógica sea una combinación inteligente de brython y javascript.

¿quieres saber mas? creemos una pequeña aplicación


Tu primera aplicación Brython

Observa el siguiente archivo index.html:

<!--index.html-->

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera aplicación Brython</title>
    <script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>
</head>

<body onload="brython()">

    <script type="text/python">

    from browser import document, alert
    from browser.html import *

    alert('HOLA MUNDO BRYTHON!')
    document <= H1('HOLA MUNDO! :D')

    </script>

</body>

</html>

Crea la aplicación tú mismo

  1. Copia el código html anterior en un archivo index.html.
  2. Abre el terminal o cmd y ve al directorio en el que has creado el archivo. Allí ejecuta python -m http.server.
  3. En el navegador web abre la dirección http://localhost:8000.

De esta manera habrás creado un servidor web local que sirve los archivos que se encuentren dentro de la carpeta en la que creaste index.html.

¿Qué hemos hecho?

Analicemos el código de index.html:

<script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>

brython.min.js es el intérprete de brython y está disponible online. Debes cargarlo en el documento html para poder usar brython.

Si lo prefieres puedes hacer una instalación local de brython.

<body onload="brython()">

La función brython() siempre debe ejecutarse una vez que se ha cargado el body del documento. Esta función analiza el código html de la página en busca de scripts de tipo text/python.

<script type="text/python">

from browser import document, alert
from browser.html import *

alert('HOLA MUNDO BRYTHON!')
document <= H1('HOLA MUNDO! :D')

</script>

Para que el código fuente dentro de una etiqueta sea reconocido como código python, el tipo de la etiqueta debe ser text/python o text/python3. En el interior de esta etiqueta hemos escrito la lógica de la aplicación, ¡en python!

De momento no te preocupes demasiado por el código python, lo veremos mas en detalle en las proximas secciones. Quédate con que el módulo mas importante de brython es browser, y entre otras cosas permite mostrar alertas y añadir elementos al documento html.


Tu segunda aplicación Bython

Modifiquemos un poco el archivo index.html. Vamos a separar el html del código python:

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>
</head>

<body onload="brython()">

    <script type="text/python" src="/app.py"></script>

</body>

</html>

Como puedes observar, hemos eliminado el código python, pero hemos enlazado la etiqueta script con un archivo app.py en la raíz del servidor:

<script type="text/python" src="/app.py"></script>

De manera que hay que crear un archivo app.py junto a index.html:

from browser import document
from browser.html import *

for i in range(10):
    document <= P(f'Brython Mola! {i+1}')

Separar el html del código python es mas satisfactorio, ya que te permite utilizar un editor de código python con resaltado de sintaxis.


RESUMEN

Ya sabes lo que es brython y has creado dos aplicaciones sencillas que puedes ejecutar en el navegador.

Para ejecutar aplicaciones brython tienes utilizar un servidor web. Puedes crear un servidor local con python -m http.server y ver tu aplicación en la dirección http://localhost:8000.

A la hora de crear apps brython necesitas como mínimo un archivo html, pero resulta mas conveniente separar el código python en un archivo externo y enlazarlo en una etiqueta script. De esta manera puedes escribir python desde tu editor favorito con las ventajas del resaltado de sintaxis.


En la próxima sección aprenderás a acceder y manipular los elementos del DOM.