Blazor WebAssembly jenseits von REST: gRPC in Web-Apps & .NET Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 

2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Independent Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies, Angular [email protected] @christianweyer https://www.thinktecture.com Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Christian Weyer 

3 § Communication & Service Interfaces § gRPC (in .NET) § gRPC-Web (with Blazor) § Misc Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Talking Points 

4 § SPA framework for C# and .NET developers § Create web UI frontends with HTML and CSS § Write client-side logic with C# § .NET runtime in WebAssembly § JavaScript interop is often needed § Need to communicate with services/backends § “REST” APIs are the de-facto standard means in the web § HttpClient is our friend § Service pattern in the client for abstracting communication details Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET ASP.NET Core Blazor WebAssembly 

5 Service Interfaces Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET 

6 § Let’s just call it Web APIs (RPC-ish, REST, OData, GraphQL, …) § JSON as major data exchange format § Great tooling § Can handle binary data easily § Highly interoperable § JSON text format can be verbose § Compression is a must § Loosely typed § Open API can help here § Not every MEP can be easily implemented Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Reconsidering Web APIs 

7 § In Web Services world we did a lot of contract-first § In Web API world we do a lot of code-first Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Interface modeling: Code-First vs. Contract-First § Code-First § Agile by writing platform code § Contract gets derived or generated from code § May not lead to highest interoperability § Contract-First § Specification before implementation § Platform code gets generated from contract description § Formal way to ensure highest interoperability 

8 gRPC Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET 

9 § gRPC was initially created for synchronous service to service communication § WCF, anyone? § Some people like to use gRPC between frontends and backends, as well § Uses HTTP/2 as transport protocol § Offers e.g. streaming, bidirectional communication § Protocol Buffers § Defining format for contracts, operations, messages § Message exchange format § Browsers are the de-facto frontend platform today § Native gRPC does not work in browsers (due to restrictions for HTTP/2 framing in browsers) Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET gRPC 

10 § gRPC has different types of method calls § Unary § Server streaming § Client streaming § Bi-directional streaming Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET gRPC Calls 

11 § Reduces latency by enabling full request and response multiplexing § Minimizes protocol overhead via efficient compression of HTTP header fields § Adds support for request prioritization and server push § Binary framing layer § Breaks down HTTP protocol communication into exchange of binary-encoded frames § Mapped to messages that belong to particular stream, all of which multiplexed within single TCP connection Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET HTTP/2 https://developers.google.com/web/fundamentals/performance/http2 

12 Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET ProtoBuf (Protocol Buffers) § Language-neutral, platform-neutral, extensible mechanism for serializing structured data § Like XML/XSD, but smaller, faster, and partly simpler § Define how you want your data to be structured once § Use special generated source code to easily write and read structured data to and from a variety of data streams and using a variety of languages § Uses integer tokens to identify members (not names) § Protocol buffers support generated code for many languages, including C# § Binary representation on the wire message Person { required string name = 1; required int32 id = 2; optional string email = 3; } https://developers.google.com/protocol-buffers 

13 § .NET Core supports gRPC since 3.0 § Contract-First: You need a .proto file § Add it to .csproj file § Set the compilation mode: Server, Client, Both § C# code gets generated when the .proto file changes § “Add Service Reference…” in VS can handle the client side for you § Implement gRPC service based on generated base class § Get typed client proxy on the client side Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Contract-First gRPC in .NET Core https://www.nuget.org/packages/Grpc.Net.ClientFactory/ https://www.nuget.org/packages/Grpc.Tools/ https://www.nuget.org/packages/Grpc.AspNetCore/ https://www.nuget.org/packages/Google.ProtoBuf/ 

14 § Browsers are the de-facto frontend platform today § Native gRPC does not work in browsers (due to restrictions for HTTP/2 framing in browsers) Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET gRPC & the Web 

15 gRPC-Web Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET 

16 § Implementation of gRPC for browser clients § gRPC-Web clients connect to gRPC services via a gRPC-Web proxy § Originally for JavaScript § Wire formats § mode=grpcwebtext § Content-type: application/grpc-web-text § Payload base64-encoded § Both unary and server streaming calls are supported § mode=grpcweb § Content-type: application/grpc-web+proto § Payload in binary protobuf format § Only unary calls are supported for now § .NET Core 3.1+ offers § Server-side middleware for proxy § Client library beyond JavaScript Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET gRPC-Web https://www.nuget.org/packages/Grpc.AspNetCoreWeb https://www.nuget.org/packages/Grpc.Net.Client.Web 

17 § We can have gRPC in .NET Core without having to write .proto files § Open source community project protobuf-net.Grpc § Builds on WCF contract semantics § ServiceContract, DataContract § Proto* attributes offer finer control § Implement gRPC service based on interface § Get typed client proxy at runtime based on interface, e.g. in Blazor Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Code-First gRPC(-Web) in .NET Core & Blazor https://www.nuget.org/packages/protobuf-net.Grpc.AspNetCore https://www.nuget.org/packages/System.ServiceModel.Primitives 

18 Misc Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET 

19 § Traditional gRPC over HTTP/2 supports streaming in all directions § gRPC-Web offers limited support for streaming § gRPC-Web browser clients don't support calling client streaming and bidirectional streaming methods § ASP.NET Core gRPC services hosted on Azure App Service and IIS don't support bidirectional streaming § When using gRPC-Web, only use unary methods and server streaming methods Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Streaming Data 

20 § gRPC itself is agnostic to authentication protocols § gRPC in .NET Core can fully integrate into ASP.NET Core middlewares § Authentication § Can use ASP.NET Core authentication § Server code can access user info via ServerCallContext § Bearer token authentication integrated into managed client via GrpcWebHandler § Authorization § Simply use ASP.NET Core authorization framework Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Authentication & Authorization 

21 Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Frontend-to-backend Communication – Comparison Web APIs § Different API styles possible § Potential for client- driven REST interactions § Stateless § No client lib mandatory § Strong tooling ecosystem § Code-First (Contract-First with external tooling) gRPC(-Web) § Explicit RPC § Stateless § Code sharing between client and server – ideal for Blazor WebAssembly in ‘closed’ scenarios § Optimized payload size § Efficient data streaming § Contract-First (Code-First with 3rd party lib) SignalR § Bi-directional data exchange (RPC-like) § Simple programming model § Stateful § Transport protocol fallbacks § Optimized for push scenarios § Broadcast possible § Code-First 

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Demoanwendung: https://github.com/thinktecture/blazor-webassembly-demo Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter 22 

23 § ASP.NET Core Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § gRPC § https://grpc.io/docs/what-is-grpc/introduction/ § https://grpc.io/docs/languages/csharp/basics/ § gRPC in .NET Core § https://docs.microsoft.com/en-us/aspnet/core/tutorials/grpc/grpc-start § gRPC-Web in .NET Core § https://docs.microsoft.com/en-us/aspnet/core/grpc/browser § gRPC Code-First in .NET Core § https://github.com/protobuf-net/protobuf-net.Grpc § Test gRPC services with gRPCurl in ASP.NET Core § https://docs.microsoft.com/en-us/aspnet/core/grpc/test-tools Blazor WebAssembly jenseits von REST gRPC in Web-Apps & .NET Resources