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?

Christian Weyer

May 26, 2021
Tweet

More Decks by Christian Weyer

Other Decks in Programming

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 [email protected] @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. 5 SPAs & APIs Browser client | Server logic &

    data | Communication Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  5. 6 Contract First vs. Code First Boundaries | Open vs.

    closed | Formal vs. pragmatic Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  6. 7 Loosely Coupled Web APIs | HTTP (URLs + Verbs)

    | DTOs Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  7. 9 Interface Derived Swagger / Open API | Code generation

    | RPC-like Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  8. 11 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly &

    gRPC Code-first .NET SPA developer productivity
  9. 14 Interface First Controlled scenario | Strongly-typed | Fidelity Blazor

    WebAssembly & gRPC Code-first .NET SPA developer productivity
  10. 15 RPC Doing it already | Semantics | HTTP/2 Blazor

    WebAssembly & gRPC Code-first .NET SPA developer productivity
  11. 16 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor

    WebAssembly & gRPC Code-first .NET SPA developer productivity
  12. 18 Service Pattern SoC | Functional abstraction | DI Blazor

    WebAssembly & gRPC Code-first .NET SPA developer productivity
  13. 20 gRPC Service RPC (façade) | ASP.NET Core endpoint |

    Contract-first Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  14. 22 Code First Contract sharing | Best practice in WCF

    | Full fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  15. 24 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text

    / binary Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  16. 26 Blazor Client Interface-based | Full IntelliSense | Nuget deps

    Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity
  17. 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
  18. 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
  19. 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
  20. Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian

    Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO