Building modern applications with GraphQL and Blazor

@michael_staib

https://bit.ly/graphql-github

If you like what we do give us a star on GitHub

{
  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 Desktop with .NET 6

The State of Blazor 

Let's Code!

Demo

State Management

Demo

https://bit.ly/graphql-chat

Persistence

Conclusion

  • Iterate faster
  • Reuse knowledge and code
  • Fetch data more efficiently
  • Use C#
  • Reactive components
  • State Management

https://chillicream.com

@michael_staib