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

Blazor WebAssembly jenseits von REST - gRPC in Web-Apps

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?

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer
PRO

August 11, 2021
Tweet

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