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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. 4
   What do we have today?
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

5. 5
   SPAs & APIs
   Browser clients | Server logic & data | Communication
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

6. 6
   Contract First vs. Code First
   Boundaries | Open vs. closed | Formal vs. pragmatic
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

7. 7
   Loosely Coupled
   Web/REST APIs | HTTP (URLs + Verbs) | DTOs
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

8. 8
   JSON
   Text-based | Lightweight | Schema-less
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

9. 9
   Interface Derived
   Swagger / Open API | Code generation | RPC-like
   Blazor WebAssembly jenseits von REST
   gRPC in Web-Apps
   

   View Slide

10. 10
    Why bother?
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

11. 11
    Interface First
    Controlled scenario | Strongly-typed | Fidelity
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

12. 12
    RPC
    Doing it already | HTTP/2 | Protocol Buffers
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

13. 13
    Protocol Buffers
    Binary encoded | Optimized | Schema-ful
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

14. 14
    How to achieve it?
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

15. 15
    Facade Pattern
    SoC | Functional abstraction | DI
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

17. 17
    gRPC Service
    RPC (façade) | ASP.NET Core endpoint | Contract-first
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

19. 19
    Code First
    Contract sharing | WCF, anyone? | Full fidelity
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

21. 21
    gRPC-Web
    Browser sandbox | ASP.NET Core middleware | Text / binary
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

23. 23
    Blazor Client
    Interface-based | Full IntelliSense | Nuget deps
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

25. 25
    Streaming Data
    Beyond request-response | From server to clients
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

26. 26
    DEMO
    gRPC-Web streaming
    Blazor WebAssembly jenseits von REST
    gRPC in Web-Apps
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide