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

2 Blazor WebAssembly jenseits von REST gRPC in Web-Apps § 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 Christian Weyer P

3 § Server-side APIs § Web clients § Re-considering SPA communication with server- side APIs/services § .NET on server, .NET on client § Controlled environments → Improving the inner loop? Blazor WebAssembly jenseits von REST gRPC in Web-Apps SPA architecture HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API

4 What do we have today? Blazor WebAssembly jenseits von REST gRPC in Web-Apps

5 SPAs & APIs Browser clients | Server logic & data | Communication Blazor WebAssembly jenseits von REST gRPC in Web-Apps

6 Contract First vs. Code First Boundaries | Open vs. closed | Formal vs. pragmatic Blazor WebAssembly jenseits von REST gRPC in Web-Apps

7 Loosely Coupled Web/REST APIs | HTTP (URLs + Verbs) | DTOs Blazor WebAssembly jenseits von REST gRPC in Web-Apps

8 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly jenseits von REST gRPC in Web-Apps

9 Interface Derived Swagger / Open API | Code generation | RPC-like Blazor WebAssembly jenseits von REST gRPC in Web-Apps

10 Why bother? Blazor WebAssembly jenseits von REST gRPC in Web-Apps

11 Interface First Controlled scenario | Strongly-typed | Fidelity Blazor WebAssembly jenseits von REST gRPC in Web-Apps

12 RPC Doing it already | HTTP/2 | Protocol Buffers Blazor WebAssembly jenseits von REST gRPC in Web-Apps

13 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor WebAssembly jenseits von REST gRPC in Web-Apps

14 How to achieve it? Blazor WebAssembly jenseits von REST gRPC in Web-Apps

15 Facade Pattern SoC | Functional abstraction | DI Blazor WebAssembly jenseits von REST gRPC in Web-Apps

16 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient

17 gRPC Service RPC (façade) | ASP.NET Core endpoint | Contract-first Blazor WebAssembly jenseits von REST gRPC in Web-Apps

18 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient

19 Code First Contract sharing | WCF, anyone? | Full fidelity Blazor WebAssembly jenseits von REST gRPC in Web-Apps

20 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient

21 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text / binary Blazor WebAssembly jenseits von REST gRPC in Web-Apps

22 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient

23 Blazor Client Interface-based | Full IntelliSense | Nuget deps Blazor WebAssembly jenseits von REST gRPC in Web-Apps

24 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient

25 Streaming Data Beyond request-response | From server to clients Blazor WebAssembly jenseits von REST gRPC in Web-Apps

26 DEMO gRPC-Web streaming Blazor WebAssembly jenseits von REST gRPC in Web-Apps

27 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 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 P

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Demoanwendung: https://github.com/thinktecture/blazor-wasm-grpc-code-first Blazor Knowledge Hub: https://www.thinktecture.com/de/asp-dotnet-core-blazor/ Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://www.thinktecture.com/de/newsletter 28 K E

29 § ASP.NET Core Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § Open API client code generator § https://github.com/christianhelle/apiclientcodegen § 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 Resources