Se você trabalha com front-end, provavelmente já se sentiu perdido ao ter que integrar com uma nova API e não fazer ideia do que ela retorna, quais parâmetros você deve enviar, quais erros esperar, etc.

Sem contar que, se você utiliza TypeScript, já deve ter gasto horas e horas criando tipos, interfaces e serviços consumidores de APIs tipados apenas para manter seu código front-end em conformidade com o back-end. Tempo que você poderia ter gasto com uma atividade mais desafiadora, como, por exemplo, centralizar uma div (ba dum tss).

Existem diversas ferramentas no mercado que tentam resolver esse problema, e a mais famosa provavelmente é o tRPC.

Para quem não está familiarizado, tRPC (TypeScript Remote Procedure Call) é uma biblioteca para construir APIs de forma eficiente e tipo-segura usando TypeScript. Com o tRPC, você pode criar APIs sem a necessidade de um cliente HTTP tradicional (como REST ou GraphQL), eliminando a sobrecarga de escrever tipos de dados redundantes tanto no backend quanto no frontend.

Aqui está um exemplo simples de como usar tRPC:

Assumindo que a aplicação é um simples aplicativo de TODO. Primeiro, cria-se um roteador para procedimentos remotos.

// ./api.ts
import { z } from "zod";
import { createRouter } from "@trpc/server";

export const router = createRouter()
  .query("getTodo", {
    input: z.number(),
    resolve({ input }) {
      return TODO_LIST.find((todo) => todo.id === input);
    },
  })
  .mutation("addTodo", {
    input: z.object({ text: z.string() }),
    resolve({ input }) {
      const newTodo = { id: Math.random(), text: input.text, done: false };
      TODO_LIST.push(newTodo);
      return newTodo;
    },
  });

No lado do cliente, o código seria responsável por invocar esses procedimentos exatamente como se fossem funções locais normais.

// ./pages/index.tsx
import { createTRPCClient } from "@trpc/client";
import { router } from "./api.ts";
const client = createTRPCClient({
  url: "http://localhost:2020/api",
  // no typescript-transformer
  transformer: router.transformer,
});
const todoId = 1;
const todo = await client.query("getTodo", todoId);
console.log(todo);

const newTodo = await client.mutation("addTodo", {
  text: "hello world",
});
console.log(newTodo);

Não sei você, mas eu olho para isso e penso: Tá, legal, mas e aquela minha API legada em Java com 300 endpoints?

Embora o tRPC seja uma ferramenta poderosa, ele te prende à stack do TypeScript e não pode ser implementado junto a APIs já existentes. Além disso, criar uma aplicação em tRPC hoje pode se tornar um grande débito técnico no futuro, caso esse projeto eventualmente deixe de ser mantido.

Mr. Smith: Um poderoso framework para criação de scaffolds

Mr. Smith é um framework de código aberto projetado para gerar scaffolds para qualquer linguagem de programação, baseado em templates Go. Ele simplifica o processo de configuração de novos projetos, automatizando a criação de diretórios, arquivos e código base, garantindo consistência e economizando tempo valioso de desenvolvimento. Além disso, o Mr. Smith possui uma TUI personalizável, proporcionando uma experiência intuitiva e eficiente tanto para quem cria scaffolds quanto para quem os utiliza, tornando o processo acessível e fluido para desenvolvedores de todos os níveis.

Como pode ver, Mr. Smith não é apenas uma alternativa ao tRPC, mas sim um framework completo para geração de scaffolds, boilerplates, pipelines de linha de comando e muito mais! Mas enfim, uma coisa de cada vez. Primeiramente, irei focar na solução descrita na headline deste artigo.

Instalação

Você precisa apenas ter o go e o git instalados na sua máquina e executar o comando:

go install github.com/mr-smith-org/mr@latest

Pronto! Feito isso, basta abrir um projeto qualquer em TypeScript e executar o comando

mr module add --repository mr-smith-org/typescript-rest-services

Nesse passo, basta apenas selecionar create-services e pressionar Y.

Um formulário será aberto. O primeiro campo é o diretório onde você deseja que os arquivos sejam criados, e o segundo é onde a verdadeira mágica acontece! Informe uma URL ou diretório local de um arquivo swagger/openapi2.0, que pode ser tanto no formato JSON quanto YAML, e tcharam! Todos os DTOs e serviços para todos os endpoints da sua API acabaram de ser criados!

Sabe o melhor de tudo? Os templates utilizados para criar os arquivos foram copiados para seu repositório e são facilmente editáveis. Além disso, você também pode facilmente criar novos templates, estruturas e pipelines como este para gerar scaffolds para qualquer linguagem de programação, não ficando limitado ao Node/TypeScript como a maioria das soluções existentes. Você também pode criar módulos para comunicação entre microsserviços, pipelines de scripts automatizados, geradores automáticos de releases, changelogs, commits padronizados, as possibilidades são infinitas! Ficou curioso para saber o que está por trás dessa mágica e quer aprender como criar seus próprios scaffolds para seus projetos? Está tudo documentado no nosso site!

Mr. Smith está em fase inicial, e sua contribuição pode fazer a diferença! Se você achou o projeto útil, considere deixar uma ⭐ no GitHub. Caso tenha sugestões, melhorias ou encontre algum problema, fique à vontade para abrir uma issue ou até mesmo colaborar com código. Sua participação ajudará o projeto a crescer e a atender melhor a comunidade de desenvolvedores.

Tentando construir um pedaço de GitHub mais massa!!!