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

ASP.NET Core Blazor: Moderne Businessanwendungen mit C# & WebAssembly - Full-Stack- und Cross-Plattform

ASP.NET Core Blazor: Moderne Businessanwendungen mit C# & WebAssembly - Full-Stack- und Cross-Plattform

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-webnativen Programmiersprachen und Frameworks nutzen, um Cross-Plattform-Lösungen für den Browser zu realisieren. In diesem Workshop widmet sich Christian Weyer dem clientseitigen Blazor Framework des ASP.NET-Core-Teams. Sehen Sie, wie man mit Blazor, C# und .NET webbasierte Single Page Applications (SPAs) baut und wie man mit einer passenden Anwendungsarchitektur über API und Push Services eine Full-Stack-Lösung mit C# implementiert. Auch weiterführende Konzepte wie Interoperabilität mit der Browserplattform und Umsetzung von Progressive Web Apps (PWAs) werden thematisiert. Als Abrundung des Workshops soll auch ein Blick auf und ein Vergleich mit Server-side Blazor nicht fehlen, um einschätzen zu können, wann man was einsetzt – und wann nicht.

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer
PRO

February 15, 2021
Tweet

Transcript

  1. Workshop ASP.NET Core Blazor Moderne Businessanwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Christian Weyer https://thinktecture.com/christian-weyer @christianweyer CTO, Co-Founder - Thinktecture AG
  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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Christian Weyer
  3. 3 § No longer Windows-only § Web-enabled § Deployment §

    Updates § Native-like features § Still: Smart Client (SPA) § Path to Software-as-a-Service (SaaS) § APIs are king § Possibilities for specialized microservices § SaaS is the big transformation ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Modern Business Applications
  4. 4 § 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# & .NET everywhere? § In the Frontend: Can Blazor help here? ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform OK - What is the Problem? 🤔
  5. 5 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as

    Blazor is Web-all-the-way) § JavaScript killer ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor NOT? X
  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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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)
  7. Architecture Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und

    Cross-Plattform ASP.NET Core Blazor 7
  8. Architecture Online Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 8
  9. 9 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Bird’s-Eye-View: Typical Target Architectures HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API
  10. Architecture Offline Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 10
  11. Demo A typical Business Application Online-only Moderne Business-Anwendungen mit C#

    & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 11
  12. 12 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Journey Today Architecture + The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET with .NET Backends Interop & Integration Comparison Data Binding & Forms Current State & Future
  13. 13 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future PWA Web Components Web Assembly
  14. ”The web has won.” Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 14
  15. 15 § Web applications should… § Feel & behave more

    like a native app § Be installable, without (classic) app stores § Be able to work completely offline, without any server connections § Receive push notifications, without running § PWAs are targeted at both, mobile and desktop § Progressive Web Apps are not a technology § Collection of characteristics an application must/should support ➔ “Uber Pattern” § Various technologies are available to progressively enhance an application § Some outstanding standards like Web App Manifest, Service Workers § Web Capabilities wants to close gap between native and web ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Progressive Web Apps (PWA) – the Web gets more native
  16. 16 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform
  17. ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS Browser sandbox Web App HTML/JS Cache storage fetch Service Worker 17
  18. ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Web Components § Reuse existing functionality as components § Safe your investments § Bring semantics into UI § Web Components are not a standard, but a collection of technologies § Custom Elements § HTML templates § Shadow DOM § Web Components bring a native component model to the web instead of having to use frameworks 18
  19. 19 § Low-level bytecode for the Web – beyond asm.js

    § Bring any language into the browser § Currently targeted at C/C++ § Achieve superior performance in certain cases § Because JavaScript 😉 (but not a replacement for JavaScript!) § Stack machine-based § Not AST, or register- or SSA-based bytecode § See https://github.com/WebAssembly/design/blob/master/Rationale.md § Goals § Fast, efficient, portable ▪ Use existing sandboxing tools § Readable and debuggable ▪ Don’t break the Web ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
  20. 20 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Browser Support https://caniuse.com/#feat=wasm
  21. 21 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Web Assembly .NET Razor Components
  22. 22 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Blazor WebAssembly in the Browser Blazor DOM Web Assembly .NET Razor Components
  23. 23 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Blazor WebAssemblyTechnical 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 08.02.2021 blazor.boot.json
  24. 24 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Razor → Blazor HTML, CSS C# Pages vs. Components
  25. Pages Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 25
  26. RenderTree Generated C# Code Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 26
  27. Routing Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 27
  28. Components Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 28
  29. 29 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Class Libraries Full Stack DI .NET-isms
  30. Dependency Injection Components & Services Moderne Business-Anwendungen mit C# &

    WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 30
  31. Code-Behind Clean code Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 31
  32. Web APIs Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 32
  33. Web APIs Entity Framework Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 33
  34. Web APIs DTOs Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 34
  35. Web APIs Validation Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 35
  36. Web APIs HttpClient Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 36
  37. SignalR Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 37
  38. SignalR Clients Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 38
  39. Authentication OIDC Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 39
  40. gRPC Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 40
  41. gRPC Clients Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 41
  42. Modularization RCLs Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 42
  43. Modularization Lazy Loading Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 43
  44. SEO & Performance Prerendering Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 44
  45. Testing Unit Testing Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 45
  46. 46 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Data Binding Forms Validation
  47. Data Binding One-way and Two-way Moderne Business-Anwendungen mit C# &

    WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 47
  48. Forms Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 48
  49. Validation DataAnnotations Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 49
  50. Validation FluentValidation Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform ASP.NET Core Blazor 50
  51. 3rd Party Components Native vs. JavaScript Wrapper Moderne Business-Anwendungen mit

    C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 51
  52. 52 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future 3rd Party JS Interop PWA Web Components
  53. JavaScript Interop .NET-to-JS Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 53
  54. SPA Integration Web Components Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 54
  55. JavaScript Interop JS-to-.NET Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 55
  56. Electron Cross-Platform Desktop Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 56
  57. Capacitor Cross-Platform Mobile Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform ASP.NET Core Blazor 57
  58. Progressive Web Apps (PWA) The new Cross-Platform Moderne Business-Anwendungen mit

    C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 58
  59. UI Frameworks Commercial and Open Source Moderne Business-Anwendungen mit C#

    & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 59
  60. .NET 5 Smooth evolution Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform ASP.NET Core Blazor 60
  61. 61 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Overview of new features in .NET 5 https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0
  62. 62 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Blazor Server Established SPA Frameworks Cross-Platform
  63. 63 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform 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
  64. 64 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Blazor Server – Disconnected UX
  65. ✅ 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 Standard code is currently interpreted by special WASM-version of Mono runtime ❌ Always needs JavaScript/TypeScript, until WASM standard is being further evolved ✅ Thin Client approach 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform My Personal Comparison Blazor WebAssembly Blazor Server 65
  66. 66 Blazor WebAssembly Angular Language C# JavaScript, TypeScript Pre-Requisites No

    further pre-requisites Promotes usage of RxJS Tooling Visual Studio 2019, VS Code, VS for Mac, Rider WebStorm, VS Code et. al. Packaging Your assemblies/DLLs in the browser 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 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 Standard JS/TS (e.g. nest.js) Size Not really optimized yet; quite large 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform My Personal View Blazor ⇔ Angular
  67. 67 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Limits Missing Features Roadmap
  68. 68 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Current State & Future
  69. 69 § 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 5.0 § https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0 § bUnit § https://github.com/egil/bUnit § Mobile Blazor Bindings § https://github.com/dotnet/MobileBlazorBindings § ASP.NET Core 6 Roadmap § https://github.com/dotnet/aspnetcore/issues/27883 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Resources
  70. 70 Blazor WebAssembly SPAs mit C# und .NET 5 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.
  71. 71 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 🗣 Call-to-Action ⁉
  72. 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 https://github.com/thinktecture/basta-spring-2021-blazor-workshop 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 72