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
  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
  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
  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
  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
  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
  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
  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?
  9. 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
  10. 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).
  11. 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
  12. 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).
  13. • 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
  14. ”The Web has won.” Full-Stack- und Cross-Plattform-Anwendungen mit C# und

    WebAssembly Blazor Workshop 16 Christian Weyer CTO Thinktecture AG
  15. • 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
  16. 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
  17. 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?
  18. 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.
  19. 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
  20. 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.
  21. 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.
  22. 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/
  23. 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? 🤔
  24. 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).
  25. 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?
  26. 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?
  27. 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
  28. 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)
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. ✅ 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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.
  44. 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