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

Blazor in .NET 5: Single-Page-Applications mit C# & WebAssembly

Blazor in .NET 5: Single-Page-Applications mit C# & WebAssembly

Single-Page-Applications (SPAs): bisher implementierte man sie vornehmlich mit JavaScript oder TypeScript, oft im Rahmen eines SPA Frameworks wie Angular oder React. Mittlerweile können nun durch den WebAssembly-Standard theoretisch beliebige Sprachen genutzt werden. Mit dem Blazor-Framework auf Basis von WebAssembly hat das ASP.NET-Core-Team einen neuen Kandidaten am Start, um auch mit C# und .NET-SPAs für den Browser realisieren zu können. Christian Weyer zeigt in diesem Vortrag in gewohnt praktischer Manier anhand von vielen Beispielen wie Blazor in .NET 5 tickt, wie man es sinnvoll einsetzen kann und wo aktuell die Grenzen liegen – je nach Anwendungsfall.

Christian Weyer
PRO

February 16, 2021
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. Blazor in .NET 5
    Single-Page-Applications mit C# &
    WebAssembly
    Christian Weyer
    https://thinktecture.com/christian-weyer
    @christianweyer
    CTO @ Thinktecture AG

    View Slide

  2. 2
    § Co-Founder & CTO at Thinktecture AG
    § Personal focus on
    § Mobile & web-based application architectures
    § Interoperability, cross-device
    § Pragmatic end-to-end solutions
    § Cloud-native & serverless architectures
    § Independent Microsoft Regional Director
    § Microsoft MVP for Developer Technologies & Azure
    ASPInsider, AzureInsider
    § Google GDE for Web Technologies, Angular
    [email protected] @christianweyer https://www.thinktecture.com
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Christian Weyer

    View Slide

  3. 3
    § Users want:
    § Cross-Platform, Cross-Device
    § No installations
    § Offline (important for many use cases)
    § Developers think:
    § Web is the solution, but web is different
    § SPA is the solution, but SPA is different
    § JavaScript seems to be an issue for some .NET developers
    § There is existing .NET code, what to do about it?
    § Which technologies to choose?
    § JavaScript everywhere?
    § C# everywhere?
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    OK - what is the problem?
    In the frontend: Can Blazor help here?

    View Slide

  4. 4
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Blazor WebAssembly: how does it feel…?

    View Slide

  5. 5
    § Automatic-Windows-to-Web-conversion-wonder-machine ™
    § Next incarnation of Silverlight (as Blazor is Web-all-the-way)
    § JavaScript killer
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    What is Blazor NOT?
    X

    View Slide

  6. 6
    § Blazor is a family of web technologies
    § Server
    § WebAssembly
    § Blazor WebAssembly is a
    SPA framework
    § Web, SPA & distributed computing
    knowledge
    § HTML, CSS knowledge
    § DOM knowledge
    § JavaScript for DOM interaction &
    3rd party integration
    § C# & .NET Standard for client-side
    logic → Full-stack C# possible
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    What is Blazor?
    Mono-based Runtime .NET CLR
    .NET 5 /
    .NET Standard 2.1
    .NET Framework
    Blazor WebAssembly Blazor Server
    Razor Components
    Browser (WASM / .NET / JS) Browser
    (JS Stub)
    Server (.NET)

    View Slide

  7. 7
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Current State &
    Future
    Data Binding &
    Forms
    WebAssembly
    .NET
    Razor Components

    View Slide

  8. 8
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Blazor WebAssembly in the browser
    Blazor
    DOM
    WebAssembly
    .NET
    Razor Components

    View Slide

  9. 9
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Browser support
    https://caniuse.com/#feat=wasm

    View Slide

  10. 10
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Blazor WebAssembly technical architecture
    Compiler
    Parser
    JIT
    (.NET Assemblies are interpreted)
    Web APIs
    (DOM,
    IndexedDb,
    File Storage
    etc.)
    Browser
    blazor.
    webassembly.js
    Blazor SPA page (.html)
    JS Runtime
    dotnet.wasm
    dotnet.js
    mscorlib.dll
    etc.
    myapp.dll
    * As of 15.02.2021
    blazor.boot.json

    View Slide

  11. 11
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Current State &
    Future
    Data Binding &
    Forms
    Pages vs. Components
    HTML, CSS
    C#
    ✔ ✔

    View Slide

  12. 12
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Current State &
    Future
    Data Binding &
    Forms
    DI
    Class Libraries
    Full Stack
    (APIs, Push, Security)
    ✔ ✔ ✔

    View Slide

  13. 13
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Current State &
    Future
    Data Binding &
    Forms
    Data Passing
    Forms
    Validation
    ✔ ✔ ✔ ✔

    View Slide

  14. 14
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Current State &
    Future
    Data Binding &
    Forms JS Interop
    PWA
    ✔ ✔ ✔ ✔

    View Slide

  15. 15
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Our Blazor journey
    The Web as a
    Platform
    Blazor WebAssembly
    Idea & Approach
    Components
    all over SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding &
    Forms
    Current State &
    Future
    Status Quo
    Roadmap
    ✔ ✔ ✔ ✔
    ✔ ✔

    View Slide

  16. 16
    Performance improvements Debugging improvements
    CSS isolation Microsoft Identity v2.0 and MSAL v2.0
    New InputFile component WASM prerendering
    New InputRadio and InputRadioGroup components Trimming/linking improvements
    Component virtualization Browser compatibility analyzer
    ontoggle event support Lazy load assemblies
    Set UI focus in Blazor apps Updated globalization support
    Custom validation class attributes Form components support display name
    IAsyncDisposable support Catch-all route parameters
    JavaScript isolation and object references
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Summary of new features in .NET 5
    https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0#blazor

    View Slide

  17. 17
    § Blazor WebAssembly is in “v1.1” as of .NET 5
    § WASM is an MVP (and SPAs are not a target of it)
    § Mono/.NET 5 WASM runtime is immature
    § Blazor is under ongoing evolvement
    § It will turn 1 year in May 2021
    § Missing features, e.g.
    § Real lazy loading
    § AOT builds
    § Better developer tooling (e.g. improved debugger, live/hot reload)
    § Roadmap
    § Blazor WASM will further improve with .NET 6 (November 2021)
    § https://github.com/dotnet/aspnetcore/issues/27883
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Current state & future

    View Slide

  18. 18
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    Blazor recap
    Blazor WebAssembly
    enables SPAs based on
    C# and .NET Standard.
    You need to know Web,
    SPA architectures,
    Security et. al. –
    and JavaScript!
    Blazor is young &
    immature –
    technical architecture,
    app size, missing features.
    The ecosystem is
    immature –
    will evolve similar to JS
    SPA frameworks, plus
    commercial vendors.
    The modern web with
    PWA &
    Web Components can
    also work and live with
    Blazor WebAssembly.
    Beware of Blazor Server.
    No Web architecture, no
    boundaries.
    Stateful server-side with
    dumb client UI.

    View Slide

  19. 19
    § Microsoft is building a new UI framework for the browser – so…
    § … ask yourself
    § “How do we deal with Blazor?”
    § “Why would we pick Blazor WebAssembly over an established JS SPA framework?”
    § “Why would we choose a JS SPA framework, and not Blazor WebAssembly?”
    § … you need to check your
    § Team skills
    § Architecture
    § Codebase
    § Try it out & build Proof-of-Concepts (with experienced people)
    § Web Assembly & Blazor might change the game –
    but it may not be a game changer for you
    Blazor in .NET 5
    Single-Page-Applications mit C# & WebAssembly
    🗣 Call-to-Action ⁉

    View Slide

  20. Danke!
    Bei Fragen kontaktieren Sie mich gerne
    Christian Weyer
    https://thinktecture.com/christian-weyer
    @christianweyer
    [email protected]
    Demo-Code:
    https://github.com/thinktecture/blazor-webassembly-demo
    Blazor Knowledge Hub:
    https://www.thinktecture.com/de/asp-dotnet-core-blazor/
    Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr:
    https://www.thinktecture.com/de/newsletter
    20

    View Slide