Workshop - Blazor: Moderne Businessanwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform

Workshop - 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 Browser-Plattform 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

February 24, 2020
Tweet

Transcript

  1. Workshop Blazor: Moderne Businessanwendungen mit C# & WebAssembly – Full-Stack-

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

    Updates § Native-like features § Path to Software-as-a-Service (SaaS) § APIs are king § Possibilities for specialized Microservices § SaaS is the big transformation 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 may 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? .NET everywhere? § In the Frontend: Can Blazor help here? 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

    it is Web-all-the-way) 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 client-side UI logic & manipulation § C# & .NET Standard for client-side logic Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor? Mono Runtime .NET CLR .NET Core / .NET Standard 2.1 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)
  7. 7 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
  8. Architecture Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und

    Cross-Plattform Blazor
  9. Architecture Online Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor
  10. Architecture Offline Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

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

    & WebAssembly – Full-Stack- und Cross-Plattform Blazor
  12. 12 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
  13. ”The web has won.” Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Blazor
  14. 14 § 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 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Progressive Web Apps (PWA) – the Web gets more native
  15. 15 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform
  16. 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. 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. 18 § 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 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
  19. 19 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform https://caniuse.com/#feat=wasm
  20. 20 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
  21. 21 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

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

    und Cross-Plattform Blazor Current 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 24.02.2020
  23. 23 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
  24. Pages Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

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

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

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

    und Cross-Plattform Blazor
  28. 28 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
  29. Dependency Injection Components & Services Moderne Business-Anwendungen mit C# &

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

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

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

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

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

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

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

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

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

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

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

    und Cross-Plattform Blazor
  41. 41 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
  42. Data Binding One-way and Two-way Moderne Business-Anwendungen mit C# &

    WebAssembly – Full-Stack- und Cross-Plattform Blazor
  43. Forms Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor
  44. Validation DataAnnotations Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor
  45. Validation FluentValidation Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor
  46. 3rd Party Components Native vs. JavaScript Wrapper Moderne Business-Anwendungen mit

    C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor
  47. 47 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
  48. JavaScript Interop .NET-to-JS Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Blazor
  49. SPA Integration Web Components Moderne Business-Anwendungen mit C# & WebAssembly

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

    Full-Stack- und Cross-Plattform Blazor
  51. Electron Cross-Platform Desktop Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Blazor
  52. WebWindow Cross-Platform Desktop Experiment Moderne Business-Anwendungen mit C# & WebAssembly

    – Full-Stack- und Cross-Plattform Blazor
  53. Cordova Cross-Platform Mobile Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Blazor
  54. Capacitor Cross-Platform Mobile Moderne Business-Anwendungen mit C# & WebAssembly –

    Full-Stack- und Cross-Plattform Blazor
  55. Progressive Web Apps (PWA) The new Cross-Platform Moderne Business-Anwendungen mit

    C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor
  56. UI Frameworks Commercial and Open Source Moderne Business-Anwendungen mit C#

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

    und Cross-Plattform Blazor Server Blazor Stub DOM .NET Razor Components ASP.NET Core SignalR-based data exchange
  59. 59 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor Server – Disconnected UX
  60. ✅ Full SPA architecture approach ✅ No latency, code runs

    locally in the browser ✅ Full support for offline scenarios ✅ Easy deployment: static files on web server or cloud storage; Desktop or mobile app packaging ✴ Initial download size may be large (assets can be cached in browser, e.g. 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 (takes years) ✅ Thin Client for light devices ✅ Full .NET runtime on the server, not just .NET Standard ✴ All your code is on the server ❌ Inherently stateful thinking & execution model ❌ Need for permanent physical connections (custom protocol via SignalR) between clients and server, eating resources ❌ Clients and server need to be physically very close to get low latencies ❌ No viable option to implement offline features Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Comparison: Blazor Web Assembly ⇔ Blazor Server
  61. 61 Blazor Web Assembly Angular Language C# JS, TS Complexity

    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 C#, .NET Standard JS/TS (e.g. nest.js) Size Not really optimized yet; quite large Continuously improved over years Performance No experience, no real numbers; .NET is interpreted; permanent marshaling/unmarshaling between WASM and JS worlds Continuously improved over years; may have pitfalls Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform A SPA Developer’s View - Today: Blazor ⇔ Angular (changes pending…)
  62. 62 § Various ways and technologies to go cross-platform with

    (more) native integration § PWA § Works fine, but need for JavaScript § Electron § Currently* not working § WebWindow § Very early thinking and Alpha stage § Cordova (or Capacitor) § Currently* not working § Blazor mobile bindings for Xamarin § Very experimental & more than one codebase Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Cross-Platform with Blazor WebAssembly * As of 24.02.2020
  63. Azure Deployment From Blob Storage to Full-blown Moderne Business-Anwendungen mit

    C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor
  64. 64 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
  65. 65 § Blazor WebAssembly is in Preview! § WASM is

    an MVP (and SPAs are not part of it) § Mono WASM runtime is immature § Blazor is under development § Missing Features, e.g. § Modules, Lazy Loading § Component Model with CSS Encapsulation § AOT Builds § Live Reload § Better Developer Tooling (e.g. improved Debugger, Live Reload) § Roadmap § Blazor WASM 1.0: May 2020 § Improved & enhanced Blazor WASM in .NET 5 timeframe Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Current State & Future
  66. 66 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Blazor Recap Blazor WebAssembly enables SPAs based on C# and .NET Standard You need to know the Web, SPA architectures, Security – and JavaScript! Blazor is young & immature – technical architecture, app size, missing features The ecosystem is very immature – and will evolve similar to JS SPA frameworks The modern web with PWA & Web Components can also work and live with Blazor WebAssembly Beware of Blazor Server. Stateful server-side execution models are error-prone, single- point-of-failure, not scalable etc. And it locks you in. ❗
  67. 67 § Microsoft is building a new UI framework for

    the browser – so… § ❓… ask yourself § “How do we deal with Blazor WebAssembly?” § “Why would we pick Blazor WebAssembly over an established SPA framework?” § “Why would we choose a SPA framework, and not Blazor WebAssembly?” § ❗… you need to check your § Plans for existing & new projects § Team skills § Architecture § Codebase § Web Assembly & Blazor might change the game – but it may not be a game changer for you Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Call-to-Action
  68. 68 Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack-

    und Cross-Plattform Vorankündigung: Blazor WebAssembly Whitepaper auf deutsch https://www.thinktecture.com/de/blazor-whitepaper
  69. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer

    @christianweyer christian.weyer@thinktecture.com https://thinktecture.com/de/newsletter
  70. 70 § Running Your ASP.NET Core Blazor WebAssembly Application As

    A Progressive Web App (PWA) § https://www.thinktecture.com/de/blazor/progressive-web-apps-pwa/ § Re-Using Angular Components In A Blazor WebAssembly Application Using Angular Elements - Web Components Custom Elements, FTW! § https://www.thinktecture.com/de/blazor/integration-angular-elements-web-components/ § Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § Cordova § https://cordova.apache.org/ § Capacitor § https://capacitor.ionicframework.com/ § Electron § https://www.electronjs.org/ § WebWindow § https://blog.stevensanderson.com/2019/11/18/2019-11-18-webwindow-a-cross-platform-webview-for-dotnet-core/ Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Resources