gRPC & Blazor WebAssembly: A match made in heaven?

With Blazor WebAssembly, developers can write C# code for SPAs in the browser and share code with the server-side of their applications. Usually, you design and use JSON-based Web APIs to communicate between the client and the server logic. In this session, Christian Weyer demonstrates how to employ gRPC & gRPC-Web in a code-first manner to share .NET interface contracts in a strongly-typed way. With this approach, no code generation is needed, you get the same syntax and full IntelliSense on both sides. In fact, you gain the good parts we already had many years ago with WCF – now for the ubiquitous & open web. But: is really everything gold that glitters?

Transcript

1. gRPC & Blazor WebAssembly: A match made in heaven? Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 1
2. 2 gRPC & Blazor WebAssembly A match made in heaven? § Co-Founder & CTO at Thinktecture AG § Personal focus on § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Mobile & web-based application architectures § Interoperability, cross-device § Independent Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies, Angular christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com Christian Weyer
3. 3 § Server-side [micro]services with APIs § Written in C# with ASP.NET Core § Exposing Web APIs § Web-based clients § JavaScript-based SPAs § Communication via HTTP § Running on-prem, hosted, or in public Cloud § With or without containers § Infrastructure-focused gRPC & Blazor WebAssembly A match made in heaven? Typical SPA architectures for modern business applications HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API
4. 4 § Building SPAs end-to-end § Often too complex, with different stacks → Improving needed knowledge & coding habits § SPA communication with server-side APIs/services § Thinking different in controlled environments → Improving the inner loop gRPC & Blazor WebAssembly A match made in heaven? Beyond our own nose: Reconsidering SPA architectures – in a pragmatic way
5. 5 gRPC & Blazor WebAssembly A match made in heaven? Two assumptions One programming language & framework Strongly typed client-server communication
6. 6 gRPC & Blazor WebAssembly A match made in heaven? Two assumptions One programming language & framework Strongly typed client-server communication
7. 7 § Users want § Cross-Platform, Cross-Device § No installations § Offline (important for many use cases) § Developers think § Web is the solution - but web is different § SPA is the solution - but SPA is different § JavaScript seems to be an issue for lots of .NET developers § There is existing .NET code, what to do about it? § Which technologies to choose? § JavaScript for frontend, .NET for backend? § C# & .NET everywhere? gRPC & Blazor WebAssembly A match made in heaven? C# & .NET everywhere?
8. 8 Blazor gRPC & Blazor WebAssembly A match made in heaven?
9. 9 § Blazor is a family of web technologies § Server § WebAssembly § Blazor WebAssembly is an SPA framework § Web, SPA & distributed computing knowledge § HTML, CSS knowledge § DOM knowledge § JavaScript for DOM interaction & 3rd party integration § C# & .NET Standard for client-side logic → Full-stack C# possible gRPC & Blazor WebAssembly A match made in heaven? What is Blazor? Mono-based Runtime .NET CLR .NET 6 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)
10. 10 § Low-level bytecode for the Web § Bring any language into the browser § Currently targeted at C/C++, Rust et. al. § Achieve superior performance in certain cases § Not a replacement for JavaScript § MVP released, more features being implemented § Goals § Fast, efficient, portable § Readable and debuggable § Use existing sandboxing tools § Don’t break the Web gRPC & Blazor WebAssembly A match made in heaven? WebAssembly (Wasm)
11. 11 gRPC & Blazor WebAssembly A match made in heaven? WebAssembly browser support https://caniuse.com/#feat=wasm
12. 12 gRPC & Blazor WebAssembly A match made in heaven? Blazor WebAssembly in the browser Blazor DOM Web Assembly .NET Razor Components
13. 13 gRPC & Blazor WebAssembly A match made in heaven? Blazor WebAssembly technical architecture in .NET 6.0 (non-AOT) Compiler Parser JIT (.NET Assemblies are interpreted) Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor. webassembly.js Blazor SPA page (.html) JS Runtime dotnet.wasm dotnet.js mscorlib.dll etc. myapp.dll blazor.boot.json
14. 14 gRPC & Blazor WebAssembly A match made in heaven? Two assumptions One programming language & framework Strongly typed client-server communication
15. 😊 § JSON major data exchange format § Great tooling § Can handle arbitrary binary data § Highly interoperable § RPC-ish in many cases 🤔 § JSON text format can be verbose § Compression is usually a must § Not every MEP can be easily implemented § Loosely typed § Open API can help here gRPC & Blazor WebAssembly A match made in heaven? Reconsidering Web APIs as service interfaces § Let’s just call them Web APIs (REST, anyone?) 15
16. 16 § In Web Services world, we did a lot of contract-first (XSD, WSDL) § In Web API world, we do a lot of code-first (OpenAPI showed up later) gRPC & Blazor WebAssembly A match made in heaven? Service interface modeling: Code-first vs. Contract-first § Code-first § Agile, by writing platform code § Specification/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
17. 17 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
18. 18 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
19. 19 gRPC gRPC & Blazor WebAssembly A match made in heaven?
20. 20 § Initially created for interoperable synchronous [micro]service-to-[micro]service communication § WCF, anyone? § Its presence increases steadily (see GoLang) § Some people like to use gRPC between frontends and backends, as well § Uses HTTP/2 & Protocol Buffers § gRPC is genuinely contract-first gRPC & Blazor WebAssembly A match made in heaven? gRPC
21. 21 § gRPC has different types of method call patterns § Unary (request-response) § Server streaming § Client streaming § Bi-directional streaming gRPC & Blazor WebAssembly A match made in heaven? gRPC call patterns
22. 22 gRPC & Blazor WebAssembly A match made in heaven? ProtoBuf (Protocol Buffers) § Language-neutral, platform-neutral, extensible mechanism for describing & serializing structured data § Like XML/XSD, but smaller, faster, and partly simpler § Uses integer tokens to identify members, not names § Support for code generation for many languages, including C# § Also: (binary) serialization format on the wire message Person { required string name = 1; required int32 id = 2; optional string email = 3; }
23. 23 § .NET supports gRPC since .NET Core 3.0 § Always contract-first: write .proto file first § Implement gRPC service based on generated base class § Get typed client proxy generated on the client side based § C# code gets generated when the .proto file changes § “Add Service Reference…” in VS can handle the client side for you gRPC & Blazor WebAssembly A match made in heaven? gRPC in .NET
24. 24 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
25. 25 § gRPC does not work for browsers § We are in .NET world on both sides § Services § Clients § We are in a controlled environment § 👉‍ Let’s do .NET, all the way! gRPC & Blazor WebAssembly A match made in heaven? OK – This is not what we want…
26. 26 § We can have gRPC in .NET without having to write .proto files § Improving the inner loop § Open-source community project protobuf-net.Grpc § Implement gRPC service based on .NET interface § Get strongly-typed client proxy at runtime based on .NET interface, e.g., in Blazor § Can build on WCF contract semantics § ServiceContract, DataContract § Offers its own semantics § Service, ProtoContract gRPC & Blazor WebAssembly A match made in heaven? Code-First gRPC in .NET & Blazor
27. 27 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
28. 28 § Browsers are the de-facto frontend platform today § Native gRPC does not work in browsers (due to restrictions for HTTP/2 framing in browsers) § gRPC-Web is implementation of gRPC for browser clients § gRPC-Web clients connect to gRPC services via a gRPC-Web proxy § .NET offers § Server-side ASP.NET Core middleware for proxy § .NET client library (beyond JavaScript) § Unary calls & server-streaming supported gRPC & Blazor WebAssembly A match made in heaven? gRPC-Web
29. 29 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
30. 30 gRPC & Blazor WebAssembly A match made in heaven? Open API / Swagger code-gen? Service proxy pattern gRPC service? Code-first gRPC service gRPC-Web facade Code-first gRPC-Web client Web APIs & HttpClient gRPC services & strongly-typed clients Our journey
31. 31 Extra time gRPC & Blazor WebAssembly A match made in heaven?
32. 32 § In contract-first world, you share the .proto files § In code-first, you share .NET code § For testing and debugging tools, we need runtime information from the gRPC services § gRPC server reflection protocol is a standard § gRPCurl, gRPCui, Postman are prominent testing tools § protobuf-net.Grpc has reflection support § builder.Services.AddCodeFirstGrpcReflection(); § app.MapCodeFirstGrpcReflectionService(); gRPC & Blazor WebAssembly A match made in heaven? Reflection & testing with gRPC code-first
33. 33 § Transferring a stream of data over a longer period of time § Only server streaming supported in gRPC-Web § Can be used for real-time push § Server with protobuf-net.Grpc § IAsyncEnumerable<T> and CallContext in service interface § Client with protobuf-net.Grpc § Use CallOptions to enable cancellation with CancellationTokenSource gRPC & Blazor WebAssembly A match made in heaven? Streaming data with gRPC-Web code-first
34. 34 § Authentication and authorization are not gRPC-Web’s business § Usually, OAuth2- / OIDC-based token § Use ASP.NET Core’s features as with Web APIs § app.UseAuthentication(); § app.UseAuthorization(); § [Authorize] § In Blazor, use AuthorizationMessageHandler to add bearer token to gRPC-Web requests gRPC & Blazor WebAssembly A match made in heaven? Authentication & authorization for gRPC-Web
35. 35 § gRPC JSON transcoding for .NET – coming with .NET 7 § Doesn’t replace MVC or Minimal APIs § Only supports JSON, very opinionated about how Protobuf maps to JSON § gRPC-Web: browser apps call gRPC services with gRPC-Web clients and Protobuf § JSON transcoding: browser apps call gRPC services as Web APIs with JSON § Important: Does not work with code-first gRPC & Blazor WebAssembly A match made in heaven? “I am glad you asked…”: gRPC & Web APIs
36. 36 Wrap-up gRPC & Blazor WebAssembly A match made in heaven?
37. 37 gRPC & Blazor WebAssembly A match made in heaven? SPA-to-API communication – in controlled scenarios Web API gRPC (-Web) SignalR Different API styles possible (RPC, REST, GraphQL, OData etc.) RPC Bi-directional RPC HTTP HTTP/2 WebSockets (transport protocol fallbacks) Stateless Stateless Stateful Code-first Contract-first with external tooling Contract-first Code-first with 3rd party lib Code-first Code sharing of DTOs Code-gen possible Full code sharing w/ Code-First Code-gen with Contract-first Not intended for code sharing No client lib needed (fetch) Needs client lib Needs client lib Usually request-response Push possible (e.g. via long polling) Can do streaming Several message exchange patterns Push possible Efficient data streaming Dual one-way Optimized for push Broadcast possible Strong tooling ecosystem Evolving tooling ecosystem No tooling ecosystem
38. 38 § SPA architectures reconsidered (in controlled scenarios) § Blazor WebAssembly gives us C# & .NET power for SPAs in the browser § ASP.NET Core gives us gRPC & gRPC-Web power for SPA-to-service communication § Choose wisely J gRPC & Blazor WebAssembly A match made in heaven? Summary – a match made in heaven?
39. Thank you! Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demo: https://github.com/thinktecture/blazor-wasm-grpc-code-first Blazor Knowledge Hub: https://www.thinktecture.com/de/asp-dotnet-core-blazor/ Articles about Blazor, PWA, Web Components, Angular, .NET Core & more: https://www.thinktecture.com/en/newsletter 39
40. 40 § ASP.NET Core Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § Protocol Buffers § https://developers.google.com/protocol-buffers § 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 § gRPC JSON transcoding for .NET § https://devblogs.microsoft.com/dotnet/announcing-grpc-json-transcoding-for-dotnet/ gRPC & Blazor WebAssembly A match made in heaven? Resources