Blazor jenseits von REST: SignalR & gRPC in Web-Apps Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO

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, Angular [email protected] @christianweyer https://www.thinktecture.com Blazor jenseits von REST SignalR & gRPC in Web-Apps Christian Weyer

3 § Services and consumers communication § gRPC & gRPC-Web § WebSockets & SignalR § When to use what Blazor jenseits von REST SignalR & gRPC in Web-Apps Talking Points

4 § Service to service § Frontend to backend service § Backend service to frontend Blazor jenseits von REST SignalR & gRPC in Web-Apps Types of communication

5 § SPA framework for C# and .NET developers § Create web UI frontends with HTML and CSS § Write client-side logic with C# § .NET runtime in WebAssembly § JavaScript interop is often needed § Need to communicate with services/backends § “REST” APIs are the de-facto standard means in the web § HttpClient is our friend § Service pattern for abstracting communication details Blazor jenseits von REST SignalR & gRPC in Web-Apps ASP.NET Core Blazor WebAssembly

6 § Request-Response § Client-initiated § Push § Server-initiated § Streaming § Client- or Server-initiated § Bidirectional § Client- or Server-initiated Blazor jenseits von REST SignalR & gRPC in Web-Apps Communication Patterns

7 § Let’s call it Web APIs (RPC, REST, OData, GraphQL, …) § JSON as major data exchange format § Great tooling § Can handle binary data easily § Highly interoperable § JSON text format can be verbose § Compression is a must § Loosely typed § Open API can help here § Not every MEP can be easily implemented Blazor jenseits von REST SignalR & gRPC in Web-Apps Why may “REST” Services not be enough?

8 § In Web Services world we did a lot of contract-first § In Web API world we do a lot of code-first Blazor jenseits von REST SignalR & gRPC in Web-Apps Interface modeling: Code-First vs. Contract-First § Code-First § Agile by writing platform code § Contract gets derived or generated from code § May not lead to highest interoperability § Contract-First § Specification before implementation § Platform code gets generated from contract description § Formal way to ensure highest interoperability

9 § gRPC was initially created for synchronous service to service communication § More efficient than Web APIs § Opinionated contract-first § Uses HTTP/2 as transport protocol § Offers e.g. streaming, bidirectional communication § Protocol Buffers § Defining format for contracts, operations, messages § Message exchange format § Some people like to use gRPC between frontends and backends, as well § .NET Core supports gRPC since 3.1 § Browsers are the de-facto frontend platform today § Native gRPC does not work in browsers Blazor jenseits von REST SignalR & gRPC in Web-Apps gRPC https://www.nuget.org/packages/Grpc.AspNetCore https://www.nuget.org/packages/Grpc.Net.Client

10 § JavaScript implementation of gRPC for browser clients § gRPC-Web clients connect to gRPC services via a gRPC-Web proxy § Wire formats § mode=grpcwebtext § Content-type: application/grpc-web-text § Payload base64-encoded § Both unary and server streaming calls are supported § mode=grpcweb § Content-type: application/grpc-web+proto § Payload in binary protobuf format § Only unary calls are supported for now § .NET Core 3.1 offers § Server-side middleware § Client library beyond JavaScript Blazor jenseits von REST SignalR & gRPC in Web-Apps gRPC-Web https://www.nuget.org/packages/Grpc.AspNetCoreWeb https://www.nuget.org/packages/Grpc.Net.Client.Web

11 § We can have gRPC in .NET Core without having to write .proto files § Open source community project protobuf-net.Grpc § Builds on WCF contract semantics § ServiceContract, DataContract § Proto* attributes offer finer control § Implement gRPC service based on interface § Get typed client proxy at runtime based on interface Blazor jenseits von REST SignalR & gRPC in Web-Apps Code-First gRPC(-Web) in .NET Core https://www.nuget.org/packages/protobuf-net.Grpc.AspNetCore https://www.nuget.org/packages/System.ServiceModel.Primitives

12 § Extension to HTTP spec: upgrades to socket § https://caniuse.com/#search=websockets § Enables real-time bi-directional data exchange § Can send arbitrary data over WebSockets § Usually you need a ‘protocol’, e.g. for RPC-style communication Blazor jenseits von REST SignalR & gRPC in Web-Apps WebSockets – Client-initiated multi-purpose communication HTTP „upgrade“ request Client Server Response handshake WebSocket connection Close connection

13 § Bi-directional real-time communication between client and server § Real-time messaging and push § Different transport protocols for message exchange (fallbacks) § WebSockets, Server Sent Events, Long Polling § Concepts for differentiating Clients and Groups § Hubs provide a high-level abstraction of bi-directional RPC § Hub protocol uses JSON by default, can use MessagePack § Broad availability of client libs (e.g. JavaScript, .NET, Java etc.) Blazor jenseits von REST SignalR & gRPC in Web-Apps ASP.NET Core SignalR https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Common https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Protocols.MessagePack

14 Blazor jenseits von REST SignalR & gRPC in Web-Apps (Synchronous) Frontend-to-backend - When to use what Web APIs § Different API styles possible § Potential for client- driven REST interactions § No client lib mandatory § Strong tooling ecosystem § Code-First (Contract-First with external tooling) gRPC(-Web) § Explicit RPC § Code sharing between client and server § Optimized payload size § Efficient data streaming § Contract-First (Code- First with 3rd party lib) SignalR § Bi-directional data exchange § Transport protocol fallbacks § Optimized for push scenarios § Simple programming model § Code-First

15 Blazor jenseits von REST SignalR & gRPC in Web-Apps Blazor WebAssembly Whitepaper (deutsch) https://www.thinktecture.com/de/whitepapers/blazor-webassembly

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Demoanwendung: https://github.com/thinktecture/dwx-home-blazor-grpc-signalr Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter 16

17 § 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 § ASP.NET Core SignalR § https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor-webassembly? Blazor jenseits von REST SignalR & gRPC in Web-Apps Resources