Blazor & gRPC - Code-first .NET SPA developer productivity

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. Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 1
2. 2 § 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 christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer
3. 3 § Web clients § Server-side APIs § Re-considering SPA communication with server-side services § .NET on server, .NET on client § In controlled environments § By example § Is really everything gold that glitters? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Our journey – from well-known to new
4. 4 What? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
5. 5 SPAs & APIs Browser client | Server logic & data | Communication Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
6. 6 Contract First vs. Code First Boundaries | Open vs. closed | Formal vs. pragmatic Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
7. 7 Loosely Coupled Web APIs | HTTP (URLs + Verbs) | DTOs Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
8. 8 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
9. 9 Interface Derived Swagger / Open API | Code generation | RPC-like Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
10. 10 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
11. 11 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
12. 12 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
13. 13 Why? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
14. 14 Interface First Controlled scenario | Strongly-typed | Fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
15. 15 RPC Doing it already | Semantics | HTTP/2 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
16. 16 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
17. 17 How? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
18. 18 Service Pattern SoC | Functional abstraction | DI Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
19. 19 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
20. 20 gRPC Service RPC (façade) | ASP.NET Core endpoint | Contract-first Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
21. 21 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
22. 22 Code First Contract sharing | Best practice in WCF | Full fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
23. 23 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
24. 24 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text / binary Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
25. 25 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
26. 26 Blazor Client Interface-based | Full IntelliSense | Nuget deps Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
27. 27 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
28. 28 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity 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
29. 29 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity 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 § ASP.NET Core Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § 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 & gRPC Code-first .NET SPA developer productivity Resources
31. Thank you! Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demos: https://github.com/thinktecture/blazor-wasm-grpc-code-first Articles about Blazor, PWA, Web Components, Angular, .NET Core & more: https://thinktecture.com/en/newsletter 31
32. Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO