Cloud Native Computing Foundation KubeCon + CloudNativeCon North America 2018 (Seattle), 16 Dec 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Intro: gRPC-Web - Stanley Cheung & Wenbo Zhu, Google

Description

Join us for Kubernetes Forums Seoul, Sydney, Bengaluru and Delhi - learn more at kubecon.io

Don't miss KubeCon + CloudNativeCon 2020 events in Amsterdam March 30 - April 2, Shanghai July 28-30 and Boston November 17-20! Learn more at kubecon.io. The conference features presentations from developers and end users of Kubernetes, Prometheus, Envoy, and all of the other CNCF-hosted projects

Intro: gRPC-Web - Stanley Cheung & Wenbo Zhu, Google

Connect from Browsers using gRPC-Web We are delighted to introduce gRPC-Web, a cross-browser javascript library which allows developers to write web applications that connect to gRPC servers. In this intro talk, we will briefly talk about the gRPC-Web protocol and deployment model. We will also show a quick demo on how easy it is to start writing a browser application with gRPC-Web, Protobuf and Envoy. With gRPC-Web, you get a very familiar gRPC-style API compared to other languages supported by gRPC. We will also talk about how future holds and what we have planned in the roadmap.

To learn more: https://sched.co/GrcH

A

So how am I go after new everyone? My name is Stanley Chang I work at Google I had been working with the G RPC project for almost four years now. I work, mostly on the client side, I'm, the maintainer of the PHP client library and and a PC web. So today I'm going to talk about chair, PC web. So just a quick show of hands how many people are familiar with G RPC, very good, excellent, so heart I don't need to go too much to get into it.

A

How many of you are front-end engineers, alright, how many of back-end engineers, okay, okay, interesting or interesting? So there is going to be a architecture piece in the beginning, there's more back and focus or architecture focus. The second half would be focused more on the JavaScript code, so there would be a bit of it for everyone.

A

So G RPC is a just looking very quick overview. Is the open source RPC framework defined on top of HTTP 2 is implemented in approximately 10 languages. By now, like English Spanish, French, German I'm, just kidding so Java goes C++, PHP, Ruby, c-sharp, and that end the list so on. One major feature is that you can do streaming with GRP see there's a good product of integrations.

A

You don't have to, but it is a very good integration in a lot of the languages is feature-rich. We have a whole bunch of features in the core jpg library and as well as different languages, will have language specific features like load balancing you can plug in your own DNS server deadlines, retries and all the cool stuff. So this is AG. Opc is a key building block in micro, surface architectures. You can deploy it in multiple environments, cloud companies it it has been jiae's for about two years now, so it's very mature.

A

So this is a general architecture of how you can structure your JRPG services notice that you can actually a string. These cavities PC services together. So you can have a Java service and access the client to ask for more data or some other output from other services implement, maybe in your PC Python.

A

So this is a very typical way of spinning up a cafe a client-server G RPC implementation. You start with a problem of definitions where you have your data type, your messages and your are PCs. There's a tool to generate code into your client. So are usually it's a. We call it the stop classes, you import it into your client applications or maybe written in c plus or Java, know, and all that languages are similar in certainly in in your server side.

A

So you have a stop where you can implement your or your business logic there and then, once you have that these functions are talking G RPC GOP, see it like I mentioned is built on top of HTTP 2, so as multiplexing or the good stuff streaming, and all that our same thing, you can implement your services in any languages that we support. This is very typical, very easy to setup very easy to start it to make it an example of it. Now, let's say we swap the client in some a no client Oracle client.

A

Can the client just be a browser? Client right? Can they just launched a node app compiled into a browser, app put in a browser to run and can detox the RPC? That would be ideal, but unfortunately the case is not there right now, so the browser runtime is pretty restricted right now and the standard web api that exposed to us, etc.

A

Fetch don't expose those HTTP wire transport details that we need to implement g RPC, so there's no concept of a channel, there's no concept of like manipulating to buy bites and frames, and and and and and a whole bunch of controls that we need to implement the fuji up, hisses, spec and in general web browser clients prefer tax data for various reasons.

A

In particular. Let's say we want to implement the full binary G RPC protocol like we can you simply cannot find a way to implement streaming because the standard API just don't give us back the bytes, even if it is responding in chunks if they are binary, so um they prefer tax data like JSON and and an in general tax based data response. Trailers, which is the key part of the here PC protocol, is not exposed to us for various reasons.

A

We have been talking to chrome and other Firefox and other profile privates, and there are always some reasons for not implementing exposing response trailers, so it's not there and then for browser clients. There are other concerns. Web specific features that it's not part of the GRDC protocol, like cores, X, section RF, and all that, and also for a lot of these browser applications. They are deployed in like less than ideal situations like maybe it's behind some firewalls. Maybe some corporate proxies restrictions that cannot negotiate tp2.

A

So um there are various reasons why why we cannot do a full Java C implementation in a browser app, so uh we try to bridge that gap by proposing a JRPG web spec, so gops the web at the core is basically a specification or ciliary to the GC protocol to provide a translation layer between browser requests and the backend G RPC. So so when so, we are true. So what we are proposing here is the browser.

A

Your browser app would actually make a JRPG web call, which is somewhat related to job easy, but would work on normal HTTP connections. So the goal is to provide, like this coverage RPC api for newest development, a deaf, a process to to browser app developer so that they can write G, RPC type, app in browser client and in the future. One day, one day, one fine day where we have all these HTTP two details exposed to us, then we can swap out the employing implication. We can do much more.

A

We can expose much more of the real G RPC protocol to browser clients, so the currently the the the the translation layer is implemented in voice a fellow CN CF project. There are talks on envoi in this conference as well.

A

We so G OPC actually started off as a internal Google project, so we have a similar concept like Android like a a proxy for all the front end clients to hit this API Empire. So we actually first implemented this geo PC web filter in our own API layer, a serving internal first party app and then we are try to implement in nginx. Are there a problem that that implements difficulties there?

A

We, it is not a module that was deliver with the standard, nginx distribution, but envoi out the GOP, see web filter for and what is so is out of the box. Today you can use the envoi pre, compiled, binaries and and share PC web is part of that standard distribution, so very easy to use. I will show you a little bit later and actually are more to come as in as part of the GPC web project.

A

We are trying to put more of these translation layer in the different type of proxies, maybe Java and node, and a go has a different, popular HTTP server framework. So we can put this kind of easy Web Filter there. So I want to explain more a little bit to a little bit detail on the spec itself. I supposed to work like I mentioned over normal HTTP xvb one, actually one one.

A

There should be two as well like the browser these days say says that they support a CP 2, it's kind of like under the hood, and not these calf TTS not exposed to us. So assuming that we don't have that, assuming that, for various reason it's not a negotiated extra fee, it was to work. The spec is supposed to work with normal HTTP 1:1 semantics, as well as a special content.

A

Type identifying this browser request is a is a Geo PC web request, application a /g, OPC web, where this text or proto I'll mention that I'll go into the details later one is text, one is binary. The trailers as part of the Gesu web spec, is encoded as a response stream, so low. There's a tag that mentioned that specified that this is a trailer metadata.

A

The current limitation of share PC web is that you can only make a simple you knew your call and server-side streaming call like so for client streaming and by the streaming is not implemented right now, so this is kind of the updated architecture of of G RPC web. So you have a browser. Client. You generate your stuff from your pool definitions.

A

You can import it into your application in the coral like an old style or culture style, I'll get into the details later, and it will start making sure PC what request to an endpoint that you have to control. For example, envoi. It does the translation for you. It starts the gel actual G RPC call to your back-end services. So, in this picture these servers does the server part is a gin. Is a very generic G RPC packing services, so you can completely reduce that it's supposed to be a hundred percent interrupt has no nothing.

A

You need to do in terms of implementing special logic for in your pack and services to entertain. Jeff is what request it's completely the same. The part where they talk to Joe PC is actually the part where your service talk to. You is actually the envelope proxy right now.

A

So in terms of the project update for PC web has been 1.0 GA. Since a couple months ago, we had gone through a long alpha and beta process, so this is ready to use. We love your feedback.

A

This is the key website: GOP CIO GOP Seattle, where you can see a lot more details about the project and and try an example which, at the end of where we all go through as well. So it's a simple chat bar for the spec and issues and pull requests. This is our github repo.

A

So one thing when doing the process of making this GA during the beta process. One thing I mentioned that this project start off as a internal project, so we implemented using Google closure library, because is how a lot of these google internal front-end projects implement. It makes sense for us. It's easy, there's a lot of good integration testing. So it's very easy for us to get started using Google closure library, but in the process of trying the open-source this we got a lot of feedback from front-end engineers that are open source user, open source developer.

A

Don't really use Google closure, so we need a cover more more than type of death process. So we during that process we added a lot of these open source, JavaScript front-end development frameworks. Like now, we have an NPM package, so we can do NPM, install schepisi where you can get the runtime library where your generated code will use like I mentioned. Is that have been used internally for two years?

A

A lot of the internal app like Google Calendar, like Google assistants, like Google Android over-the-air activation calf web portal, is under the hood uses to a PC web. So the one another reason why we want to use Google closure is a cross browser compatibility. So we don't have to worry about browser compatibility. We want to reach as many browsers as possible and Google closure do that for us. One quick note about envoi, it's very easy. So, on the right hand, side you have a normal, you configure invoices.

A

Normally you you, you have your routes and and right bottom right-hand corner. You have your back and services that point to your ERP C services, and this is basically just one thing that you need to enable in your config envel config. Is this invoice your PC Web Filter? That's the only thing that you need to do in terms of enabling PC web.

A

This is a one example of implement a service implemented using your PC web is coach. A nosy so basically is a service tool to monitor. Giorgia PC Services is starved from internal and we try to open source it as well. A basically show a bunch of debug info and stats for your back-end gops services.

A

It's implementing gops web I personally find cooler because you have your G's geophysicist services and is monitored by a GOP zoo web.

A

Web prot web portal- there are a bunch of, for example, as well. We have a example on putting this on a community environment. I also recently found a blog post. Someone else out there try to implement, put your PC web in a cafeteria environment put into companies, so we are like. We are fascinated by all these use cases and how people using it. So if you are- and your team are using your PC what we would definitely like to hear it and we're collecting all these use cases so well.

A

This is this is of conclude the first publish this curve, the architecture and I'll dive into the detail on geo PC web. So you start with a protocol buffer. Just like most of your implementing your G RPC services, you are you define the message, types that you want to send and receive. So if a holo request that takes a name who is a string of a hollow reply, message is also a string. So this is very standard total of stuff you can use to produce, see a tool to convert this proto into was great classes.

A

So um once you run the tool you get this hollow wall and it's called PB Jas. You can import it into your code in your client code and you get hollow request, class and the hollow replied class, and now you can use it. You can instantiate, it set the name to John and a yoga.

A

Now, let's add a RPC method to your probe definition, so I'm, adding a greeter service that has one simple method called say: hello: it takes the requests and returns you reply. So it's a unit cost in Pune, recall and similar to the policy binary. We provide a clocking, you can use to generate the greeter class, so you can and that will implement the GOP, see web protocol and take care of what the handle are sending the request for you. So one thing I mentioned during the open source process process.

A

We notice that this part, this plug-in is heartediy, but how to compile so a lot of a front-end engineers complain to us that we don't want to have to compile a C++ program just to use a to dry, a front-end JavaScript code. So by now we finally have I pre build binaries for Mac for Windows for Linux, so it should be very easy to use just like policy, a binary. You can download proceed.

A

You can download this plug-in and you should run immediately on the most common platform, so run this, and you can agree the current. So you seem since the same thing. You can now get a hollow ball and escossio PC underscore weapon. It's called Kiba dachi is you? Can import your creature client? You can instantiate it point to your API host, API or endpoint. This is your final destination. I will actually know. This is the and your ny endpoint. So not the your G RPC back, and this is where it should hit the envoi endpoint.

A

So you have the client and then you can say say hello. This is the this is actually one of the main goal of the GC web project is to offer a very familiar and consistent API with jeppesen node. We actually got a lot of feedback from front-end engineers that we want this to be a Covino project. The we can manage the browser part. We can manage the final saying where we come hard into across a consumable form, but we actually want it to be an old project so on.

A

So this is one reason why we make it consistent. So the argument, like sequence, is the same as the node API, so you have a request, your metadata, and there you have the callback.

A

So all we have a unary call, and now we can try to add a streaming call a streaming method. So let's say we call it repeat hello and you can add a stream qualifier to the to the return side of the RPC definition. So the if you add it to the requests, are as a client streaming. Bada streaming is not supported right now, so all the API for streaming. We try to follow the no stream standard, no stream API, as well so of the dot on data.

A

So you start the call by calling repeat hello: you've got a stream back and on a stream there are various method you can put callbacks on to to to get errors and data and metadata and statuses back. So this is this follows the standard API now I want to touch on on something that I mentioned earlier, about, like closure and and and this required thing so in our code, Jam clock in we now offer four type of import styles, so the most open source user will be using the command J style.

A

So the first line here can't like require so require is a very common way of writing importing other moju from other npm modules, but you can also write it as a Google closure style. So you can do group don't require as well. We are adding our experimental typescript support. This is a heavy we have. We have.

A

We asked feature from users, so all we over two ways: one is your commonjs output plus a separate file for typescript typings, so you can do a import, greater client from this module and we are, and in our mode and now produce epoch in actually has a separate fourth mode to output, a complete typescript kind. So this is CAF experimental right now, a lot of the front-end developers felt like we are mhm total amateur hour, so we are definitely trying to improve that. We.

A

We definitely welcome a contribution to this as well. Actually, we already got a lot of contribution to try to add to it fix bugs and and make it more more than so I like mention this is a kind of a typescript way of a version of writing a geophysical I.

A

Now you can say import, SJ, RPC web from the npm module called share pc web, and then you can start tagging your arguments with our types and we publish a kind of a minimal set of typings for all the relevant data types that are relevant to the G RPC web, like errors and status and and good thing about typescript. Is that this even on the say hello is properly type.

A

So if you, if your ideas report, your requests would have all the methods that are supposed to be part of it will show up in your idea to complete what the what the fields are in your request. Object. I want to touch on a little bit about the content type that I mentioned earlier, so we over two modes. The default is a text mode for GOP. See why? Because your PC web text is basically a base64 encoded version of the underlying share PC web protocol. So did you underline GOP support protocol is binary.

A

You have your header frame. You have your data frame, you have your trailer frames, but, like I mentioned, it won't work for streaming in browsers, so the default is actually a PC web text. It will look like this. It would look like any cough base64 strings.

A

Well, if you, if your, if your application only ever have a unary call, you can technically choose to do binary one. It would still work. It actually works as in like the entire response, including the metadata, and you just got just you just reapply one time to the browser and we were separated back to you with the data and the response and a service. So if you ever have you told me streaming and you can save a little bit of time on the base, 64 encoding. So just a quick note on this.

A

Once you have written all this code on typescript command, J s, closure style. Now you can compile it with your favorite tool. This is the place where I got really overwhelmed with in the beginning. Where turns out, they are like a myriad of front-end tools to do this. I've used the command J style. You can use NPM install in the NPS backpack to pack all your dependency into a browser, consumable single J's that you can import or you can use Google closure and compiler to compile your Google closure.

A

A coupe don't require statements of or type Scriptures TSC, and we actually have a basis of possible Basel. Is a cafe pillow system open source from Google as well to build all your dependencies all right demo. So.

A

It basically has three parts. The first part is a it's. What I mentioned just now, where you write all your client code, you compile it, you minify it and you serve it in your simple web, simple web server, just your HTML, your static stuff, and here you have your compiler J's, that that comes with all these stuff that we have talked about and in the previous slides you request that and then you host it and then you, sir, make some actions, maybe type something, maybe click a button.

A

You'll fire of these are pieces right, depending on how you write your application, it would make it easy web call to envoi, do the translation and then I'll talk to your pc with the back end and and and and and swim back, the result back. So you can do this today, right now, if you clone our jpg, why bleep, oh I, already pre download the Atacama jizz, so all you need to do is to do a docker, compose pool or from from from our repo I really did that.

A

So let me show you: nothing is running right now: I pre, pull these images. I know you need to do is to taco compose up, so it brings up these three images and then you could go to a browser and hit localhost 808 1. This is the part where I are so. Actually let me show you the three one is decline.

A

This is the static stuff hosting the compiled version of the Java Script, and this is the invoice image and this stray dog come from today's envoi distributions, oh I, did is add a envoi demo, my own in wattage, mo exposing port 808 1 and pointing to and have the traffic all the traffic's rotting. To this note server this is a plain og, RPC, node server and that can and and that can handle any Khafji RPC traffic.

A

So I saw that I hit this so I first request the browser hate, the HTML and teach others and and the JavaScript. So let's say I, say hello: this is a simple RPC call and I got a visa back and to demonstrate streaming. I want no server to give me 4 hellos back, and this is streaming so and because we have still have a low time we can do.

A

We can say, let's kill the note server.

A

So now invite has no one to talk to. If I do something you would say you would it will feed back some invoice error message and they will trigger the like error handler that you add to your client code so on this is the demo and.

A

We know that we have a lot to do for GRP, see where we are trying to add more support for this translation layer in other places where it depends on on where the most popular place we we get feedback on. This is a few that we are looking into for the next year or so we're trying to add interceptors, which is very popular demand, a feature for for other JRPG services as well, and better integration into some frameworks. Like angular.

A

We get a lot of ask for that as well, and the end I want to say: OPC is hiring. So if you have any questions- and let me know- and one more time, this is our website and I can take questions.

A

A

Yes, so as long as it's reachable from your browser client. So as long as it's not behind some sort of file or some sort of hub.

A

Yes, the question is: can invoice you both provide the same time, so our invoice also gr PC web is just a filter implemented in invoice. So my understanding of em, how involve versus said you can animate with multiple of these filters, and it would do our multiple of the things that you're supposed to do. So, if your request has like implemented as a OPC web request, so it will show us application test.

A

Your PC web text write it and then voice see that it will trigger that your PC by footer and then rallied to your geo PC web destination. If your browser client has no such thing, it will row it to someone somewhere else. You can. You can totally control in your Android context. So, yes,.

A

So we don't have numbers right now. We are more focusing on development process and proxy support and all that we don't. We are planning to work on that. We don't actually have benchmark and performance number right now. Unfortunately, yes,.

B

A

ah The question is: can you multiplex multiple backends, your business services, you with one invoice instances I think so, because you can have multiple routes right in your config mo and wattage mo. You can say for this. If you hit this service match this wretched regex forward to this cluster, you have multiple Custer in your in your mo and you have multiple routes. So yes, so as long as what is it part of the part of the job is a web spec.

A

So in your client for multiple services, it would be encoded in the URL as well, so your service would be different and it will hit you different regex in your in your android. Yes,.

A

Yes, yes, so actually the reason why I do this complicated thing? It's the demonstrate course actually. uh So um this is one thing that normal job is you don't need to worry about because in browser, if you are helling, if you get your stuff from, if you get your static stuff from one place and you're hitting a different end point you are supposed to make a separate. The browser would make a separate request on behalf of you that's course cross-origin something they did too and for some kind of security.

A

So this, if, if for to do that normal G RPC back and don't deal with that right, so uh actually I just want to show that this is kind of the case where the normal G RPC protocol is not enough, because if we have to do this, the your job, easy back end would have to respond to this course requests, and so so this is just to show that this course situation and time it. You can totally do this.

A

You can totally have your invoice like I mentioned, you have multiple filters right for this asking for static SS. You can route it to a different weight, different places to get your static assets and and serve it, so you can totally do it in one port. This is car very deliberately complicated situation where I want to show course.

A

A

Question is: does policy support, I scrape? The answer is no I am definitely working with the probe of team to try to add that the open source version of protobuf J at the Google officials, implementation problem of for JavaScript has some sort of limitation right. Now. It's kind of a binary format and we are actually working on internally, actually there's a different format. It's a JSON compatible protobuf format. We are actually in the process of trying to open source that to replace the binary protocol format and and right now it doesn't support typescript.

A

It only support a Google closure style and common J's import. We are definitely working on that because we definitely receive a lot of feedback.

A

Typescript is important, but to for, in the meantime, our prodigy RPC web plugin actually output the Taipings for the product of messages, so so individual you know or have some not complete, but some Taipings for the order generator code. Even if you generate in common J's for the prod of the message part, it will still have typings if you use our plugin and as well as as you're busy web part, but the official typescript is not there yet.

A

B

A

I understand I.

A

I think so, because, just because the to III speculate but two points, one is I actually found a user that has a purpose that shows that he can make a simple jpg web in this deal. Another thing is, we had put this GOP square filter in Annville for a long time, so it was it was there almost a year ago now, so it should. Even if it is problem yeah, it probably should be already there. Oh.

A

So all right now it's in brain in NY, right so, let's say a user, don't want them deploy NY for various reasons, because my my app is already detect. My app is already using some or some sort proxy, including cause I'm in Java that ID we don't have support right now.

A

So great, thank you very much for attending.