Angular5 + gRPC (I)

First thing first. What are you talking about, what is gRPC? Easy one, let’s check the official definition: ‘A modern, open source remote procedure call (RPC) framework that can run anywhere. It enables client and server applications to communicate transparently, and makes it easier to build connected systems.’. So, what we got here is a beautiful way of real-time app communication.

gRPC works over HTTP/2 and allows client/server streaming in both sides.

Internet is full (well maybe not so many) of examples about how to implement a server/client application with GO/Node over gRPC. This is quite nice, but well, I’m a web-man so I don’t want an Electron App or some ugly Java UI, I want a web page and for that I look a bit deeper in some way to make an Angular App connecting to a Go server over gRPC.

The problem here is that the actual browsers does not support Fetch API so it’s not possible to make a client-side streaming (yet) but is still really useful for our purpose.

gRPC Scheme
gRPC Scheme

We want to offer an alternative of the standard restful API so, why not try to work over this protocol? Imagine that you want to know in real time the value of a coin against dollar, you will need to make a lot of GET petitions or use some kind of push protocol like Async-IO, or even Web-sockets, the first option is ugly, the second one it will tie you to a specific technology/language and the third one, well, does not have the benefits of HTTP/2 so let’s code some example with gRPC.

The guys of improbable-eng developed a project which allow us to connect gRPC services from a web browser and a plugin to compile proto files to TypeScript.

– But… what is a proto file?

Well the way in which gRPC communicate is with ‘Protobuf’ a ‘language-neutral, platform-neutral, extensible mechanism for serializing structured data’ which means that you declare the message that you want to send in a file with a specific syntax and the you will compile it to a binary understandable for the language choose (Go and TS in this case).

Let’s see a little self explanatory example:

syntax = “proto3”;

package exchange;

message Exchange{

    string name = 1;

    float rate = 2;

}

    message GetExchangeRequest {}

    message GetExchangeResponse{

        repeated Exchange exchanges = 1;

    }

service ExchangeService {

    rpc GetExchanges(GetExchangeRequest) returns (stream GetExchangeResponse){}

}

At last sentece, in the Service we’re declaring a function which receives a specific request and it answer with a specific response (an stream of list of Exchange).

Once we have this .proto file we must compile it with ‘protoc’ to the desired language and the just import it in our code

– Compiling proto files

Let’s assume the following folder structure:

folder structure
Folder Structure

‘test’ folder will be our angular5 project created with ng cli.

In this part we will use ‘protoc’ to compile our files. In order to accomplish this stage we need to have installed the software (or compile it yourself), you can try with the following:

$ wget https://github.com/google/protobuf/releases/download/v3.5.1/protoc-3.5.1-linux-x86_64.zip unzip protoc-3.5.1-linux-x86_64.zip -d protobuf

Then just cd inside the folder and run the following command:

$ ./protoc

–plugin=protoc-gen-ts=/home/Develop/go/example/node_modules/.bin/protoc-gen-ts –plugin=protoc-gen-go=$GOPATH/bin/protoc-gen-go

–plugin=protoc-gen-js_service=/home/Develop/go/example/node_modules/.bin/protoc-gen-js_service

–js_out=import_style=commonjs,binary:/home/Develop/go/example/client/client-angular5/src/proto –ts_out=service=true:/home/Develop/go/example/client/client-angular5/src/proto –go_out=plugins=grpc:/home/Develop/go/example/server/_proto

–js_service_out=/home/Develop/go/example/client/client-angular5/src/proto

-I /home/Develop/go/example/proto

/home/Develop/go/example/proto/exchange.proto

  • –plugin=protoc-gen-ts : Where is stored the typescript compiler.
Grab it from here: https://www.npmjs.com/package/ts-protoc-gen
  • –plugin=protoc-gen-js: Where is stored the Javascript compiler.
This one is included in the same package than protoc-gen-ts
  • –plugin=protoc-gen-go: Where is stored the Go compiler.
You can get it with the go package manager go get -u github.com/golang/protobuf/protoc-gen-go
  • –js_out, –ts_out && –go_out: define the folders where you want to store the generated binary files, .js and .ts files must be in the same folder, best idea is to keep it in the client folder, cause we will need to import them on our angular component.
  • -I : Defines the root folder where our proto file is stored

Finally the last sentence is the proto files that we want to compile, in this case, just exchange.proto.

You should get something like this, the Go files for the server and the ts/js files for our client.

Structure Folder once proto files compiled

And sadly this going to be enough for today, in our next chapter i will explain how to set up the server (using for that the proto files compiled here) and I will upload the working example to GitHub, it’s always easier when you have something to broke 🙂

 

One Reply to “Angular5 + gRPC (I)”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.