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.

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
   christian.weyer@thinktecture.com @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
    christian.weyer@thinktecture.com
    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