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
Developer Week: Building modern applications with GraphQL and Blazor
By Michael Ingmar Staib
Developer Week: Building modern applications with GraphQL and Blazor
ChilliCream on the web: https://chillicream.github.io/hotchocolate/ ChilliCream on GitHub: https://github.com/ChilliCream/hotchocolate Demos: https://github.com/michaelstaib/PublicSpeaking/tree/master/minsk_dotnetsummitby_2020 Banana Cake Pop - GraphQL IDE: https://hotchocolate.io/docs/banana-cakepop
