Arquivo de Web - Página 4 de 10

Categorias

– 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!

Instalação e primeiro código com pyscript

Para usar PyScript, basta incluir dois arquivos CSS e JS no HTML. Eles são servidos via CDN (rede de distribuição de conteúdo). Não há necessidade de pip, virtualenv ou servidor especial. Todo o código Python fica dentro de tags <py-script>. Além disso, você pode importar bibliotecas como NumPy ou Matplotlib. Elas também são carregadas via WebAssembly. A voz passiva é aplicada: “o código é executado após a página carregar”. Exemplo completo de uma página PyScript mínima:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h1>Calculadora PyScript</h1>
    <label>Número 1: <input type="number" id="n1" value="5"></label>
    <label>Número 2: <input type="number" id="n2" value="3"></label>
    <button id="botao">Somar</button>
    <div id="resultado"></div>

    <py-script>
        from js import document
        from pyodide import create_proxy

        def somar(event):
            n1 = float(document.getElementById("n1").value)
            n2 = float(document.getElementById("n2").value)
            resultado = n1 + n2
            document.getElementById("resultado").innerHTML = f"Resultado: {resultado}"

        botao = document.getElementById("botao")
        botao.addEventListener("click", create_proxy(somar))
    </py-script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Calculadora PyScript</h1>

<label>Número 1: <input type="number" id="n1" value="5"></label>

<label>Número 2: <input type="number" id="n2" value="3"></label>

<button id="botao">Somar</button>

<py-script>

from js import document

from pyodide import create_proxy

def somar(event):

n1 = float(document.getElementById("n1").value)

n2 = float(document.getElementById("n2").value)

resultado = n1 + n2

document.getElementById("resultado").innerHTML = f"Resultado: {resultado}"

botao = document.getElementById("botao")

botao.addEventListener("click", create_proxy(somar))

</py-script>

</body>

</html>

Esse código cria uma calculadora funcional sem backend. O Python acessa o DOM via objeto js (bridge JavaScript). A função create_proxy converte funções Python em callbacks JS. Salve como .html e abra no navegador. Funciona no Chrome, Firefox e Edge modernos.

Bibliotecas suportadas e limitações atuais

PyScript carrega o ecossistema científico via Pyodide. Isso inclui NumPy, Pandas, Matplotlib e SciPy. Porém, o tempo de carregamento inicial é alto (vários megabytes). Bibliotecas com dependências nativas (como TensorFlow) não funcionam. A comunicação com o DOM é possível, mas verbosa. Além disso, o acesso a arquivos locais é restrito por segurança. Quando usar mesmo com essas limitações? Em tutoriais interativos. Por exemplo, um site que ensina estatística com gráficos ao vivo. Também em dashboards internos de empresas. A fórmula de tempo de carregamento: \(T_{\text{total}} = T_{\text{Wasm}} + T_{\text{libs}}\) Onde cada lib adiciona cerca de 1 a 5 MB. Portanto, evite bibliotecas pesadas desnecessariamente.

PyScript vs. javascript vs. servidor tradicional

JavaScript é muito mais rápido e leve que PyScript. Para manipulação intensa do DOM, JS ainda é a escolha certa. Por outro lado, PyScript permite reusar código Python existente. Cientistas de dados podem migrar notebooks Jupyter para o navegador. Já o backend tradicional exige servidor e infraestrutura. PyScript elimina custos de hospedagem e escala automaticamente. A voz passiva é aplicada: “toda lógica é executada no lado do cliente”. Entretanto, dados sensíveis não podem ficar no frontend. Qualquer usuário pode ver seu código Python (não é ofuscado). Portanto, use PyScript apenas para lógica não secreta. Casos de uso ideais: calculadoras, visualizações, simuladores educacionais. Evite para autenticação, pagamentos ou dados privados. PyScript é uma ferramenta revolucionária em maturação. Experimente em projetos pessoais e compartilhe com a comunidade. O futuro do Python no navegador nunca esteve tão próximo.