Blazor WebAssembly & gRPC - Code-first .NET SPA developer productivity

Slide 1

Slide 1 text

Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO

Slide 2

Slide 2 text

2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Web-based & mobile 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 [email protected] @christianweyer https://www.thinktecture.com Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer

Slide 3

Slide 3 text

3 § Client § Server § Re-considering SPA communication with server-side services § .NET on server, .NET on client § In controlled environments § By example § Is really everything gold that glitters? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Our journey today

Slide 4

Slide 4 text

4 What? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 5

Slide 5 text

5 SPAs & APIs Browser client | Server logic & data | Communication Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 6

Slide 6 text

6 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 7

Slide 7 text

7 Contract-first vs. Code-first Boundaries | Open vs. closed | Formal vs. pragmatic Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 8

Slide 8 text

8 Loosely coupled Web APIs | HTTP (URLs + Verbs) | DTOs Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 9

Slide 9 text

9 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 10

Slide 10 text

10 Metadata derived Swagger / Open API | Code generation | RPC-like Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 11

Slide 11 text

11 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 12

Slide 12 text

12 JSON Text-based | Lightweight | Schema-less Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 13

Slide 13 text

13 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 14

Slide 14 text

14 Why? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 15

Slide 15 text

15 Metadata-first Controlled scenario | Strongly-typed | Fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 16

Slide 16 text

16 RPC Doing it already | Semantics | HTTP/2 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 17

Slide 17 text

17 Protocol Buffers Binary encoded | Optimized | Schema-ful Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 18

Slide 18 text

18 How? Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 19

Slide 19 text

19 Service Pattern SoC | Functional abstraction | DI Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 20

Slide 20 text

20 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 21

Slide 21 text

21 gRPC Service RPC (facades) | ASP.NET Core endpoint | Contract-first Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 22

Slide 22 text

22 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 23

Slide 23 text

23 Code-first Contract sharing | Best practice in WCF | Full fidelity Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 24

Slide 24 text

24 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 25

Slide 25 text

25 gRPC-Web Browser sandbox | ASP.NET Core middleware | Text / binary Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 26

Slide 26 text

26 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 27

Slide 27 text

27 Blazor Client Interface-based | Full IntelliSense | Nuget deps Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 28

Slide 28 text

28 DEMO Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity

Slide 29

Slide 29 text

29 Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity SPA-to-API communication – in controlled scenarios Web API gRPC (-Web) SignalR Different API styles possible (RPC, REST, GraphQL, OData etc.) RPC RPC-like 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 Not intended for code sharing Codegen possible Code sharing w/ Code-first Codegen with Contract-first Not intended for code sharing No client lib mandatory (fetch) Needs client lib Needs client lib Usually request-response Can do streaming Several message exchange patterns Push possible Efficient data streaming gRPC-Web is limited Dual one-way Optimized for push Broadcast possible Strong tooling ecosystem Evolving tooling ecosystem No tooling ecosystem

Slide 30

Slide 30 text

30 § 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 § Test gRPC services with gRPCurl in ASP.NET Core § https://docs.microsoft.com/en-us/aspnet/core/grpc/test-tools Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Resources

Slide 31

Slide 31 text

Thank you! Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Demos: https://github.com/thinktecture/blazor-wasm-grpc-code-first Articles about Blazor, PWA, Web Components, Angular, .NET Core & more: https://thinktecture.com/en/

Slide 32

Slide 32 text

Blazor WebAssembly & gRPC Code-first .NET SPA developer productivity Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO