Arquivo de Web - Página 5 de 10

Categorias

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.

– Web
1 – Backend (servidor)
1.1 – Sincrono (Django, Flask, FastAPI)
1.2 – Assincrono (FastAPI, Sanic, Aiohttp)
1.3 – WebSockets (Socket.IO, WebSockets)

LEGENDA

Nivel_1

Nivel_2

Nivel_3

WebSockets mantêm uma conexão aberta entre cliente e servidor. Diferente do HTTP, os dados trafegam nas duas direções livremente. Primeiramente, isso permite atualizações instantâneas sem recarregar a página. Por exemplo, chats, notificações ou jogos online usam essa tecnologia. O servidor pode enviar mensagens ao cliente a qualquer momento. Além disso, a latência é muito menor que requisições HTTP tradicionais. A voz passiva é usada aqui: “uma única conexão TCP é estabelecida e mantida”. Quando utilizar WebSockets? Em aplicações que exigem tempo real. Dashboards de monitoramento, colaboração simultânea ou streaming de dados. Duas abordagens principais existem no ecossistema Python. WebSockets puros (RFC 6455) e Socket.IO (biblioteca com fallbacks). Vamos explorar ambas com exemplos práticos. Escolha a que melhor se adapta ao seu projeto.

Websockets puros: leve e nativo

WebSockets puros seguem o padrão oficial da web. Eles são suportados por todos os navegadores modernos. Em Python, a biblioteca websockets é a mais madura. Quando usar WebSockets puros? Em projetos que exigem baixo overhead. Também quando você controla tanto cliente quanto servidor. A desvantagem é a falta de fallback para conexões antigas. Além disso, não há reconexão automática ou salas prontas. A voz passiva é aplicada: “os eventos são tratados com funções assíncronas”. Um exemplo de servidor WebSocket puro com websockets:

import asyncio
import websockets
from datetime import datetime

async def enviar_horario(websocket, path):
    """Envia a hora atual a cada segundo."""
    try:
        while True:
            mensagem = f"Horário: {datetime.now().strftime('%H:%M:%S')}"
            await websocket.send(mensagem)
            await asyncio.sleep(1)
    except websockets.exceptions.ConnectionClosed:
        print("Cliente desconectado")

async def main():
    async with websockets.serve(enviar_horario, "localhost", 8765):
        print("Servidor WebSocket rodando em ws://localhost:8765")
        await asyncio.Future()  # Roda para sempre

if __name__ == "__main__":
    asyncio.run(main())

import asyncio

import websockets

from datetime import datetime

async def enviar_horario(websocket, path):

"""Envia a hora atual a cada segundo."""

try:

while True:

mensagem = f"Horário: {datetime.now().strftime('%H:%M:%S')}"

await websocket.send(mensagem)

await asyncio.sleep(1)

except websockets.exceptions.ConnectionClosed:

print("Cliente desconectado")

async def main():

async with websockets.serve(enviar_horario, "localhost", 8765):

print("Servidor WebSocket rodando em ws://localhost:8765")

await asyncio.Future() # Roda para sempre

if __name__ == "__main__":

asyncio.run(main())

Para testar, abra o console do navegador e digite: let ws = new WebSocket("ws://localhost:8765"); ws.onmessage = (e) => console.log(e.data); O servidor enviará a hora atualizada a cada segundo. Isso é WebSocket puro: simples, rápido e eficiente.

Socket.IO: alto nível e robusto

Socket.IO é uma biblioteca que emula WebSockets com fallbacks. Se WebSocket não estiver disponível, usa polling HTTP ou outras técnicas. Além disso, oferece reconexão automática e salas de conversa. Quando usar Socket.IO? Em aplicações que precisam de confiabilidade máxima. Também quando você quer funcionalidades prontas como broadcasts. A desvantagem é o overhead extra e a necessidade de cliente específico. O servidor Python python-socketio é fácil de integrar com Flask ou FastAPI. Exemplo de servidor Socket.IO com Flask:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit, send
import time

app = Flask(__name__)
app.config['SECRET_KEY'] = 'segredo!'
socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('mensagem_cliente')
def handle_mensagem(data):
    print(f"Recebido: {data}")
    # Envia para todos os clientes conectados
    emit('resposta_servidor', f"Eco: {data}", broadcast=True)

@socketio.on('ping')
def handle_ping():
    emit('pong', {'timestamp': time.time()})

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=5000, debug=True)

from flask import Flask, render_template

from flask_socketio import SocketIO, emit, send

import time

app = Flask(__name__)

app.config['SECRET_KEY'] = 'segredo!'

socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('mensagem_cliente')

def handle_mensagem(data):

print(f"Recebido: {data}")

# Envia para todos os clientes conectados

emit('resposta_servidor', f"Eco: {data}", broadcast=True)

@socketio.on('ping')

def handle_ping():

emit('pong', {'timestamp': time.time()})

if __name__ == '__main__':

socketio.run(app, host='0.0.0.0', port=5000, debug=True)

No lado cliente, você precisa incluir a biblioteca socket.io.js. Depois, conecte com io.connect('http://localhost:5000'). Socket.IO gerencia automaticamente a reconexão se o servidor cair. Isso é excelente para aplicações móveis ou redes instáveis.

Comparação direta e critérios de escolha

WebSockets puros são melhores para desempenho máximo. Eles têm menor latência e menos tráfego de controle. Socket.IO é superior em confiabilidade e facilidade de uso. A fórmula da taxa de sucesso em redes ruins: $S = \frac{C_{\text{sucesso}}}{C_{\text{total}}} \times 100\%$ Socket.IO atinge valores maiores em conexões instáveis. Portanto, para intranet ou redes controladas, prefira WebSockets puros. Para aplicações públicas na internet, Socket.IO é mais seguro. Ambos são assíncronos e integram bem com FastAPI ou Aiohttp. Um exemplo de cliente WebSocket puro em Python:

import asyncio
import websockets

async def cliente():
    uri = "ws://localhost:8765"
    async with websockets.connect(uri) as websocket:
        await websocket.send("Olá servidor!")
        resposta = await websocket.recv()
        print(f"Resposta: {resposta}")

asyncio.run(cliente())

import asyncio

import websockets

async def cliente():

uri = "ws://localhost:8765"

async with websockets.connect(uri) as websocket:

await websocket.send("Olá servidor!")

resposta = await websocket.recv()

print(f"Resposta: {resposta}")

asyncio.run(cliente())

Já para Socket.IO cliente em Python, use python-socketio[client]. A escolha final depende da sua tolerância a complexidade. Comece com WebSockets puros se você controla o ambiente. Migre para Socket.IO se encontrar problemas de conectividade. Ambos são ferramentas poderosas para o arsenal do desenvolvedor. Implemente seu primeiro chat em tempo real ainda hoje!

Frontend Transpilado