O que é gRPC-Web? Tudo o que você precisa saber

Olá! Se você está acompanhando as últimas tendências em desenvolvimento web, provavelmente já ouviu o termo gRPC-Web sendo mencionado. Talvez você seja um desenvolvedor se perguntando se é algo que deve integrar aos seus projetos. Ou talvez você esteja apenas curioso sobre toda a agitação. De qualquer forma, você veio ao lugar certo. Vamos mergulhar no mundo do gRPC-Web e, ao final deste post, você terá uma compreensão sólida do que é, por que é útil e como você pode começar a usá-lo.

O que é gRPC-Web?

Primeiro as coisas: o que exatamente é gRPC-Web? Em essência, gRPC-Web é uma biblioteca de cliente JavaScript que permite que aplicações web se comuniquem com serviços gRPC. Ela estende a funcionalidade do gRPC (Google Remote Procedure Call), que é um framework de código aberto que utiliza HTTP/2 para transportar mensagens. O gRPC foi projetado para facilitar a construção de APIs escaláveis e eficientes.

Uma Rápida Recapitulação sobre gRPC

Antes de mergulharmos mais fundo no gRPC-Web, vamos fazer uma breve revisão sobre o gRPC em si. O gRPC foi desenvolvido pelo Google e é amplamente utilizado para comunicação entre microserviços. Ele aproveita o HTTP/2, Protocolo Buffers (protobufs) e fornece recursos como autenticação, balanceamento de carga e mais. Com o gRPC, você define seus métodos de serviço e tipos de mensagem usando protocolos buffers, que geram código tanto para o cliente quanto para o servidor.

Por que gRPC-Web?

Então, por que precisamos do gRPC-Web quando já temos o gRPC? A resposta está nas limitações dos navegadores. Enquanto o gRPC é excelente para comunicação servidor a servidor, ele não funciona diretamente com navegadores porque eles não suportam trailers HTTP/2, dos quais o gRPC depende. É aqui que o gRPC-Web entra. Ele atua como uma ponte, permitindo que serviços gRPC sejam consumidos por aplicações web.

Os Principais Benefícios do gRPC-Web

Agora que sabemos o que é gRPC-Web, vamos explorar por que você pode querer usá-lo. Aqui estão alguns dos principais benefícios:

1. Desempenho

Uma das características mais sobresalentes do gRPC-Web é seu desempenho. Graças ao uso de HTTP/2 e Protocol Buffers, o gRPC-Web pode lidar com um alto número de requisições de forma eficiente. Isso o torna ideal para aplicações que requerem troca de dados em tempo real ou precisam gerenciar múltiplas conexões simultâneas.

2. Facilidade de Uso

Com o gRPC-Web, você pode aproveitar as mesmas definições de protocolo buffer tanto para seus clientes web quanto para serviços de backend. Isso significa que você pode manter a consistência em sua pilha de aplicação e reduzir a quantidade de código padrão que precisa escrever. Além disso, com ferramentas como o Apidog, você pode otimizar ainda mais seu processo de desenvolvimento de API.

3. Escalabilidade

Como o gRPC-Web utiliza HTTP/2, ele se beneficia de recursos como multiplexação, que permite que múltiplas requisições sejam enviadas por uma única conexão. Isso ajuda a reduzir a sobrecarga associada à criação e gerenciamento de múltiplas conexões, tornando sua aplicação mais escalável.

4. Interoperabilidade

gRPC-Web permite comunicação sem emenda entre suas aplicações web e serviços gRPC. Isso significa que você pode construir aplicativos web modernos que podem interagir com sua arquitetura de microserviços baseada em gRPC existente sem a necessidade de criar APIs REST adicionais.

Começando com gRPC-Web

Ok, chega de teoria! Vamos arregaçar as mangas e ver como você pode começar a usar o gRPC-Web em seus projetos.

Pré-requisitos

Antes de começar, certifique-se de ter os seguintes itens instalados:

• Node.js
• npm ou yarn
• Compiler de Protocol Buffers (protoc)

Passo 1: Defina Seu Serviço

O primeiro passo é definir seu serviço gRPC usando protocolos buffers. Crie um arquivo .proto com suas definições de serviço e mensagem. Por exemplo:

syntax = "proto3";

package example;

service HelloService {
  rpc SayHello (HelloRequest) returns (HelloResponse);
}

message HelloRequest {
  string name = 1;
}

message HelloResponse {
  string message = 1;
}

Passo 2: Gere o Código do Cliente e do Servidor

Em seguida, use o compilador de Protocol Buffers para gerar o código do cliente e do servidor. Execute o seguinte comando:

protoc -I=. --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. example.proto

Esse comando gera os arquivos JavaScript necessários para seu cliente gRPC-Web.

Passo 3: Configure seu Servidor

Agora, configure um servidor gRPC para lidar com requisições. Aqui está um exemplo usando Node.js:

const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');

const packageDefinition = protoLoader.loadSync('example.proto', {});
const exampleProto = grpc.loadPackageDefinition(packageDefinition).example;

function sayHello(call, callback) {
  callback(null, { message: `Olá, ${call.request.name}!` });
}

const server = new grpc.Server();
server.addService(exampleProto.HelloService.service, { sayHello: sayHello });
server.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {
  server.start();
});

Passo 4: Configure seu Cliente

Finalmente, configure seu cliente web para se comunicar com o servidor gRPC. Aqui está um exemplo usando React:

import React, { useState } from 'react';
import { HelloServiceClient } from './example_grpc_web_pb';
import { HelloRequest } from './example_pb';

const client = new HelloServiceClient('http://localhost:8080');

function App() {
  const [response, setResponse] = useState('');

  const sayHello = () => {
    const request = new HelloRequest();
    request.setName('Mundo');

    client.sayHello(request, {}, (err, response) => {
      if (err) {
        console.error(err);
      } else {
        setResponse(response.getMessage());
      }
    });
  };

  return (
    <div>
      <button onClick={sayHello}>Dizer Olá</button>
      <p>{response}</p>
    </div>
  );
}

export default App;

Passo 5: Configure um Proxy

Como o gRPC-Web utiliza HTTP/2, você precisará configurar um proxy para converter as requisições. Você pode usar o proxy grpc-web para esse propósito. Aqui está como fazer isso:

docker run -d -p 8080:8080 --network host \
  --name grpc-web-proxy \
  envoyproxy/envoy:v1.18.3 -c /etc/envoy-config.yaml

Crie um arquivo envoy-config.yaml com o seguinte conteúdo:

static_resources:
  listeners:
    - address:
        socket_address:
          address: 0.0.0.0
          port_value: 8080
      filter_chains:
        - filters:
            - name: envoy.filters.network.http_connection_manager
              typed_config:
                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
                codec_type: AUTO
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ["*"]
                      routes:
                        - match:
                            prefix: "/"
                          route:
                            cluster: grpc_service
                http_filters:
                  - name: envoy.filters.http.grpc_web
                  - name: envoy.filters.http.router
  clusters:
    - name: grpc_service
      connect_timeout: 0.25s
      type: logical_dns
      lb_policy: round_robin
      http2_protocol_options: {}
      load_assignment:
        cluster_name: grpc_service
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 127.0.0.1
                      port_value: 50051

Ferramentas para Potencializar Seu Desenvolvimento gRPC-Web

Embora configurar o gRPC-Web seja relativamente simples, existem ferramentas que podem tornar o processo de desenvolvimento ainda mais suave. Uma dessas ferramentas é o Apidog. Apidog é uma ferramenta de gerenciamento de API que ajuda você a projetar, testar e monitorar suas APIs sem esforço. Ela suporta gRPC, tornando-se uma excelente escolha para o desenvolvimento de gRPC-Web. Com o Apidog, você pode:

• Desenhar APIs: Criar e gerenciar suas definições de serviço gRPC com uma interface intuitiva.
• Testar APIs: Testar facilmente seus serviços gRPC com ferramentas de teste poderosas.
• Monitorar APIs: Acompanhar o desempenho de sua API e garantir que tudo esteja funcionando sem problemas.

Usar o Apidog em conjunto com o gRPC-Web pode agilizar significativamente seu fluxo de trabalho de desenvolvimento e garantir que você esteja construindo APIs robustas e confiáveis.

Guia Passo a Passo para Testar gRPC-Web com Apidog

Passo 1: Configure o Apidog

Crie um Novo Projeto: Abra o Apidog, crie um novo projeto clicando no botão "+ Novo projeto". Dê ao seu projeto um nome e uma descrição para ajudar a manter as coisas organizadas.

Passo 2: Defina Seu Serviço gRPC

Importe Seu Arquivo .proto: Você pode importar seu arquivo .proto existente ou definir manualmente seu serviço gRPC. Para importar, clique no botão "Importar" e selecione seu arquivo .proto. O Apidog irá automaticamente analisar o arquivo e gerar as definições de API necessárias.

Passo 3: Configure Seu Endpoint gRPC-Web

Configure o Endpoint: Após importar seu arquivo .proto, configure seu endpoint gRPC-Web especificando a URL de seu servidor gRPC-Web. Por exemplo, se seu servidor estiver rodando em http://localhost:8080, insira essa URL na configuração do endpoint.

Apidog listará todos os métodos de serviço definidos em seu arquivo .proto. Você pode selecionar os métodos que deseja testar e adicioná-los à sua API.

Casos de Uso do Mundo Real para gRPC-Web

Para lhe dar uma ideia melhor de onde o gRPC-Web brilha, aqui estão alguns casos de uso do mundo real:

1. Aplicações em Tempo Real

Aplicações que requerem atualizações de dados em tempo real, como aplicativos de chat ou painéis ao vivo, podem se beneficiar muito do gRPC-Web. Seu protocolo de comunicação eficiente garante baixa latência e alto desempenho.

2. Arquiteturas de Microserviços

Se você está trabalhando com uma arquitetura de microserviços, o gRPC-Web pode ajudar suas aplicações web a se comunicarem perfeitamente com os serviços de backend. Isso permite que você mantenha um protocolo de comunicação consistente em toda a sua pilha.

3. Aplicações Intensivas em Dados

Aplicações que precisam lidar com grandes volumes de dados, como serviços de streaming de vídeo ou plataformas de análise de big data, podem aproveitar as capacidades eficientes de serialização e transporte de dados do gRPC-Web.

4. Plataformas de IoT

Plataformas de IoT frequentemente exigem comunicação eficiente e escalável entre dispositivos e servidores. O gRPC-Web fornece uma solução robusta para gerenciar essas interações.

Conclusão

E aí está—uma visão abrangente do gRPC-Web. Cobrimos o que é, por que é útil e como você pode começar a usá-lo em seus projetos. Com seus benefícios de desempenho, facilidade de uso e escalabilidade, o gRPC-Web é uma ferramenta poderosa para o desenvolvimento web moderno. Seja construindo aplicações em tempo real, arquiteturas de microserviços ou plataformas intensivas em dados, o gRPC-Web tem o que você precisa. E com ferramentas como o Apidog, você pode agilizar seu processo de desenvolvimento de API e garantir que seus serviços estejam funcionando sem problemas.

Então, o que você está esperando? Mergulhe no gRPC-Web e comece a construir a próxima geração de aplicações web!