Brython - Área de Trampo

– Web
2 – Frontend (transpilado)
2.1 – PyScript (roda Python no navegador)
2.2 – Brython
2.3 – Transcrypt

LEGENDA

Nivel_1

Nivel_2

Nivel_3

Brython implementa Python 3 diretamente dentro do navegador. Assim, você escreve frontend inteiro usando apenas Python. Primeiramente, isso elimina a necessidade de aprender JavaScript. Por exemplo, a manipulação do DOM usa sintaxe Python pura. Além disso, Brython pesa menos de 1 MB (bem leve). Consequentemente, o carregamento inicial é muito rápido. Quando utilizar Brython? Em projetos pequenos e educacionais. Da mesma forma, é ótimo para programadores Python resistentes ao JS. No entanto, a performance fica abaixo do JavaScript nativo. Portanto, use Brython em protótipos, formulários e automação simples. Vamos explorar seus recursos com exemplos práticos. Três subtítulos guiarão você pelo universo Brython.

Primeiros passos com brython

Para usar Brython, inclua o script principal no HTML. Então, baixe do CDN ou instale localmente via npm. Depois, adicione a tag <script type="text/python">. Todo código Python dentro dela será executado normalmente. Você também precisa chamar brython() após o carregamento. Isso inicializa o interpretador e conecta os elementos da página. Assim, as funções ficam registradas para interação. Exemplo mínimo de página com Brython:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.2/brython.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.2/brython_stdlib.js"></script>
</head>
<body onload="brython()">
    <h1>Olá do Brython!</h1>
    <button id="meuBotao">Clique aqui</button>
    <div id="saida"></div>

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

        def responder(evento):
            document["saida"].innerHTML = "Botão clicado com sucesso!"
            alert("Evento disparado via Python")

        document["meuBotao"].bind("click", responder)
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h1>Olá do Brython!</h1>

<button id="meuBotao">Clique aqui</button>

from browser import document, alert

def responder(evento):

document["saida"].innerHTML = "Botão clicado com sucesso!"

alert("Evento disparado via Python")

document["meuBotao"].bind("click", responder)

</script>

</body>

</html>

Salve como brython_exemplo.html e abra no navegador. O módulo browser fornece acesso completo ao DOM. A sintaxe lembra o JavaScript, mas permanece 100% Python. Portanto, a barreira de entrada cai drasticamente para devs Python.

Manipulação do dom e eventos

Brython oferece o módulo browser como ponte para o DOM. Você seleciona elementos com document["id"] ou document.select(".classe"). Além disso, eventos se vinculam com element.bind("click", funcao). O módulo browser.ajax permite chamadas assíncronas ao servidor. Toda a lógica do frontend pode ser escrita em Python puro. Então, quando usar essa abordagem? Em formulários interativos. Também em jogos simples ou animações controladas por Python. Por outro lado, loops pesados sofrerão com performance reduzida. Para gráficos ou cálculos intensos, prefira JavaScript ou WebAssembly. Um exemplo de manipulação de lista dinâmica:

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

def adicionar_item():
    texto = document["novo_item"].value
    if texto:
        lista = document["minha_lista"]
        item = html.LI(texto)
        lista <= item  # Operador de concatenação (append)
        document["novo_item"].value = ""

document["btn_adicionar"].bind("click", adicionar_item)
</script>

<input id="novo_item" type="text" placeholder="Digite um item">
<button id="btn_adicionar">Adicionar</button>
<ul id="minha_lista"></ul>

from browser import document, html

def adicionar_item():

texto = document["novo_item"].value

if texto:

lista = document["minha_lista"]

item = html.LI(texto)

lista <= item # Operador de concatenação (append)

document["novo_item"].value = ""

document["btn_adicionar"].bind("click", adicionar_item)

</script>

<button id="btn_adicionar">Adicionar</button>

Note o operador <= para adicionar elementos filhos. Essa é uma peculiaridade que torna o código mais legível. Assim, a atualização do DOM acontece de forma declarativa.

Brython vs. pyscript: qual escolher?

Brython é mais leve e carrega muito mais rápido. Ele não depende de WebAssembly, apenas JavaScript puro. Portanto, funciona em navegadores mais antigos sem problemas. PyScript é mais pesado, mas suporta NumPy e Pandas. Então, quando usar Brython? Em projetos sem bibliotecas científicas. Por exemplo, formulários, validações e jogos simples. PyScript se destaca em data science e visualizações pesadas. A fórmula de escolha pode ajudar na decisão: \(Escolha = \begin{cases} \text{Brython} & \text{se apenas Python puro} \\ \text{PyScript} & \text{se precisar de NumPy/Matplotlib} \end{cases}\) Ambos permitem reutilizar código Python existente no frontend. Brython tem uma comunidade menor, mas existe desde 2012. PyScript é mais novo e promissor, porém ainda instável. Para aprendizado e protótipos rápidos, Brython é excelente. Além disso, ele pode integrar com Vue ou React como “glue code”. Experimente migrar um pequeno projeto de JS para Brython. A sensação de escrever frontend em Python é libertadora. Comece hoje mesmo e nunca mais sofra com ponto e vírgula!

Indice

Primeiros passos com brython

Manipulação do dom e eventos

Brython vs. pyscript: qual escolher?

Deixe um comentário Cancelar resposta