FastAPI e HTMX: uma abordagem moderna para Full Stack

#Python

Os benefícios do FastAPI

FastAPI é uma estrutura web moderna e rápida (de alto desempenho) para construir APIs com Python 3.7+ com base em dicas de tipo Python padrão. Aqui estão alguns de seus principais benefícios:

Desempenho : FastAPI é construído em Starlette e Pydantic, tornando-o tão rápido quanto NodeJS e Go (graças a Starlette) e um dos frameworks mais rápidos para Python.

Facilidade de uso : oferece uma API intuitiva que o torna fácil de usar, mas poderoso. Você pode esperar uma aceleração significativa no desenvolvimento devido à sua simplicidade.

Documentação automática : com FastAPI, a documentação da sua API é gerada automaticamente usando Swagger UI e ReDoc, tornando mais fácil para os desenvolvedores entenderem e usarem sua API.

Segurança de tipo : aproveitando as dicas de tipo do Python, o FastAPI ajuda a detectar erros no início do desenvolvimento, levando a um código mais robusto e livre de erros.

Os benefícios do HTMX

HTMX é uma biblioteca JavaScript que permite acessar AJAX, transições CSS, WebSockets e eventos enviados pelo servidor diretamente em HTML, tornando-a uma ferramenta poderosa para aprimorar páginas da web com conteúdo dinâmico sem escrever JavaScript complexo. Seus benefícios incluem:

Simplicidade : você pode adicionar comportamento dinâmico às suas páginas web usando atributos diretamente no seu HTML, facilitando a leitura e a manutenção.

Aprimoramento progressivo : o HTMX funciona como um aprimoramento nas páginas renderizadas pelo servidor existentes, permitindo que você aprimore progressivamente a interatividade do seu aplicativo da web.

Não há necessidade de estruturas JavaScript complexas : com HTMX, você pode criar aplicativos da Web altamente interativos sem depender de estruturas JavaScript pesadas, levando a tempos de carregamento mais rápidos e desempenho aprimorado.

Construindo um aplicativo Full Stack com FastAPI e HTMX

Agora que entendemos os benefícios, vamos nos aprofundar na criação de um aplicativo simples que lista itens e permite aos usuários adicionar novos itens à lista de forma dinâmica.

Etapa 1: configure seu projeto

Primeiro, crie um novo diretório de projeto e configure um ambiente virtual:

mkdir fastapi-htmx-demo
cd fastapi-htmx-demo
python3 -m venv venv
source venv/bin/activate

Instale FastAPI, Uvicorn (um servidor ASGI) e Jinja2 para modelagem:

pip install fastapi uvicorn jinja2 python-multipart

Etapa 2: crie seu aplicativo FastAPI

Crie um arquivo chamado main.pye configure seu aplicativo FastAPI e rotas:

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

# Armazenamento de dados
items = ["Item 1", "Item 2"]

@app.get("/", response_class=HTMLResponse)
def get_items(request: Request):
return templates.TemplateResponse("items.html", {"request": request, "items": items})

@app.post("/add-item")
def add_item(request: Request, item: str = Form(...)):
items.append(item)
return templates.TemplateResponse("partials/item.html", {"request": request, "item": item})

Etapa 3: configurar modelos Jinja2

Crie um templatesdiretório e adicione um items.htmlarquivo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FastAPI + HTMX Demo</title>
  <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
  <h1>Item List</h1>
  <ul id="item-list">
      {% for item in items %}
      <li>{{ item }}</li>
      {% endfor %}
  </ul>
  <form hx-post="/add-item" hx-target="#item-list" hx-swap="beforeend" hx-include="#item-input">
      <input type="text" id="item-input" name="item" required>
      <button type="submit">Add Item</button>
  </form>
</body>
</html>

Em seguida, crie um modelo parcial chamado item.html. Isso será usado para renderizar novos itens no servidor FastAPI à medida que são adicionados por meio da chamada HTMX POST no navegador.

<li>{{ item }}</li>

Etapa 4: execute seu aplicativo

Execute seu aplicativo usando Uvicorn:

uvicorn main:app --reload

Visite http://127.0.0.1:8000em seu navegador para ver seu aplicativo em ação.

Se você estiver interessado em ver todo o código em um só lugar, confira aqui: https://github.com/jaydev/fastapi-htmx-demo

Conclusão

FastAPI fornece um backend robusto, oferecendo alto desempenho e facilidade de desenvolvimento, enquanto HTMX permite interações dinâmicas de frontend com esforço mínimo. Essa pilha de tecnologia tem uma curva de aprendizado fácil e é útil em uma ampla variedade de situações.

Sei que buscarei essa combinação no futuro, à medida que criar aplicativos. Deixe-me saber qual é o seu par de back-end HTMX favorito nos comentários!