Blazor WebAssembly & 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
2. 2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Web-based & mobile 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 § Client § Server § 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 today
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 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
7. 7 Contract-first vs. Code-first Boundaries | Open vs. closed | Formal vs. pragmatic Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
8. 8 Loosely coupled Web APIs | HTTP (URLs + Verbs) | DTOs Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
9. 9 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
10. 10 Metadata derived Swagger / Open API | Code generation | RPC-like Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
11. 11 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
12. 12 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
13. 13 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
14. 14 Why? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
15. 15 Metadata-first Controlled scenario | Strongly-typed | Fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
16. 16 RPC Doing it already | Semantics | HTTP/2 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
17. 17 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
18. 18 How? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
19. 19 Service Pattern SoC | Functional abstraction | DI Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
20. 20 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
21. 21 gRPC Service RPC (facades) | ASP.NET Core endpoint | Contract-first Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
22. 22 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
23. 23 Code-first Contract sharing | Best practice in WCF | Full fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
24. 24 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
25. 25 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text / binary Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
26. 26 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
27. 27 Blazor Client Interface-based | Full IntelliSense | Nuget deps Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
28. 28 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
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 RPC-like 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 Not intended for code sharing Codegen possible Code sharing w/ Code-first Codegen with Contract-first Not intended for code sharing No client lib mandatory (fetch) Needs client lib Needs client lib Usually request-response Can do streaming Several message exchange patterns Push possible Efficient data streaming gRPC-Web is limited 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/
32. Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO