$30 off During Our Annual Pro Sale. View Details »

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?

Christian Weyer
PRO

August 11, 2021
Tweet

More Decks by Christian Weyer

Other Decks in Programming

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.wey[email protected] @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
    [email protected]
    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