Go para Frontend: Guia Pratico

projeto/
├── api/                  # Código Go do BFF
│   ├── handlers/
│   ├── types/            # Structs compartilhados
│   └── main.go
├── wasm/                 # Módulos Go compilados para Wasm
│   ├── processing/
│   └── build.sh
├── web/                  # Aplicação frontend (Next.js, Vite, etc.)
│   ├── src/
│   │   ├── components/
│   │   ├── lib/
│   │   │   ├── wasm-loader.ts
│   │   │   └── api-client.ts
│   │   └── generated/    # Tipos TS gerados a partir do Go
│   └── package.json
├── scripts/
│   └── generate-types.go
└── Makefile

// wasm/processing/main.go
package main
 
import (
	"encoding/csv"
	"fmt"
	"math"
	"strconv"
	"strings"
	"syscall/js"
)
 
type Stats struct {
	Count   int     `json:"count"`
	Sum     float64 `json:"sum"`
	Average float64 `json:"average"`
	Min     float64 `json:"min"`
	Max     float64 `json:"max"`
	StdDev  float64 `json:"stdDev"`
}
 
func processCSV(this js.Value, args []js.Value) interface{} {
	if len(args) < 2 {
		return js.ValueOf(map[string]interface{}{
			"error": "argumentos necessários: csvContent (string), columnIndex (int)",
		})
	}
 
	csvContent := args[0].String()
	columnIndex := args[1].Int()
 
	reader := csv.NewReader(strings.NewReader(csvContent))
	records, err := reader.ReadAll()
	if err != nil {
		return js.ValueOf(map[string]interface{}{
			"error": fmt.Sprintf("erro ao parsear CSV: %v", err),
		})
	}
 
	if len(records) < 2 {
		return js.ValueOf(map[string]interface{}{
			"error": "CSV precisa ter pelo menos um header e uma linha de dados",
		})
	}
 
	values := make([]float64, 0, len(records)-1)
	for i := 1; i < len(records); i++ {
		if columnIndex >= len(records[i]) {
			continue
		}
		val, err := strconv.ParseFloat(strings.TrimSpace(records[i][columnIndex]), 64)
		if err == nil {
			values = append(values, val)
		}
	}
 
	stats := calculateStats(values)
 
	return js.ValueOf(map[string]interface{}{
		"count":   stats.Count,
		"sum":     stats.Sum,
		"average": stats.Average,
		"min":     stats.Min,
		"max":     stats.Max,
		"stdDev":  stats.StdDev,
	})
}
 
func calculateStats(values []float64) Stats {
	if len(values) == 0 {
		return Stats{}
	}
 
	stats := Stats{
		Count: len(values),
		Min:   values[0],
		Max:   values[0],
	}
 
	for _, v := range values {
		stats.Sum += v
		if v < stats.Min {
			stats.Min = v
		}
		if v > stats.Max {
			stats.Max = v
		}
	}
 
	stats.Average = stats.Sum / float64(stats.Count)
 
	var varianceSum float64
	for _, v := range values {
		diff := v - stats.Average
		varianceSum += diff * diff
	}
	stats.StdDev = math.Sqrt(varianceSum / float64(stats.Count))
 
	return stats
}
 
func main() {
	c := make(chan struct{})
	js.Global().Set("goProcessCSV", js.FuncOf(processCSV))
	fmt.Println("Módulo Wasm de processamento CSV carregado")
	<-c
}

GOOS=js GOARCH=wasm go build -o processing.wasm ./wasm/processing/
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./web/public/

// web/src/lib/wasm-loader.ts
 
interface GoWasmInstance {
  run(instance: WebAssembly.Instance): Promise<void>;
  importObject: WebAssembly.Imports;
}
 
declare class Go implements GoWasmInstance {
  constructor();
  run(instance: WebAssembly.Instance): Promise<void>;
  importObject: WebAssembly.Imports;
}
 
interface WasmModuleState {
  loaded: boolean;
  loading: Promise<void> | null;
  error: Error | null;
}
 
const moduleStates = new Map<string, WasmModuleState>();
 
export async function loadGoWasm(wasmPath: string): Promise<void> {
  const existing = moduleStates.get(wasmPath);
 
  if (existing?.loaded) {
    return;
  }
 
  if (existing?.loading) {
    return existing.loading;
  }
 
  const state: WasmModuleState = {
    loaded: false,
    loading: null,
    error: null,
  };
 
  const loadPromise = (async () => {
    try {
      const go = new Go();
 
      let wasmInstance: WebAssembly.Instance;
 
      if (typeof WebAssembly.instantiateStreaming === "function") {
        const result = await WebAssembly.instantiateStreaming(
          fetch(wasmPath),
          go.importObject
        );
        wasmInstance = result.instance;
      } else {
        const response = await fetch(wasmPath);
        const bytes = await response.arrayBuffer();
        const result = await WebAssembly.instantiate(bytes, go.importObject);
        wasmInstance = result.instance;
      }
 
      // go.run é uma Promise que resolve quando o programa Go termina.
      // Como nosso main() bloqueia com <-c, ela nunca resolve
      // e o módulo fica disponível indefinidamente.
      go.run(wasmInstance);
 
      state.loaded = true;
    } catch (err) {
      state.error = err instanceof Error ? err : new Error(String(err));
      throw state.error;
    }
  })();
 
  state.loading = loadPromise;
  moduleStates.set(wasmPath, state);
 
  return loadPromise;
}
 
// Tipos para o módulo de processamento CSV
export interface CSVStats {
  count: number;
  sum: number;
  average: number;
  min: number;
  max: number;
  stdDev: number;
}
 
interface CSVStatsResult extends CSVStats {
  error?: never;
}
 
interface CSVStatsError {
  error: string;
}
 
type CSVProcessResult = CSVStatsResult | CSVStatsError;
 
export async function processCSVWithWasm(
  csvContent: string,
  columnIndex: number
): Promise<CSVStats> {
  await loadGoWasm("/processing.wasm");
 
  const goProcessCSV = (
    globalThis as unknown as { goProcessCSV: (csv: string, col: number) => CSVProcessResult }
  ).goProcessCSV;
 
  if (typeof goProcessCSV !== "function") {
    throw new Error(
      "Função goProcessCSV não encontrada. O módulo Wasm pode não ter carregado corretamente."
    );
  }
 
  const result = goProcessCSV(csvContent, columnIndex);
 
  if ("error" in result && result.error) {
    throw new Error(result.error);
  }
 
  return result as CSVStats;
}

// web/src/components/CSVAnalyzer.tsx
import { useState, useCallback } from "react";
import { processCSVWithWasm, type CSVStats } from "../lib/wasm-loader";
 
interface AnalysisState {
  status: "idle" | "loading" | "success" | "error";
  stats: CSVStats | null;
  errorMessage: string | null;
  processingTimeMs: number | null;
}
 
export function CSVAnalyzer() {
  const [state, setState] = useState<AnalysisState>({
    status: "idle",
    stats: null,
    errorMessage: null,
    processingTimeMs: null,
  });
  const [columnIndex, setColumnIndex] = useState(0);
 
  const handleFileUpload = useCallback(
    async (event: React.ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0];
      if (!file) return;
 
      setState((prev) => ({
        ...prev,
        status: "loading",
        errorMessage: null,
      }));
 
      try {
        const csvContent = await file.text();
        const startTime = performance.now();
        const stats = await processCSVWithWasm(csvContent, columnIndex);
        const endTime = performance.now();
 
        setState({
          status: "success",
          stats,
          errorMessage: null,
          processingTimeMs: Math.round(endTime - startTime),
        });
      } catch (err) {
        setState({
          status: "error",
          stats: null,
          errorMessage:
            err instanceof Error ? err.message : "Erro desconhecido",
          processingTimeMs: null,
        });
      }
    },
    [columnIndex]
  );
 
  return (
    <div>
      <h2>Análise de CSV com WebAssembly (Go)</h2>
      <div>
        <label htmlFor="column-index">Índice da coluna numérica: </label>
        <input
          id="column-index"
          type="number"
          min={0}
          value={columnIndex}
          onChange={(e) => setColumnIndex(Number(e.target.value))}
        />
      </div>
      <input
        type="file"
        accept=".csv"
        onChange={handleFileUpload}
        disabled={state.status === "loading"}
      />
      {state.status === "loading" && <p>Processando arquivo via Wasm...</p>}
      {state.status === "error" && <p>Erro: {state.errorMessage}</p>}
      {state.status === "success" && state.stats && (
        <div>
          <h3>Resultados</h3>
          <p>Tempo de processamento: {state.processingTimeMs}ms</p>
          <ul>
            <li>Registros processados: {state.stats.count}</li>
            <li>Soma: {state.stats.sum.toFixed(2)}</li>
            <li>Média: {state.stats.average.toFixed(2)}</li>
            <li>Mínimo: {state.stats.min.toFixed(2)}</li>
            <li>Máximo: {state.stats.max.toFixed(2)}</li>
            <li>Desvio padrão: {state.stats.stdDev.toFixed(4)}</li>
          </ul>
        </div>
      )}
    </div>
  );
}

// api/types/dashboard.go
package types
 
type TimeRange string
 
const (
	TimeRangeDay   TimeRange = "day"
	TimeRangeWeek  TimeRange = "week"
	TimeRangeMonth TimeRange = "month"
)