antonino, Autor em Área de Trampo

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.

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

LEGENDA

Nivel_1

Nivel_2

Nivel_3

Transpilação converte código moderno em versões antigas do JavaScript. Ela permite usar recursos novos sem esperar todos os navegadores atualizarem. Primeiramente, isso é essencial para compatibilidade com navegadores legados. Por exemplo, escrevemos com async/await e transpilamos para Promise. Além disso, o TypeScript adiciona tipos estáticos que são removidos na transpilação. A voz passiva é usada aqui: “o código é transformado antes de ser enviado ao navegador”. Quando utilizar transpilação? Em qualquer projeto frontend profissional. Também é necessário quando usamos frameworks como React ou Vue. Ferramentas como Babel, TypeScript e esbuild são as mais comuns. Vamos explorar cada uma com exemplos práticos. Três subtítulos guiarão sua compreensão sobre o tema. No final, você saberá como configurar seu próprio pipeline de build. Prepare-se para entender os bastidores do JavaScript moderno.

Typescript: tipagem estática que vira javascript

TypeScript é um superset do JavaScript com tipos opcionais. Ele detecta erros em tempo de desenvolvimento, não em execução. Quando usar TypeScript? Em projetos com mais de 500 linhas. Também em times grandes ou bibliotecas públicas. A transpilação remove todos os tipos e gera JS puro. O comando tsc (TypeScript compiler) faz esse trabalho. A voz passiva é aplicada: “os arquivos .ts são convertidos em .js”. Um exemplo simples de código TypeScript:

// arquivo: saudacao.ts
interface Pessoa {
    nome: string;
    idade: number;
}

function cumprimentar(pessoa: Pessoa): string {
    return `Olá, ${pessoa.nome}! Você tem ${pessoa.idade} anos.`;
}

const usuario = { nome: "Ana", idade: 30 };
console.log(cumprimentar(usuario));

// Após transpilar com "tsc saudacao.ts", obtemos JavaScript puro

// arquivo: saudacao.ts

interface Pessoa {

nome: string;

idade: number;

}

function cumprimentar(pessoa: Pessoa): string {

return `Olá, ${pessoa.nome}! Você tem ${pessoa.idade} anos.`;

}

const usuario = { nome: "Ana", idade: 30 };

console.log(cumprimentar(usuario));

// Após transpilar com "tsc saudacao.ts", obtemos JavaScript puro

O JavaScript gerado não contém a interface ou os tipos. Eles são usados apenas para validação durante a compilação. Isso é chamado de “erase de tipos” e é uma característica fundamental. TypeScript é a escolha mais popular para frontends sérios.

Babel: o tradutor universal do javascript

Babel transpila código JavaScript moderno para versões antigas. Ele suporta recursos experimentais antes de virarem padrão. Quando usar Babel? Em projetos React ou quando você precisa de máxima compatibilidade. Também é útil para transformar JSX (React) em funções JavaScript normais. O Babel é altamente configurável com plugins e presets. Por exemplo, o preset @babel/preset-env detecta automaticamente os navegadores alvo. A fórmula da compatibilidade é: $C = \frac{N_{\text{navegadores suportados}}}{N_{\text{total}}} \times 100\%$ Quanto maior o valor, mais navegadores antigos são cobertos. Exemplo de configuração e uso do Babel:

// Código moderno (ES2020)
const dobrar = (n) => n * 2;
const numeros = [1, 2, 3];
const dobrados = numeros?.map(dobrar) ?? [];

// Com Babel (preset-env) transpila para ES5
// Resultado aproximado:
// var dobrar = function(n) { return n * 2; };
// var numeros = [1, 2, 3];
// var dobrados = numeros != null ? numeros.map(dobrar) : [];

// Código moderno (ES2020)

const dobrar = (n) => n * 2;

const numeros = [1, 2, 3];

const dobrados = numeros?.map(dobrar) ?? [];

// Com Babel (preset-env) transpila para ES5

// Resultado aproximado:

// var dobrar = function(n) { return n * 2; };

// var numeros = [1, 2, 3];

// var dobrados = numeros != null ? numeros.map(dobrar) : [];

Para executar, instale @babel/cli e @babel/preset-env. Depois rode: babel entrada.js --out-file saida.js. O Babel também lida com JSX, Flux e outras sintaxes.

Ebuild e swc: a nova geração de transpiladores rápidos

esbuild e SWC são transpiladores escritos em Go e Rust. Eles são dezenas de vezes mais rápidos que o Babel tradicional. Quando usar essas ferramentas? Em projetos grandes onde tempo de build importa. Por exemplo, monorepos com centenas de componentes. Ambos suportam TypeScript, JSX e recursos modernos. A desvantagem é o ecossistema de plugins menor que o do Babel. Porém, a velocidade compensa para muitos times. Vite e Next.js já usam esbuild ou SWC internamente. Exemplo de uso do esbuild via linha de comando:

# Instalar esbuild globalmente
npm install -g esbuild

# Transpilar um arquivo TypeScript
esbuild app.ts --bundle --outfile=out.js

# Com minificação e sourcemaps
esbuild app.ts --minify --sourcemap --target=es2015 --outfile=app.min.js

# Instalar esbuild globalmente

npm install -g esbuild

# Transpilar um arquivo TypeScript

esbuild app.ts --bundle --outfile=out.js

# Com minificação e sourcemaps

esbuild app.ts --minify --sourcemap --target=es2015 --outfile=app.min.js

O comando --bundle une todos os imports em um só arquivo. Isso é ideal para produção. A voz passiva é aplicada: “o código é minificado e ofuscado automaticamente”. esbuild também pode servir como servidor de desenvolvimento rápido. Para projetos novos, considere começar com Vite (que usa esbuild por trás). Ele oferece recarga instantânea e builds otimizados. Transpilação não é mais um gargalo com essas ferramentas modernas. Portanto, escolha Babel para flexibilidade máxima. Escolha esbuild ou SWC para velocidade extrema. TypeScript é obrigatório para qualquer projeto acima do tamanho médio. Combine as ferramentas conforme sua necessidade. Seu frontend ficará compatível, rápido e fácil de manter.