Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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?

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer
PRO

May 26, 2021
Tweet

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