$30 off During Our Annual Pro Sale. View Details »

Webinar: Blazor WebAssembly: Das ist neu in .NET 7.0

Patrick Jahr
February 08, 2023
Programming
0
250

Webinar: Blazor WebAssembly: Das ist neu in .NET 7.0

.NET 7 ist hier: das neue Release unserer Lieblingsplattform. Vor allem im Bereich Blazor WebAssembly gab es wieder einige Verbesserungen und Neuerungen, die es lohnen, sich genauer anzuschauen.

In diesem Webinar zeigt Patrick Jahr anhand von Beispielen eine Auswahl der wichtigsten Blazor-WASM-Features in .NET 7 und wie diese angewendet werden können.

Patrick Jahr

February 08, 2023
Tweet

More Decks by Patrick Jahr

See All by Patrick Jahr
Blazor: Server, WebAssembly & Hybrid – ein Wegweiser
patrickjahr
0
22
Blazor WebAssembly in .NET 8: Game Changer für .NET SPAs?
patrickjahr
0
33
SPAs & APIs mal anders: gRPC Code-First mit Blazor WebAssembly & ASP.NET Core 7
patrickjahr
0
170
DDF-2023-Blazor WebAssembly: UI-Performance-Optimierungen in .NET 7
patrickjahr
0
14
Superkräfte für Blazor-Apps dank Project Fugu
patrickjahr
0
31
Blazor-Workshop: Full-Stack- und Cross-Plattform-Lösungen mit C# und WebAssembly
patrickjahr
0
54
Blazor WebAssembly: UI-Performanceoptimierungen in .NET 7
patrickjahr
0
43
BLAZOR-WORKSHOP: FULL-STACK- UND CROSS-PLATFORM-ANWENDUNGEN MIT C# UND WEBASSEMBLY
patrickjahr
0
66
BLAZOR IN .NET 7: SERVER, WEBASSEMBLY UND HYBRID – EIN WEGWEISER
patrickjahr
0
87

Other Decks in Programming

See All in Programming
C++20からC++23までの変化
faithandbrave
5
6.9k
長年運用されている Web サービスと 通信をするクライアントを Go で作ってみた話
commojun
0
410
Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi
doggy
3
1.8k
PHP and Symfony Apps As Standalone Binaries
dunglas
1
2.5k
if 式と switch 式による SwiftUI のプレビューエラー対策
ojun9
1
230
クソアプリを作ってみた💩 / kusojaku
uhooi
0
190
JakartaEE_for_Spring_OttawaJUG-2023.pdf
ivargrimstad
0
170
DIGGLEの分析基盤アーキテクチャ
zakky21
0
240
Second-System Syndrome: A tale of power-assert
twada
PRO
9
3.6k
GoにおけるCall Graphを用いた 大規模コードベースの影響調査
ffjlabo
0
330
TypeScript_コンパイラの内側に片足を入れる
ryounasso
1
230
Modern Java for the Masses! Is Java Still Relevant?
deepu105
1
470

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
123
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
10
1.3k
Atom: Resistance is Futile
akmur
257
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
900
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.7k
Making Projects Easy
brettharned
105
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Statistics for Hackers
jakevdp
788
220k
Documentation Writing (for coders)
carmenintech
55
3.5k
A better future with KSS
kneath
230
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
342
19k

Transcript

  1. Blazor WebAssembly
    Das ist neu .NET 7.0
    Patrick Jahr
    @jahr_patrick
    Developer Consultant

    View Slide

  2. 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

    View Slide

  3. Blazor WebAssembly
    Das ist neu in .NET 7.0
    Was ist mit Blazor Server?

    View Slide

  4. „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?

    View Slide

  5. 5
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    Alle .NET 7 Features im Überblick

    View Slide

  6. 6
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    Alle .NET 7 Features im Überblick

    View Slide

  7. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0

    View Slide

  8. Blazor WebAssembly
    Das ist neu in .NET 7.0
    EXPERIMENTAL: QuickGrid

    View Slide

  9. - 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

    View Slide

  10. Blazor WebAssembly
    Das ist neu in .NET 7.0
    EXPERIMENTAL: QuickGrid

    View Slide

  11. Blazor WebAssembly
    Das ist neu in .NET 7.0
    DEMO

    View Slide

  12. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0

    View Slide

  13. Getter/Setter
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    Model binding updates

    View Slide

  14. Two-Way-Binding after Event
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    Model binding updates

    View Slide

  15. Blazor WebAssembly
    Das ist neu in .NET 7.0
    DEMO

    View Slide

  16. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0

    View Slide

  17. Blazor WebAssembly
    Das ist neu in .NET 7.0
    Navigation Updates

    View Slide

  18. - NavigationLock
    - Block external navigations
    - Add check if navigation is ok
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    Navigation Updates

    View Slide

  19. Blazor WebAssembly
    Das ist neu in .NET 7.0
    DEMO

    View Slide

  20. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0

    View Slide

  21. - 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

    View Slide

  22. Blazor WebAssembly
    Das ist neu in .NET 7.0
    DEMO

    View Slide

  23. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0

    View Slide

  24. - 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

    View Slide

  25. Blazor WebAssembly
    Das ist neu in .NET 7.0
    DEMO

    View Slide

  26. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    P

    View Slide

  27. Blazor WebAssembly
    Das ist neu in .NET 7.0
    Vorher Nachher

    View Slide

  28. QuickGrid
    Modelbinding
    Updates
    Improved
    Navigation
    JS Interop
    Attributes
    Custom
    Elements
    Pure
    Templates
    Resumé
    Blazor WebAssembly
    Das ist neu in .NET 7.0
    P

    View Slide

  29. 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é

    View Slide

  30. Vielen Dank
    für Ihre Aufmerksamkeit!
    Patrick Jahr
    @jahr_patrick
    [email protected]

    View Slide