 Thank you Right. Yeah, I'm Johan. Hi everyone. I'm really excited to be here I'm a Swedish guy. I live in England. I work for a data collaboration startup called InfoSum I've been using Go for about two years and I really like language In my spare time, I enjoy working on open source projects and I've contributed to the Go programming language I run my own blog writing mostly about Go and gRPC and And today I'm here to talk about my open source project and creating Go for JS apps with the gRPC web So let's take a quick overview first today. We're going to learn about ProloBuff gRPC gRPC web and Go for JS. We're going to introduce gRPC web for Go We're going to create a simple app with gRPC web for Go So let's let's start with ProloBuff Who's heard of ProloBuff before? Yeah, that's most of the room as I expected and who's using it in production This is about half the room. Okay. Yeah, cool. So this is it's not going to be a lot of news for you. It's Google's interface description language Binary serialization format built for backwards compatibility and leverages code generation It is used for service-to-service communication as well as data storage It's made designed to be fast faster than XML up to a hundred times according to the Google Documentation however relevant that comparison is it's faster than JSON as well, of course It's got wide official language support including go C++ Java Python and other official implementations as well as third-party libraries And as far as I can tell this is the highest resolution image that exists for the ProloBuff project. It's terrible So so what does the ProloBuff file look like? I've chosen a simple file here Using Prolo3 syntax, which is a modern way of creating Prolo files I've also used a go package option which is specific to go But you should definitely be using if you're using ProloBuff with go It makes all your imports much easier to handle. We've got a package declaration here as well Which is used for namespacing packages and we've got a really simple message declaration And we've got a couple of different types here and some some field numbers Which is used for marshalling and un-marshalling and helps with the backers compatibility guarantees that it gives you a Prolo files also support more advanced features such as enumerations, arrays, maps and nested messages and one-off types and Services which we're going to come back to in a moment. So what does the generated code look like? So from that simple type description that we had in the Prolo file, we get a go type The types map very simply in the go case We get some struct tags for JSON and ProloBuff on marshalling and we also get some getters The default go ProloBuff generator Uses reflection for marshalling and un-marshalling, but there's a third-party implementation called go go proto which uses Type specific marshalling, thanks Volter Which you should use if you're using go because it's faster So how do we use ProloBuff for services service communications? gRPC so obviously we've already been introduced to gRPC a little bit here today, but who's using gRPC at work? Yeah, that's quite a few actually, yeah So it's a remote procedure called protocol developed by Google built on HTTP 2. It's Donated to the cloud native computer and foundation It's serialization agnostic, but you normally use it with ProloBuff Although it does also have support official support for flat buffers now And like ProloBuff you generate code from the ProloBuff definitions or the flat buffer definitions if you use that buffers Of course, and it comes with powerful streaming capabilities such as service high streaming client side streaming and bidirectional streaming Which is really useful for services service communications, of course, and it's the backbone of Google's internal communications network So what can we do with gRPC? so this is a page an image from the official gRPC documentation and Essentially, the idea is that it allows you to write colleague lot microservice architectures such as Google's presumably We've got a C++ server Android client and another Ruby client and they just interact over the ProloBuff interface And and the hdb2 that gRPC provides But you could easily replace the C++ service here with a go service and this Ruby client with a Python client and so on That's what it gives you So what does it look like in the profiles? So we've taken the the profile that we have before we've just added another type here and we've added a service at the bottom With a method a simple unary method that takes a cat toy request and Returns a cat toy and this Then produces this is a snippet of the generated code that it produces You get a for this client you get a client side interface that you can work with and on the server side You have to implement this interface in order to support the interface So it's very simple all of you just define it in the in the profiles And then you can in the client side just just call the function essentially and in the server side You just implement the interface very nice. So but can we use this in the browser? Yes with gRPC web who's heard of gRPC web That's actually more than I expected I gotta say it's a it's a very new project Well, it's been in development for about a year as far as I know But no two years probably It only has an official spec out yet There's also an official client, but it's an alpha stage and it's still being developed in a private repository So you can't really get your hands on it Well, there's an issue on guitar where you can ask for or access and you can use it But it's not really ready for production use it's It uses protobuf for its communications And it supports server-side streaming only no client side or bidirectional streaming as the browser Standard that's supposed to standardize that this is called the streams API has not been finalized yet And there's no browser that implements it yet anyway So only server-side streaming in gRPC web, unfortunately, but the idea is that the browser becomes just another gRPC client and as I mentioned there the Official implementation is is not really ready for production use. However, there is another implementation written by a British company called improbable, which is written in typescripts it uses HTTP 2 and transparently granted downgrades to HTTP 1 it also uses the fetch API and Transparency long downgrades to XHR for browser support It also comes with a go proxy package and the binary depending on what you want to use it for So this Here is the browser stack this here is an example of the if you're Exposing a go gRPC server. You just import the gRPC web package and you just wrap your gRPC server It's very simple. If you have any other gRPC server, you just front it with the go standalone proxy binary It's also very simple. The proxy is necessary and mandated by the spec because the browser cannot speak the official gRPC protocol But it's very simple still to just use it And it's used in production at improbable and I'm not sure if anyone else is using it in production I'd be interested in hearing afterwards So what can we run go in the browser? Yes, we can with go for jazz. Who's heard of go for jazz before? Only half the room. Okay. Well, you're in for a ride Go for jazz is a go to JavaScript transpiler Written by Richard Musial. It's been out for about four years or so I think and it supports nearly everything in the standard library including go routines. It's used in production by Certain open-source projects such as per keep which used to be called company store one password X and ninja to both private companies And they're also community bindings for popular JavaScript frameworks such as react view the DOM and web sockets So what do we get if we put all of this together, right? Gfc web for go my open-source library So it's combines go for jazz with gfc web using the improbable gfc web client It has a protoc plugin that generates go for jazz code with no JavaScript dependencies It's designed to look like go gfc clients and it has full streaming support The spec only mandates that you should support server-side streaming But I was sitting at the goal in UK conference and I had an idea and I implemented bidirectional streaming and client-side streaming with a web socket proxy So you can use that as well with the gfc web for go library So what can we do with it? You could write a go for jazz browser app You could you could write a go for jazz electron app for example and use it to communicate with your back end Or you could just write a generic front-end for your GOPC service It doesn't even have to be a goal with your PC service But in we're gonna have an example later to see what it looks like Essentially anywhere where the front-end talks to the back end So here's the generated code and if you just remember back a couple of minutes ago the go client Generation looks it's supposed to look very similar to that. So you get a very similar interface With a constructor like this that returns you the interface from the generated code Oh, this is very interesting But I want to show you what it's looked like to work with so I'm gonna do a live demo here And if you want to follow along I give you about 10 seconds to clone that repo right there France I Asked him to hold my microphone. Do you just want to hold my microphone? Very good. Okay, so I'm gonna press this button and hopefully this is not gonna break everything Is that okay on the last dream Let's see, yeah, it's just a wrong Oops, yeah, can we turn the lights off for this stage? Oh my goodness. I have no idea. This is a dilemma I didn't think about this color theme No, I'm solarized light. I'll probably do that better All right. Okay, so good off to a good start here. We're going to So I've just got a clone of the repository here and the first thing I'm gonna do is to disable the softly compression which with otherwise run and takes a quite a long time and Or it takes about 10 seconds per generation, but it's gonna stop us from doing anything useful. So For the purposes of this demo, I'm disabling it But anyway, next step is to replace I'm gonna replace the imports of the Clone repository of course with the repository into which a repository path into which I have cloned my repository So it's just a simple fine command. It's in the read me So you can use that for your own clone if you have and next thing we're gonna run is then make generate Cert which will generate the cells a self-signed certificate. Wow It's not supposed to look like that. Anyway Okay, next up, let's just take it for spin and see if it all works Logger is not printing it correctly is it Yes, fun fact if you type a bad idea into this prompted except your certificates Yes, okay, so it works. Perfect. Next up. No, that's that's not the demo That is not the demo, okay So what I want to do here is is is is show you how to use it a little bit So I'm gonna go into the index of HTML. I'm gonna add a button here. We're gonna say click me on the button and We're gonna also add a div which whoops we can Write to let's call it a container And that's saving our index HTML and then we're going to open the prototype So as I mentioned before all of this is just controlled by the prototype essentially and this Boilplate repo comes with a empty profile essentially with just a little bit of boilerplate for you So you can just get down to the business of defining your types So I'm going to define a user here, and I'm going to need some help from the audience to figure out All of the fields that we should add to this I'm going to add an ID I'm going to add a name and I'm going to add an age whoops you enter to age But what else should we put in the user type? Suggestions Sorry emails a good one. Yeah, okay email like so Forgot a space and we're also gonna add a another message type to Which will call user request and it will soon become very obvious why that's called user request and of course That's going to take just an ID And then we're going to define the RPC method get user which takes a user request and returns a user Like so boom and with that we've defined everything we need essentially to then This this terminal got messed up somehow. I'm just gonna run generate again That generates the profiles and also generates the JavaScript and they go for JS interface But anyway, we haven't actually done anything in the implementation of either side yet So what's happened here is we've generated the server and all of a sudden my type Check at compile time fails because my back end does no longer implement the interface that it's supposed to so I'm gonna take that interface Function definition and we're gonna of course implement this on the back end Context is called context, of course and we'll call the request request and we'll need to add some namespacing here because Tooltip didn't give it to us Okay, and then the back end is a very bad back end because it only supports one user And so we're going to check if the request ID has Is the same as the only user that we support and if it isn't Then we're going to return an error and we're going to use a standard geoprc status error type of course because we are good geoprc citizens and we're gonna return a not found which translates to HTTP 404 in case you're interested and say All we can say user not found in this case So that's basically the correct way of of saying Invalid ID if you want however once we've gotten to this stage in the logic We know that the correct user has been specified. So we're going to return whoops We're going to return the user that we have ID 1234 of course name I'm gonna use myself here and email I'll just put redacted because what and Neil so that's a back end done and Then we go to the front end with this is all go for JS code But of course it just looks like oh because it is and you shouldn't pretend that it's anything else And now hopefully this is all going to look fantastic to you if you haven't used go for your JS before so if you cast your memory back to the Index HTML definitions that we made we've got a button that we can use and we're going to use the document dot get element by ID and Get the ID of the button, of course, and then we're going to say that this is a type dome Button now. Can you imagine doing something like that in JavaScript? That would be amazing But you can't of course because JavaScript is dynamically typed curses And so we're going to get the container as well This is why we need to go to save us from JavaScript and we're going to talk a little bit later about Other things relating to the future of the web and go but not right now So with this button element we can add an event listener Because we want to do something interesting when we're clicking on the button We're going to tie to the interest near click. We're going to Sable that use capture, which I don't even know what it does actually But we don't need it in this case and we're going to ignore the dome event Input arguments to this function, but essentially here We are this function is going to be called when we press the button So what do we want to do? Of course, we want to make a call to the back end Get user and this is the function that we defined in the profile before of course It takes a context you can use contexts with You can use a context with a timeout and stuff if you want to in here It will all work as expected, but we're not going to bother here because the back end should reply to us in good order Wrong namespace client user request of course ID and because we just implemented the back end We know what to put here, of course And we're going to assign those to a user and an error because it can error and what do we do if we error Like good go first we do if air nail, of course, so We don't want to continue that flow, but we do want to do something So let's write to the container. It can set the text content to the content of the error However, if we're here, then we've got a user back from the The back end which is great news because that's what we wanted all along So then we're going to take the container and Set text content To something more interesting we'll start with the name And we're just going to do some string concatenation here Get name age Age is actually a unsigned integer, so I'm going to have to use str-conf You have to do a integer conversion on that bad boy and there we go and then we've got also Using ID we've got ID and of course, thank you, sir. We've got email see if I got that right No completion errors. Okay. Now this looks great, right? However, there is one little Trivia about gopher.js and JavaScript in generally you can't block on the main thread So this is going to be wrapped in a go routine in order for it to execute Otherwise it will not work, but you will get a runtime error Which is not all that useful so now that we've generated that we've got the back end we got the front end we're gonna run the server again and That has not worked, so I'm going to assume that I was caching it Yes, it's in my testing. It would do that about 50% of the time. So I was hoping it was just gonna work Anyway, boom it worked right we click the button. We got a request to the back end Thank you If you want to you can be snoopy and look at the Information has been sent here, but that's that's not what I want to do. Ah, very good. Okay. That's actually right on cue I just wanted to show as well This this is great, right? But what happens if we give the wrong ID and as you know We said to the back end that it should return a nice grpc error, but how will the front end handle that and? and Yes, so it gives us a not found error and if you're used to go grpc you will know this is exactly what a go grpc error looks like However, this is not all that interesting because in addition to this we can do status From error error and get access to things like the the enumeration itself Sd.code we can get st.message and also other trailers So actually yeah, we probably have no okay, I'm gonna skip that because I don't think we have time so let's go back to the presentation and Yeah, so All right Thank you much. So so there we go This is the one window actually there we go So what we've learned today is We've seen that we can take a simple protobuf interface definition We can generate a front end and back end and simply Implement the back end Implement the front end and have easy communications between a go for just front end and go for just back and go back end Indeed this is just an example of what you can do Of course, you can replace the go back end grpc service with any other grpc service I encourage you to look at the boilerplate repo and on the official repo, which will be linked on my talks page there's all kinds of examples about using this in different scenarios and Hopefully next time you want to write a go for GSF which should be soon because it's great You can try looking at using my library and Okay, I'd like to thank Fostem and the GoDevrim organizers I'd like to give thanks to improbable who I created the GFPC web client implementation, which is really nice, especially Michal Witkowski who's been doing great Contributions to the go GFPC ecosystem. I'd like to thank Richard Musial for creating go for GS He is currently working on a wasm compilation target for go, which is extremely exciting If you haven't checked that out yet, you should Google it Hopefully that will come to fruition at some point soon I can't imagine anyone better than Richard to be working on that kind of thing Dimitri Shreyala of who's Appears to be the main maintainer of go for GS it gets updates every Major go version or so because there's all kinds of new things in the standard library You need to make sure that it's compatible with go for GS When the go for GS and community in general is great. You should check out the slack channel on the slack go for GS I'd like to thank Travis Klein who gave me the idea to implement my own WebSocket streaming proxy From his proxy which is for the GFPC gateway So if you used to get what get where you should check out that library as well, it allows you to do streaming in With the gear GFPC gateway and also Paul Jolly who has pushed me to present my own work and who without whom I wouldn't be here today and last but not least I'd like to thank you for listening to my talk. I hope you enjoyed it and I'll take any questions You might have now. Thank you Okay, no questions. Thank you Francis Anyway, yeah, you should check out the talk page. There's tons of links on there. You can start playing around with it yourself if you like Yes Yeah, so a longer version Sorry. Yes. The question was It appears that go for GS generates large JavaScript files essentially This is true and a longer version of my talk would have talked a little bit about how to work around that But you just knew it's not just how I disabled the softly in compression while I was doing the Presentation the softly compression introduces something like an 80% compression rate, which is it's really nice It will bring the two megabytes down to about 300 kilobytes Which is still quite large and in general when you're working with go for GS You have to be a little bit careful about what packages you import, which is a bit unfortunate But if you I mean two megabytes in this case is actually probably an example of a small file I know the the per keep generated file is like nine megabytes, which is awful and it's probably in my opinion What holds back go for GS adoption the most but as I said with G-SIP compression which softly is essentially you can you can get it down to much more manageable file sizes and This one in particular will be about 300 kilobytes, which is acceptable. I think for most people Yes, thank you Francis The question is will web assembly make go for GS irrelevant and my personal answer is I hope so and I hope we'll be able to just write go code and Produced a beautiful web assembly code with none of the JavaScript rubbish frankly that we have to deal with today And yeah, I'm I'm eagerly awaiting the first beta when Richard if you're watching this Richard I'm like I'm your biggest fan when it's ready. I am ready Okay, thank you