Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BLAZOR-WORKSHOP: FULL-STACK- UND CROSS-PLATFORM-ANWENDUNGEN MIT C# UND WEBASSEMBLY

BLAZOR-WORKSHOP: FULL-STACK- UND CROSS-PLATFORM-ANWENDUNGEN MIT C# UND WEBASSEMBLY

Das Web als Plattform und der Browser als Ausführungsumgebung haben vor vielen Jahren ihren Siegeszug als Basis für moderne Businessanwendungen angetreten. Mit dem WebAssembly-Standard kann ein Entwickler heute neben JavaScript und TypeScript auch andere, nicht webnative Programmiersprachen und Frameworks nutzen, um Cross-Platform-Lösungen für den Browser zu realisieren. In diesem Workshop widmen sich Patrick Jahr und Sebastian Gingter dem clientseitigen Blazor-WebAssembly-Framework des ASP.NET-Core-Teams. Erleben Sie, wie man mit Blazor, C# und .NET webbasierte Single Page Applications (SPAs) baut und wie man mit einer passenden End-to-End-Anwendungsarchitektur über APIs und Push Services eine Full-Stack-Lösung mit C# implementiert.

Patrick Jahr

October 12, 2022
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. 1
    ▪ Was SIE ERWARTET
    ▪ Full-Stack und Cross-Plattform-Anwendungen mit C# (… und auch JavaScript…)
    ▪ End-to-End-Architekturen
    ▪ Sichere .NET-6-Backends mit Web-APIs, SignalR, gRPC
    ▪ Single-Page-Applications (SPAs) mit Blazor WebAssembly
    ▪ Realistische & pragmatische Einschätzung von Blazor - Status Quo & Ausblick
    ▪ Demos
    ▪ Was Sie NICHT erwartet
    ▪ Blazor Deep Dives
    ▪ Blazor Server / Hybrid
    Workshop
    Blazor: Full-Stack- und Cross-Plattform-Anwendungen
    mit C# & WebAssembly
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    View full-size slide

  2. Workshop
    Blazor-Workshop:
    Full-Stack- und Cross-Plattform-Anwendungen
    mit C# & WebAssembly
    Patrick Jahr
    https://thinktecture.com/patrick-jahr
    @jahr_patrick
    Developer Consultant
    Marco Frodl
    https://thinktecture.com/marco-frodl
    @marcofrodl
    Consultant

    View full-size slide

  3. Special Day
    Blazor
    Thema Sprecher Datum, Uhrzeit
    Blazor in .NET 7:
    Server, WebAssembly und Hybrid –
    ein Wegweiser
    Patrick Jahr DI, 11. Oktober 2022,
    10.45 bis 11.45
    Blazor WebAssembly:
    Performanceoptimierungen fürs UI
    Patrick Jahr DI, 11. Oktober 2022,
    12.15 bis 13.15
    Blazor Hybrid: Wie sich Blazor in
    WPF, Windows Forms und MAUI integriert
    Dr. Holger Schwichtenberg DI, 11. Oktober 2022,
    15.30 bis 16.30
    gRPC und Blazor WebAssembly:
    Ein Traumpaar?
    Christian Weyer DI, 11. Oktober 2022,
    17.00 bis 18.00
    Praxisnahes State Management in Blazor
    WebAssembly – Was sind denn das für
    Zustände?
    Sebastian Gingter DI, 11. Oktober 2022,
    19.00 bis 20.00

    View full-size slide

  4. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Patrick Jahr
    Developer Consultant @ Thinktecture AG
    @jahr_patrick
    Marco Frodl
    Consultant @ Thinktecture AG
    @marcofrodl

    View full-size slide

  5. 5
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Four Blocks
    Intro
    Story
    … What is Blazor WebAssembly
    Technology
    Architecture
    Code
    Technology
    Architecture
    Code
    Technology
    Architecture
    Code
    Final Q&A
    09.00 – 10.30 11.00 – 12.30
    13.30 – 15.00 15.30 – 17.00

    View full-size slide

  6. 6
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Journey Today
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with
    .NET Backends
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future

    View full-size slide

  7. 7
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future

    View full-size slide

  8. And why should we care?
    Blazor WebAssembly is a Single Page Application
    framework for building interactive client-side web apps
    with .NET.
    It uses open web standards without plugins or
    recompiling code into other languages and works in all
    modern web browsers, including mobile browsers.
    Running .NET code inside web browsers is made possible
    by WebAssembly (WASM).
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor WebAssembly?

    View full-size slide

  9. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    The modern Web Stack



    View full-size slide

  10. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Querverweis
    PROJECT FUGU 2022: DAS SIND DIE
    NEUEN PWA-SCHNITTSTELLEN
    Christian Liebel
    Mittwoch, 12.10. 16:45-17:45
    Meetingsaal 3A
    Blazor Workshop:
    Full-Stack- und Cross-Plattform-
    Anwendungen mit C# und
    WebAssembly
    Patrick Jahr und Marco Frodl

    View full-size slide

  11. And why should we care?
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor WebAssembly?
    Blazor WebAssembly is a Single Page Application
    framework for building interactive client-side web apps
    with .NET.
    It uses open web standards without plugins or
    recompiling code into other languages and works in all
    modern web browsers, including mobile browsers.
    Running .NET code inside web browsers is made possible
    by WebAssembly (WASM).

    View full-size slide

  12. Blazor in .NET 7
    Server, WebAssembly & Hybrid - Ein Wegweiser
    Browser Server
    SPA (Angular, React, Vue, …)
    HTML
    CSS
    JS
    Request
    Response
    Static Files
    & Code
    API (Code)
    JS-Runtime
    Request
    Response
    State

    View full-size slide

  13. And why should we care?
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor WebAssembly?
    Blazor WebAssembly is a Single Page Application
    framework for building interactive client-side web apps
    with .NET.
    It uses open web standards without plugins or
    recompiling code into other languages and works in all
    modern web browsers, including mobile browsers.
    Running .NET code inside web browsers is made possible
    by WebAssembly (WASM).

    View full-size slide

  14. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    My daily web app tool belt

    View full-size slide

  15. • No Hardware and Maintenance
    • Cross-Platform
    • Flexible Payments and Scalability
    • Automatic Updates
    • White Labeling and Customization
    • Ability to Switch Between Providers
    • App/API Integration
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    My daily web app tool belt – completely cloud-based

    View full-size slide

  16. ”The Web has won.”
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop
    16
    Christian Weyer
    CTO Thinktecture AG

    View full-size slide

  17. • As of 2022, the SaaS space is worth over $170 billion.
    • Gartner Forecasts SaaS Spending to Reach Nearly $208 billion in 2023.
    • The SaaS industry has increased in size by around 500% over the past seven years.
    • SaaS is thought to be the most important tech in business success.
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    SaaS is important for every digital business
    https://www.gartner.com/en/newsroom/press-releases/2021-08-02-gartner-says-four-trends-are-shaping-the-future-of-public-cloud
    https://www.gartner.com/en/newsroom/press-releases/2022-04-19-gartner-forecasts-worldwide-public-cloud-end-user-spending-to-reach-nearly-500-billion-in-2022
    https://explodingtopics.com/blog/saas-statistics

    View full-size slide

  18. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Querverweis
    CLOUD-NATIVE: DEFINITION,
    PRAKTIKEN & PATTERNS
    Thorsten Hans & Christian Weyer
    Donnerstag, 13.10. 09:00-10:00
    Watfordsaal
    Blazor Workshop:
    Full-Stack- und Cross-Plattform-
    Anwendungen mit C# und
    WebAssembly
    Patrick Jahr und Marco Frodl

    View full-size slide

  19. And why should we care?
    Blazor WebAssembly is a Single Page Application
    framework for building interactive client-side web apps
    with .NET.
    It uses open web standards without plugins or
    recompiling code into other languages and works in all
    modern web browsers, including mobile browsers.
    Running .NET code inside web browsers is made possible
    by WebAssembly (WASM).
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor WebAssembly?

    View full-size slide

  20. The Blazor view on WA
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Why do we need WebAssembly?
    WebAssembly is a compact bytecode format optimized
    for fast download and maximum execution speed. It’s
    supported in web browsers without plugins.
    WebAssembly code can access the full functionality of the
    browser via JavaScript, called JavaScript interoperability
    (JS interop).
    .NET code executed via WASM in the browser runs in the
    browser's JavaScript sandbox.

    View full-size slide

  21. WASM everywhere
    • Web/App
    • Game
    • AI
    • Blockchain
    • Runtime
    • Cloud
    • Data Analytics
    • IoT
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    WebAssembly can do more

    View full-size slide

  22. The Blazor view on WA
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    WebAssembly - Example 1 of 3
    https://web.dev/ps-on-the-web/
    WebAssembly and its C++
    toolchain Emscripten have been
    the key to unlocking Photoshop's
    ability to come to the web, as it
    meant that Adobe would not
    have to start from scratch, but
    could leverage their existing
    Photoshop codebase.

    View full-size slide

  23. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    WebAssembly - Example 2 of 3
    https://www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8-000-device-types
    The switch to Rust and Wasm
    has improved the applications
    frame rate stability and speed.
    By moving to Wasm, we have
    saved a total of 30 megabytes of
    JavaScript heap memory.
    After a year and 37,000 lines of
    Rust code, we have significantly
    improved performance, stability,
    and CPU consumption and
    reduced memory utilization.

    View full-size slide

  24. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    WebAssembly - Example 3 of 3
    https://cosmonic.com/blog/kubecon-eu-2021-webassembly-keynote-cloud-native-and-wasm-better-together/

    View full-size slide

  25. 25
    ▪ Users want:
    ▪ Cross-Platform, Cross-Device
    ▪ SaaS
    ▪ Offline capability (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?
    ▪ WebAssembly could be a game changer in the future
    ▪ Which technologies to choose?
    ▪ JavaScript, everywhere? C# & .NET everywhere?
    ▪ In the Frontend: Can Blazor help here?
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    OK - What is the Problem? 🤔

    View full-size slide

  26. And why should we care?
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor WebAssembly?
    Blazor WebAssembly is a Single Page Application
    framework for building interactive client-side web apps
    with .NET.
    It uses open web standards without plugins or
    recompiling code into other languages and works in all
    modern web browsers, including mobile browsers.
    Running .NET code inside web browsers is made possible
    by WebAssembly (WASM).

    View full-size slide

  27. 27
    When a Blazor WebAssembly app is built and run in a
    browser:
    • C# code & Razor files are compiled into .NET assemblies.
    • Assemblies & .NET runtime are downloaded to the
    browser.
    • Blazor WebAssembly bootstraps the .NET runtime and
    configures the runtime to load the assemblies for the
    app.
    • The Blazor WebAssembly runtime uses JavaScript interop
    to handle DOM manipulation and browser API calls.
    • Unused code is stripped out of the app when it's
    published by the Intermediate Language (IL) Trimmer.
    • HTTP responses are compressed.
    • .NET runtime & assemblies are cached in the browser.
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor?

    View full-size slide

  28. 28
    ▪ Automatic-Windows-to-Web-conversion-wonder-machine ™
    ▪ Next incarnation of Silverlight (as Blazor is Web-all-the-way)
    ▪ JavaScript Killer
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor NOT?

    View full-size slide

  29. 29
    • ASP.NET Core Infrastruktur (DI, Config, Hosting, Logging...)
    • ASP.NET Core MVC (Razor Pages)
    • Business logic with .NET
    • EF Core
    • HTML & CSS
    • UI-Framework of choice (Bootstrap, Material, Foundation, ...)
    • JavaScript (for Interop)
    • „Situational Awareness“
    (Browser, SignalR, Server Side Rendering, Components, Scope)
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    How to Blazor: Mix proven and new Know-How

    View full-size slide

  30. Blazor und seine verschiedenen
    “Geschmacksrichtungen”
    Blazor in .NET 7
    Server, WebAssembly & Hybrid - Ein Wegweiser

    View full-size slide

  31. 35
    ▪ Blazor is a family of web technologies
    ▪ Server
    ▪ WebAssembly
    ▪ Hybrid / MAUI
    ▪ 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 Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    What is Blazor?
    Mono-based Runtime .NET CLR
    .NET 6 .NET Framework
    Blazor
    WebAssembly
    Blazor Server
    Razor Components
    Browser (WASM / .NET / JS) Browser
    (JS Stub)
    Server (.NET)
    Blazor MAUI
    Blazor WebView
    (JS Stub)
    App (.NET)

    View full-size slide

  32. Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Querverweis
    Blazor in .NET 7: Server,
    WebAssembly und Hybrid – ein
    Wegweiser
    Patrick Jahr
    Dienstag, 11.10. 10:45-11:45
    Watfordsaal
    Blazor Workshop:
    Full-Stack- und Cross-Plattform-
    Anwendungen mit C# und
    WebAssembly
    Patrick Jahr und Marco Frodl

    View full-size slide

  33. 37
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future

    View full-size slide

  34. 38
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor WebAssembly Technical Architecture in .NET 6.0 – non-AOT
    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 17.02.2022
    blazor.boot.json

    View full-size slide

  35. 39
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    Razor → Blazor
    HTML, CSS
    C#
    Pages vs. Components

    View full-size slide

  36. Components
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  37. RenderTree
    Generated C# Code
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  38. Pages
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  39. Routing
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  40. 44
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    Class Libraries
    Full Stack
    DI
    .NET-isms

    View full-size slide

  41. Dependency Injection
    Components & Services
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  42. Code-Behind
    Clean code
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  43. Web APIs
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  44. Web APIs
    Entity Framework
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  45. Web APIs
    DTOs
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  46. Web APIs
    Validation
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  47. Web APIs
    HttpClient
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  48. SignalR
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  49. SignalR
    Clients
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  50. Authentication
    OIDC
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  51. gRPC
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  52. gRPC
    Clients
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  53. SEO & Performance
    Prerendering
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  54. 61
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    Data Binding
    Forms
    Validation

    View full-size slide

  55. Data Binding
    One-way and Two-way
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  56. Forms
    Fundamentals
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  57. Validation
    DataAnnotations
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  58. Validation
    FluentValidation
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  59. 3rd Party Components
    Native vs. JavaScript Wrapper
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  60. 67
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    3rd Party
    JS Interop
    PWA
    Web Components

    View full-size slide

  61. JavaScript Interop
    .NET-to-JS
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  62. JavaScript Interop
    JS-to-.NET
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  63. MAUI
    Cross-Platform Mobile & Desktop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  64. Progressive Web Apps
    (PWA)
    The new Cross-Platform
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  65. UI Frameworks
    Commercial and Open Source
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  66. 76
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    Blazor Server
    Established SPA Frameworks
    Cross-Platform

    View full-size slide

  67. 77
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Server
    Blazor JS Stub
    DOM
    .NET
    Razor Components
    ASP.NET Core (Server)
    SignalR-based
    binary
    data exchange
    State, Connections etc.
    Browser (Client)
    UI Diffs
    Events

    View full-size slide

  68. 78
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Server – Disconnected UX

    View full-size slide

  69. ✅ Full SPA architecture approach
    ✅ No latency, code runs locally in the browser
    ✅ Full support for offline scenarios
    ✅ Deployment: static files on web server or
    cloud storage; Desktop or mobile app packaging
    ✴️ Initial download size may be large
    (assets cached in browser, via Service Worker)
    ❌ .NET IL code is currently interpreted by special WASM-
    version of Mono runtime
    ❌ Always needs JavaScript/TypeScript, until WASM
    standard is being further evolved
    ✅ Thin Client aproach for light devices
    ✅ Full .NET runtime on the server, not just .NET Standard
    ✅ No need for API-based architecture
    ✴️ All your code is on the server
    ❌ Inherently stateful execution model
    ❌ Need for permanent physical connections
    ❌ No viable option to implement offline features
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Thinktecture Comparison
    Blazor WebAssembly Blazor Server

    View full-size slide

  70. 80
    Blazor WebAssembly Angular
    Language C# TypeScript, JavaScript
    Framework Opinion .NET & ASP.NET Core (like Razor) Promotes usage of RxJS
    Tooling Visual Studio 2022, (VS Code, VS for Mac, Rider) WebStorm, VS Code et. al.
    Packaging Your assemblies/DLLs in the browser (+Runtime) Optimized JS via webpack
    Maturity Brand new, even Preview; no predecessor Very mature; lots of experience from previous versions
    Community Just starts to build up Very large
    Ecosystem OSS will build up;
    Various commercial vendors expected & available
    Lots of OSS; Also commercial vendors
    Integration 3rd party For every JS/TS library we need a proxy/shim npm universe: pick and choose; easy to integrate
    Dependencies WASM support in browsers -
    Full Stack with single tech C#, .NET (6+) JS/TS (e.g. nest.js)
    Size Not really optimized yet; quite large (WASM > IL) Continuously improved over years
    Runtime performance No experience, no real numbers; .NET is interpreted; interop WASM
    and JS worlds
    Continuously improved over years; may have pitfalls
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Thinktecture View
    Blazor ⇔ Angular

    View full-size slide

  71. 81
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Our Blazor Journey
    What is Blazor Web
    Assembly?
    Blazor WebAssembly
    Architecture
    Components
    all over
    SPAs with .NET
    Interop &
    Integration
    Comparison
    Data Binding & Forms Current State & Future
    Limits
    Missing Features
    Roadmap

    View full-size slide

  72. .NET 7
    Outlook
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Blazor Workshop

    View full-size slide

  73. 83
    ▪ Blazor WebAssembly (WASM) is a browser SPA framework
    ▪ For C# and .NET developers
    ▪ .NET code runs assemblies interpreted on a CLR compiled to WASM
    ▪ AOT-ed code will mostly run as native WASM
    ▪ Blazor WASM is still young
    ▪ Release end of April 2020
    ▪ Lots of space for improvement
    ▪ Blazor WASM in .NET 6.0 establishes a reasonable baseline
    ▪ More to come in NET 7.0+
    https://github.com/dotnet/aspnetcore/issues/39504
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Current State & Future

    View full-size slide

  74. 84
    ▪ Fallacies of Distributed Computing
    ▪ https://de.wikipedia.org/wiki/Fallacies_of_Distributed_Computing
    ▪ What Web can do today?
    ▪ https://whatwebcando.today/
    ▪ Blazor Knowledge Hub
    ▪ https://www.thinktecture.com/de/asp-dotnet-core-blazor/
    ▪ FluentValidation
    ▪ https://fluentvalidation.net/
    ▪ Blazor in .NET 6.0
    ▪ https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore-6.0
    ▪ bUnit
    ▪ https://github.com/egil/bUnit
    ▪ Mobile Blazor Bindings
    ▪ https://github.com/dotnet/MobileBlazorBindings
    ▪ ASP.NET Core 7 Roadmap
    ▪ https://github.com/dotnet/aspnetcore/issues/39504
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    Resources

    View full-size slide

  75. 85
    Blazor Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und 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
    real Web architecture, no
    boundaries.
    Stateful server-side with dumb
    client UI.

    View full-size slide

  76. 86
    ▪ 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 Workshop
    Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
    🗣 Call-to-Action

    View full-size slide

  77. https://www.thinktecture.com/ueber-uns/karriere/
    Dankeschön!
    Demos aus der Workshop:
    https://github.com/thinktecture/basta-fall-2022-
    blazor-workshop
    https://github.com/thinktecture/blazor-
    webassembly-demo
    Marco Frodl
    https://thinktecture.com/marco-frodl
    Patrick Jahr
    https://thinktecture.com/patrick-jahr

    View full-size slide