Building real-time applications with GraphQL and Blazor

Michael Staib

{
  me {
    name
  }
}
{
  "me": {
    "name": "Michael Staib"
  }
}
{
  me {
    name
  }
}
{
  me {
    name
    image {
      width
      height
      url
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "image": {
      "width": 200,
      "height": 300,
      "url": "http://some/images/123.png"          
    }
  }
}
{
  me {
    name
    image {
      width
      height
      url
    }
  }
}
{
  me {
    name
    lastSeen
    friends {
      name
      lastSeen
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "lastSeen": "2018-05-19T18:45",
    "friends": [
      {
        "name": "Rafael Staib",
        "lastSeen": "2018-05-24T12:37"
      },
      {
        "name": "Pascal Senn",
        "lastSeen": "2018-06-07T17:13"
      }
    ]
  }
}
{
  me {
    name
    lastSeen
    friends {
      name
      lastSeen
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "lastSeen": "2018-05-19T18:45",
    "friends": [
      {
        "name": "Rafael Staib",
        "lastSeen": "2018-05-24T12:37"
      },
      {
        "name": "Pascal Senn",
        "lastSeen": "2018-06-07T17:13"
      }
    ]
  }
}
{
  me {
    ... PersonInfo
    friends {
      ... PersonInfo
    }
  }
}
fragment PersonInfo on Person {
  name
  lastSeen
}
  • One Endpoint
  • One Request
  • No over- or under-fetching
  • Type System
  • Predictable
  • .NET Core in the browser
  • Existing code can be re-used
  • Less JavaScript
  • More .NET
  • Near Native Performance
  • WebAssembly
  • OpenSource

C# Code and Razor Views

.NET Assemblies

Mono WebAssembly Runtime

Shadow DOM

WebAssembly VM

JavaScript

compiles

DOM

  • Blazor Server - Shipped with .NET Core 3.0
  • Blazor WebAssembly - Shipped in May 2020
  • Blazor PWA & Electron - Previews with .NET 5
  • Blazor Native - Under investigation

The State of BlazorĀ 

Let's Code!

PeopleList

Header

Footer

Message

Message

Conclusion

  • Iterate faster
  • Reuse knowledge and code
  • Fetch data more efficiently
  • Use C#

Outlook

Targeting July 2020

Release September 2020

+

https://chillicream.com

https://github.com/chillicream/hotchocolate

NDC Oslo 2020 - Building real-time applications with GraphQL and Blazor

By Michael Ingmar Staib

NDC Oslo 2020 - Building real-time applications with GraphQL and Blazor

  • 539