React e gRPC com ReactRPC
Neste post, iremos explorar ReactRPC, uma biblioteca de integração do lado do cliente para React e gRPC-web para ajudar os desenvolvedores a ter mais facilidade na criação de uma arquitetura de serviço gRPC completa de ponta a ponta.
O que é gRPC-web?
Nos últimos anos, o gRPC tem sido o padrão ouro de estruturas escalonáveis e de desempenho para interatividade de microsserviços.
Ao converter todos os dados em binários, o gRPC é capaz de enviar informações pela Internet em um ritmo muito mais rápido e ser facilmente compreensível por qualquer linguagem de programação popular.
Empresas como Google, Netflix e Spotify se uniram a ele, anunciando a migração total das atuais estruturas de comunicação interna para adotar totalmente o gRPC em sua arquitetura de servidor.
Para aproveitar o poder do gRPC no navegador, o Google e o Improbable desenvolveram duas implementações diferentes de uma biblioteca do lado do cliente chamada gRPC-web.
Embora seja um marco incrível, a criação de uma integração mais perfeita para back-ends escritos em qualquer linguagem popular para interagir diretamente com os clientes, o gRPC-web ainda tem alguns detalhes a serem resolvidos antes de encontrar um lugar confortável na maioria dos kits de ferramentas de desenvolvedores front-end.
Em particular, um ponto problemático foi adotar o gRPC-web em estruturas da web modernas que todos os desenvolvedores usam para construir aplicativos em grande escala.
Conheça o ReactRPC!
Antes do ReactRPC, os desenvolvedores de front-end que buscavam usar o gRPC-web teriam que configurar muitos bolerplates antes de cada solicitação ser enviada.
Felizmente, o gRPC-web abstrai todos esses problemas, reduzindo a curva de aprendizado da implementação, melhorando a implementação rápida e mantendo o código legível.
Em primeiro lugar, para que o gRPC possa criar canais de comunicação entre servidores de diferentes linguagens, ele cria um acordo sobre o que pode ser enviado e recebido entre o cliente e o servidor na forma de um arquivo .proto.
Para que o navegador entenda este contrato, ele deve converter o arquivo .proto em dois arquivos Javascript, exigindo que os desenvolvedores se aprofundem no código gerado automaticamente para descobrir quais chamadas gRPC-web foram nomeadas e, em seguida, nos documentos gRPC para determinar como usá-las .
Isso abre possíveis erros nas configurações iniciais e análises profundas e demoradas nas duas especificações diferentes do gRPC-web, o que pode superar quaisquer benefícios potenciais de abandonar sua arquitetura RESTful.
O ReactRPC tira todo o esforço das mãos do desenvolvedor, pegando os dois arquivos como argumentos (bem como o URL ao qual você está se conectando) e analisando esses arquivos para você no estilo do Google ou do Improbable.
É simples:
const messages = require("../../helloworld_pb.js");
const clients = require("../../helloworld_grpc_web_pb.js");
const {improbRPC,googleRPC} = require("reactRPC");reactRPC = googleRPC // ou reactRPC = improbRPCreactRPC.build(
messages,
clients,
"http://" + window.location.hostname + ":8080"
);
A segunda abstração que o ReactRPC faz é manipular mensagens gRPC para você.
Por meio do gRPC-web, você só pode enviar mensagens predefinidas fornecidas pelo arquivo proto.
Cada dado que você deseja anexar a esta mensagem deve ser adicionado manualmente por métodos setter na classe da mensagem, o que torna difícil de manejar para mensagens grandes e complexas e resulta em código repetitivo ao enviar várias mensagens.
Com ReactRPC você pode usar objetos para representar suas mensagens.
Para permitir que o ReactRPC saiba que esta é uma mensagem, você define os pedaços de dados que precisam ser enviados usando pares de valores-chave correspondentes ao seu arquivo proto e, em seguida, define um campo msgType com o nome da mensagem.
//proto filemessage fullName{
string firstName = 1;
string lastName = 2;}//index.jsconst msg = {
firstName: "John",
lastName: "Doe",
msgType: "fullName"
}
Por último, as chamadas da função estão disponíveis em todos os seus componentes, tornando tão fácil enviar um unário gRPC-web e chamadas de streaming quanto uma solicitação POST.
Ele modela seu arquivo proto de perto, portanto, enviar qualquer chamada é tão simples quanto ler o arquivo proto para o serviço e o nome da chamada e, em seguida, chamá-los em seus adereços com sua mensagem, headers e callbacks *.
*Callback não são necessários para chamada de streaming
//proto fileservice Greeter {
rpc SayHello (HelloRequest) returns (HelloReply);
}
//index.jsthis.props.Greeter.sayHello(
message,
{},
(err, response) => {
console.log(response)
}
);
E você está pronto! ReactRPC fez todo o trabalho pesado para você na configuração de seu front-end. Esperamos que esta postagem tenha encorajado você a começar a implementar gRPC-web em seu aplicativo React.
