gRPC & Blazor WebAssembly: Ein Traumpaar!?

Mit Blazor WebAssembly können Entwickler C#-Code für SPAs im Browser schreiben und Code mit der Serverseite ihrer Anwendungen teilen. Normalerweise entwerfen und verwenden wir hier JSON-basierte Web-APIs, um zwischen der Client- und der Serverlogik zu kommunizieren.
In dieser Session demonstriert Christian Weyer, wie man gRPC und gRPC-Web auf eine Code-First-Weise einsetzt, um .NET-Interfaces streng typisiert auf beiden Seiten zu nutzen. Bei diesem Ansatz ist keine Codegenerierung erforderlich, Sie erhalten auf beiden Seiten die gleiche Syntax und volles IntelliSense. Tatsächlich gewinnen Sie die guten Teile, die wir bereits vor viiieeelen Jahren mit WCF hatten, jetzt für das allgegenwärtige und offene Web. Aber: Ist wirklich alles Gold, was glänzt?

Transcript

1. gRPC & Blazor WebAssembly: Ein Traumpaar!? Christian Weyer https://thinktecture.com/christian-weyer @christianweyer 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 Ein Traumpaar!? 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 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. 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. 5 gRPC & Blazor WebAssembly Ein Traumpaar!? Two assumptions – for controlled environments One programming language & framework Strongly typed client-server communication
6. 6 gRPC & Blazor WebAssembly Ein Traumpaar!? Two assumptions One programming language & framework Strongly typed client-server communication
7. 7 ASP.NET Core backends Blazor frontends gRPC & Blazor WebAssembly Ein Traumpaar!?
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 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. 9 gRPC & Blazor WebAssembly Ein Traumpaar!? WebAssembly browser support https://caniuse.com/#feat=wasm
10. 10 gRPC & Blazor WebAssembly Ein Traumpaar!? 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 Ein Traumpaar!? Reconsidering Web APIs as service interfaces § Let’s just call them Web APIs, please (“REST”…) 11
12. 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. 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. 14 RPC-ish APIs with gRPC gRPC & Blazor WebAssembly Ein Traumpaar!?
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 Ein Traumpaar!? gRPC
16. 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. 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. 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. 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. 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. 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. 22 gRPC browser clients with gRPC-Web gRPC & Blazor WebAssembly Ein Traumpaar!?
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 Ein Traumpaar!? gRPC-Web
24. 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. 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. 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. 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. 28 Wrap-up gRPC & Blazor WebAssembly Ein Traumpaar!?
29. 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. 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
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 Ein Traumpaar!? Resources