gRPC & Blazor WebAssembly: Ein Traumpaar!? Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO

§ 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 [email protected] @christianweyer https://www.thinktecture.com Christian Weyer Ein Traumpaar!? gRPC & Blazor WebAssembly 2

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 Ein Traumpaar!? 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 § 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 Ein Traumpaar!? Beyond our own nose: Reconsidering SPA architectures – in a pragmatic way

5 gRPC & Blazor WebAssembly Ein Traumpaar!? Two assumptions – for controlled environments One programming language & framework Strongly typed client-server communication

6 gRPC & Blazor WebAssembly Ein Traumpaar!? Two assumptions One programming language & framework Strongly typed client-server communication

7 ASP.NET Core backends Blazor frontends gRPC & Blazor WebAssembly Ein Traumpaar!?

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 Ein Traumpaar!? 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 gRPC & Blazor WebAssembly Ein Traumpaar!? WebAssembly browser support https://caniuse.com/#feat=wasm

10 gRPC & Blazor WebAssembly Ein Traumpaar!? Two assumptions One programming language & framework Strongly typed client-server communication

😊 § 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 Ein Traumpaar!? Reconsidering Web APIs as service interfaces § Let’s just call them Web APIs, please (“REST”…) 11

12 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 RPC-ish APIs with gRPC gRPC & Blazor WebAssembly Ein Traumpaar!?

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 Ein Traumpaar!? gRPC

16 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 § 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 Ein Traumpaar!? gRPC in .NET

18 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 § 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 Ein Traumpaar!? OK – This is not what we want 😏

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 Ein Traumpaar!? Code-First gRPC in .NET & Blazor

21 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 gRPC browser clients with gRPC-Web gRPC & Blazor WebAssembly Ein Traumpaar!?

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 Ein Traumpaar!? gRPC-Web

24 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 § 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 Ein Traumpaar!? Developer tooling in browser

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 Ein Traumpaar!? Performance & size https://twitter.com/JamesNK/status/1399496670958604292

28 Wrap-up gRPC & Blazor WebAssembly Ein Traumpaar!?

29 gRPC & Blazor WebAssembly Ein Traumpaar!? .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 gRPC & Blazor WebAssembly Ein Traumpaar!? 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

Thank you! Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] 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 § 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 Ein Traumpaar!? Resources