Engenharia Frontend¶

A interface do Data Profiler é uma Single Page Application (SPA) moderna, construída para oferecer feedback visual instantâneo durante o processamento de grandes volumes de dados.

A arquitetura prioriza a densidade de informação (via DataGrid) e a reatividade (via Server-Sent Events), eliminando a necessidade de polling constante.

1. Stack Tecnológica¶

As decisões técnicas visam performance de renderização e estabilidade.

Tecnologia	Versão	Função
React	`19.x`	Biblioteca de UI principal.
Vite	`7.x`	Build tool e Hot Module Replacement (HMR).
MUI (Material UI)	`7.x`	Design System Enterprise (componentes prontos).
Recharts	`3.x`	Visualização de dados estatísticos.
React Error Boundary	`6.x`	Tratamento global de falhas na UI.

Performance de Build

O projeto utiliza SWC (Rust) no lugar do Babel para transpilação, reduzindo o tempo de build em ambientes de CI/CD.

2. Arquitetura de Componentes¶

A aplicação segue uma hierarquia de componentes funcionais. O estado global é minimizado em favor de estados locais e composição.

graph TD
    Root[main.jsx] --> ErrorBoundary[GlobalErrorFallback]
    ErrorBoundary --> App[App.jsx]

    subgraph "Fluxo de Upload"
        App --> Uploader[FileUploader]
        Uploader -->|Inicia SSE| Progress[UploadProgress]
    end

    subgraph "Visualização"
        App --> Report[DataReport]
        Report --> Stats[ColumnAnalysisCard]
        Report --> Grid[DataPreviewTable]
        Report --> Charts[Recharts]
    end

Figura 1: Fluxo dentro do frontend

3. Comunicação Real-Time (SSE)¶

Para evitar sobrecarga no servidor com requisições HTTP repetidas (polling), utilizamos Server-Sent Events (SSE).

O cliente faz POST em /upload.
O servidor retorna 202 Accepted imediatamente.
O cliente abre conexão em /events.
O servidor envia atualizações de progresso (0-100%) via stream de texto.

Conexões Persistentes

O frontend deve gerenciar o ciclo de vida do EventSource, fechando a conexão explicitamente ao receber o evento de complete ou error para evitar vazamento de recursos no navegador.

4. Integração Single Binary (Embed)¶

O frontend não é servido por um servidor Node.js separado em produção. Ele é compilado e embutido dentro do binário Go.

O pacote frontend utiliza a diretiva embed do Go 1.16+ para virtualizar o sistema de arquivos da pasta dist.

frontend/embed.go

package frontend

import (
    "embed"
    "io/fs"
    "net/http"
)

// A diretiva abaixo diz ao Go: "Inclua a pasta 'dist' inteira dentro do binário".
// Como este arquivo está DENTRO da pasta frontend, o caminho relativo é apenas "dist".
//
//go:embed dist/*
var distFS embed.FS

// GetFileSystem retorna o sistema de arquivos pronto para o servidor web.
// Ele já faz o "Sub" para entrar na pasta dist, assim o servidor acha o index.html na raiz.
func GetFileSystem() (http.FileSystem, error) {
    // Entra na subpasta "dist" do sistema de arquivos embutido
    fsys, err := fs.Sub(distFS, "dist")
    if err != nil {
        return nil, err
    }
    return http.FS(fsys), nil
}

Processo de Build¶

Frontend: npm run build gera os arquivos estáticos na pasta dist/.
Go: O compilador lê a diretiva //go:embed dist/*.
Resultado: Um único executável .exe contém toda a aplicação React, HTML, CSS e imagens.

5. Padrões de Código e Linting¶

O projeto utiliza ESLint com configuração "Flat Config" para garantir a qualidade do código JavaScript/JSX.

eslint.config.js

    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },