Blazor WebAssembly jenseits von REST - gRPC in Web-Apps

Mit Blazor WebAssembly können Entwickler C#-Code für SPAs im Browser schreiben und Code mit der .NET-Serverseite ihrer Anwendungen teilen. Normalerweise entwerfen und verwenden sie JSON-basierte Web-APIs, um zwischen der Client- und der Serverlogik zu kommunizieren. In dieser Session demonstriert Christian Weyer, wie man gRPC & gRPC-Web Code-First einsetzt, um .NET-Interfaces stark typisiert zu teilen. Bei diesem Ansatz ist keine Codegenerierung erforderlich, man erhält dieselbe Syntax und volle IntelliSense auf beiden Seiten. Ist bei diesem Ansatz alles Gold was glänzt?

Transcript

1. Blazor WebAssembly jenseits von REST: gRPC in Web-Apps Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 1
2. 2 Blazor WebAssembly jenseits von REST gRPC in Web-Apps § 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 christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com Christian Weyer P
3. 3 § Server-side APIs § Web clients § Re-considering SPA communication with server- side APIs/services § .NET on server, .NET on client § Controlled environments → Improving the inner loop? Blazor WebAssembly jenseits von REST gRPC in Web-Apps SPA architecture HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API
4. 4 What do we have today? Blazor WebAssembly jenseits von REST gRPC in Web-Apps
5. 5 SPAs & APIs Browser clients | Server logic & data | Communication Blazor WebAssembly jenseits von REST gRPC in Web-Apps
6. 6 Contract First vs. Code First Boundaries | Open vs. closed | Formal vs. pragmatic Blazor WebAssembly jenseits von REST gRPC in Web-Apps
7. 7 Loosely Coupled Web/REST APIs | HTTP (URLs + Verbs) | DTOs Blazor WebAssembly jenseits von REST gRPC in Web-Apps
8. 8 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly jenseits von REST gRPC in Web-Apps
9. 9 Interface Derived Swagger / Open API | Code generation | RPC-like Blazor WebAssembly jenseits von REST gRPC in Web-Apps
10. 10 Why bother? Blazor WebAssembly jenseits von REST gRPC in Web-Apps
11. 11 Interface First Controlled scenario | Strongly-typed | Fidelity Blazor WebAssembly jenseits von REST gRPC in Web-Apps
12. 12 RPC Doing it already | HTTP/2 | Protocol Buffers Blazor WebAssembly jenseits von REST gRPC in Web-Apps
13. 13 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor WebAssembly jenseits von REST gRPC in Web-Apps
14. 14 How to achieve it? Blazor WebAssembly jenseits von REST gRPC in Web-Apps
15. 15 Facade Pattern SoC | Functional abstraction | DI Blazor WebAssembly jenseits von REST gRPC in Web-Apps
16. 16 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient
17. 17 gRPC Service RPC (façade) | ASP.NET Core endpoint | Contract-first Blazor WebAssembly jenseits von REST gRPC in Web-Apps
18. 18 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient
19. 19 Code First Contract sharing | WCF, anyone? | Full fidelity Blazor WebAssembly jenseits von REST gRPC in Web-Apps
20. 20 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient
21. 21 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text / binary Blazor WebAssembly jenseits von REST gRPC in Web-Apps
22. 22 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient
23. 23 Blazor Client Interface-based | Full IntelliSense | Nuget deps Blazor WebAssembly jenseits von REST gRPC in Web-Apps
24. 24 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 5 steps Open API / Swagger to the rescue? Facade pattern on the client gRPC service on the server Code-first gRPC service gRPC-Web for browser clients Code-first gRPC- Web client Web APIs & HttpClient
25. 25 Streaming Data Beyond request-response | From server to clients Blazor WebAssembly jenseits von REST gRPC in Web-Apps
26. 26 DEMO gRPC-Web streaming Blazor WebAssembly jenseits von REST gRPC in Web-Apps
27. 27 Blazor WebAssembly jenseits von REST gRPC in Web-Apps 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 P
28. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demoanwendung: https://github.com/thinktecture/blazor-wasm-grpc-code-first Blazor Knowledge Hub: https://www.thinktecture.com/de/asp-dotnet-core-blazor/ Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://www.thinktecture.com/de/newsletter 28 K E
29. 29 § ASP.NET Core Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § Open API client code generator § https://github.com/christianhelle/apiclientcodegen § 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 jenseits von REST gRPC in Web-Apps Resources