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

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

Patrick Jahr
February 08, 2023

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

Other Decks in Programming

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