Save 37% off PRO during our Black Friday Sale! »

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

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?

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer
PRO

January 27, 2021
Tweet

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