Slide 1
Slide 1 text
Blazor WebAssembly
Das ist neu .NET 7.0
Patrick Jahr
@jahr_patrick
Developer Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Patrick Jahr
Developer Consultant @ Thinktecture AG
E-Mail: [email protected]
Twitter: @jahr_patrick
Slides: https://thinktecture.com/patrick-jahr
Blazor WebAssembly
Das ist neu in .NET 7.0
Patrick Jahr
P
Slide 3
Slide 3 text
Blazor WebAssembly
Das ist neu in .NET 7.0
Was ist mit Blazor Server?
Slide 4
Slide 4 text
„Terminal Server für Web-Entwickler“
- Thinktecture fokussiert auf SPA-Architekturen
- Blazor WebAssembly ist ein waschechtes SPA-Framework
- Blazor Server hat komplexe, nicht Web-Style Basisarchitektur – aka „Server-Client“
- Code wird immer auf Serverseite ausgeführt
- Zustand wird ausschließlich auf Serverseite gehalten
- Skalierung wird deutlich aufwändiger
- Auf dem Client ist nur ein schmaler JavaScript-Stub aktiv (aus dem Blazor-Framework)
- Jegliche UI-Interaktionen wandern immer über das Netzwerk (SignalR-Verbindung)
- Ständige Netzwerkverbindung nötig - fehleranfällig
- Keine Offlinefähigkeit - Möglichkeiten als SPA / PWA werden eingeschränkt
- Zustandsbehaftete Datenhaltung erschwert
- Infos über die technischen Details und Eigenheiten von Blazor Server:
- https://www.thinktecture.com/de/blazor/webinar-blazor-server-moegliche-alternative-zu-spas/
Blazor WebAssembly
Das ist neu in .NET 7.0
Was ist mit Blazor Server?
Slide 5
Slide 5 text
5
Blazor WebAssembly
Das ist neu in .NET 7.0
Alle .NET 7 Features im Überblick
Slide 6
Slide 6 text
6
Blazor WebAssembly
Das ist neu in .NET 7.0
Alle .NET 7 Features im Überblick
Slide 7
Slide 7 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
Slide 8
Slide 8 text
Blazor WebAssembly
Das ist neu in .NET 7.0
EXPERIMENTAL: QuickGrid
Slide 9
Slide 9 text
- First Framework included Data Grid
- Microsoft.AspNetCore.Components.QuickGrid
- (limited) customizeable
- Experimental Package
- High performance data binding
- Queryable
- Itemsprovider
- EF Database Context
Blazor WebAssembly
Das ist neu in .NET 7.0
EXPERIMENTAL: QuickGrid
Slide 10
Slide 10 text
Blazor WebAssembly
Das ist neu in .NET 7.0
EXPERIMENTAL: QuickGrid
Slide 11
Slide 11 text
Blazor WebAssembly
Das ist neu in .NET 7.0
DEMO
Slide 12
Slide 12 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
Slide 13
Slide 13 text
Getter/Setter
Blazor WebAssembly
Das ist neu in .NET 7.0
Model binding updates
Slide 14
Slide 14 text
Two-Way-Binding after Event
Blazor WebAssembly
Das ist neu in .NET 7.0
Model binding updates
Slide 15
Slide 15 text
Blazor WebAssembly
Das ist neu in .NET 7.0
DEMO
Slide 16
Slide 16 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
Slide 17
Slide 17 text
Blazor WebAssembly
Das ist neu in .NET 7.0
Navigation Updates
Slide 18
Slide 18 text
- NavigationLock
- Block external navigations
- Add check if navigation is ok
Blazor WebAssembly
Das ist neu in .NET 7.0
Navigation Updates
Slide 19
Slide 19 text
Blazor WebAssembly
Das ist neu in .NET 7.0
DEMO
Slide 20
Slide 20 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
Slide 21
Slide 21 text
- Can only be used in browsers
- JS Interop Methods should be static
Blazor WebAssembly
Das ist neu in .NET 7.0
JS Interop Attributes
- Module import must be executed in
the OnInitializedAsync
Method
Slide 22
Slide 22 text
Blazor WebAssembly
Das ist neu in .NET 7.0
DEMO
Slide 23
Slide 23 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
Slide 24
Slide 24 text
- NuGet Package: Microsoft.AspNetCore.Components.CustomElements
- Register Components as Custom element
- Published Project
- _content; _framework; *.css
Blazor WebAssembly
Das ist neu in .NET 7.0
Custom Elements
Slide 25
Slide 25 text
Blazor WebAssembly
Das ist neu in .NET 7.0
DEMO
Slide 26
Slide 26 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
P
Slide 27
Slide 27 text
Blazor WebAssembly
Das ist neu in .NET 7.0
Vorher Nachher
Slide 28
Slide 28 text
QuickGrid
Modelbinding
Updates
Improved
Navigation
JS Interop
Attributes
Custom
Elements
Pure
Templates
Resumé
Blazor WebAssembly
Das ist neu in .NET 7.0
P
Slide 29
Slide 29 text
Completing Features
Navigation improvements, Binding updates and more
Experimental Features
QuickGrid is a usefull way to display data, with small but still noticeable issues
Connect with other Frameworks
Embedding Custom Elements in other JavaScript frameworks is still a bit
cumbersome
Blazor WebAssembly
Das ist neu in .NET 7.0
Resumé
Slide 30
Slide 30 text
Vielen Dank
für Ihre Aufmerksamkeit!
Patrick Jahr
@jahr_patrick
[email protected]