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 @christianweyer Thinktecture AG, Co-Founder & CTO
2. § Co-Founder & CTO at Thinktecture AG § Personal focus on § Cloud-native & serverless architectures § Pragmatic end-to-end solutions § Mobile & web-based application architectures § Independent Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com Christian Weyer A match made in heaven? gRPC & Blazor WebAssembly 2
3. 3 § Server-side [micro]services with APIs § Written in C# with ASP.NET Core § Exposing HTTP/ REST/ Web APIs § Web-based smart clients § JavaScript-based SPAs § Communication via HTTPS 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 involved § Increased needed knowledge & different coding habits → Improving developer productivity § SPA communication with server-side APIs/services § Thinking different in controlled & closed 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 – for controlled environments 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 ASP.NET Core backends Blazor frontends gRPC & Blazor WebAssembly A match made in heaven?
8. 8 § 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? Blazor as SPA technology Mono-based Runtime .NET CLR .NET 6 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)
9. 9 gRPC & Blazor WebAssembly A match made in heaven? WebAssembly browser support https://caniuse.com/#feat=wasm
10. 10 gRPC & Blazor WebAssembly A match made in heaven? Two assumptions One programming language & framework Strongly typed client-server communication
11. 😊 § JSON as major data exchange format § Great tooling § Highly interoperable § Can handle arbitrary binary data 🤔 § JSON text format can be verbose § Loosely coupled & typed § Yeah, by design § Open API can help here § RPC-ish in many cases gRPC & Blazor WebAssembly A match made in heaven? Reconsidering Web APIs as service interfaces § Let’s just call them Web APIs, please (“REST”…) 11
12. 12 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 Strongly-typed gRPC services & clients Our journey
13. 13 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 Strongly-typed gRPC services & clients Our journey
14. 14 RPC-ish APIs with gRPC gRPC & Blazor WebAssembly A match made in heaven?
15. 15 § Initially created for interoperable synchronous [micro]service-to-[micro]service communication § 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
16. 16 gRPC & Blazor WebAssembly A match made in heaven? Protocol Buffers (ProtoBuf) § 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; }
17. 17 § gRPC support 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
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 Strongly-typed gRPC services & clients Our journey
19. 19 § 1. We are in .NET world on both sides § Services § Clients We are in a controlled environment 👉‍ Let’s do .NET, all the way! § 2. gRPC does not work for browsers gRPC & Blazor WebAssembly A match made in heaven? OK – This is not what we want 😏
20. 20 § 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 § 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
21. 21 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 Strongly-typed gRPC services & clients Our journey
22. 22 gRPC browser clients with gRPC-Web gRPC & Blazor WebAssembly A match made in heaven?
23. 23 § Native gRPC does not work in browsers § Due to restrictions for HTTP/2 framing in browsers § gRPC-Web is slimmed-down implementation of gRPC for browser clients § gRPC-Web clients connect to gRPC services via a gRPC-Web proxy § Since .NET Core 3.1 § 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
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 Strongly-typed gRPC services & clients Our journey
25. 25 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 Strongly-typed gRPC services & clients Our journey
26. 26 § No native support in browsers § gRPC-Web Developer Tools as Chrome extension § https://github.com/ SafetyCulture/ grpc-web-devtools § Blazor WASM integration PoC § https://github.com/thinktecture-labs/blazor-grpc-web-devtooling gRPC & Blazor WebAssembly A match made in heaven? Developer tooling in browser
27. 27 § gRPC / gRPC-Web in Blazor WASM can be really fast § Comparing JSON and gRPC-Web requests § With AOT § JSON is 6 times faster § gRPC is 10 times faster § gRPC deserializes 10,000 items in 0.03 seconds § https://grpcblazorperf.azurewebsites.net gRPC & Blazor WebAssembly A match made in heaven? Performance & size https://twitter.com/JamesNK/status/1399496670958604292
28. 28 Wrap-up gRPC & Blazor WebAssembly A match made in heaven?
29. 29 gRPC & Blazor WebAssembly A match made in heaven? .NET 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
30. 30 gRPC & Blazor WebAssembly A match made in heaven? A match made in heaven? 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 gRPC Code-first seems best fit for .NET end-to-end
31. Thank you! Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demo: https://github.com/thinktecture/blazor-wasm-grpc-code-first https://github.com/thinktecture-labs/blazor-grpc-web-devtooling Articles about Blazor, PWA, Web Components, Angular, .NET Core & more: https://www.thinktecture.com/en/newsletter 31
32. 32 § 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