Blazor: SPAs im Browser mit C# und WebAssembly

Single Page Applications (SPAs): bisher implementierte man sie vornehmlich mit JavaScript oder TypeScript, oft im Rahmen eines SPA Frameworks wie Angular oder React. Mittlerweile können nun durch den WebAssembly-Standard theoretisch beliebige Sprachen genutzt werden. Mit dem Blazor Framework auf Basis von WebAssembly hat das ASP.NET-Core-Team einen neuen Kandidaten am Start, um auch praktisch mit C# und .NET SPAs für den Browser realisieren zu können. Christian Weyer zeigt in diesem Vortrag anhand von Beispielen, wie Blazor tickt, wie man es sinnvoll einsetzen kann und wo aktuell die Grenzen liegen – je nach Anwendungsfall.

Transcript

1. Blazor SPAs im Browser mit C# und WebAssembly 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 SPAs im Browser mit C# und WebAssembly Blazor
3. 3 § 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? C# everywhere? § In the frontend: Can Blazor help here? Blazor SPAs im Browser mit C# und WebAssembly OK - What is the Problem?
4. 4 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as it is Web-all-the-way) § JavaScript killer Blazor SPAs im Browser mit C# und WebAssembly What is Blazor NOT? X
5. 5 § Blazor is a family of web technologies § Server § WebAssembly § Blazor WebAssembly is a SPA framework § Web, SPA & distributed computing knowledge § HTML, CSS knowledge § DOM knowledge § JavaScript for DOM interaction & 3rd party integration § C# & .NET Standard for client-side logic → Full-stack C# possible Blazor SPAs im Browser mit C# und WebAssembly 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)
6. 6 Blazor SPAs im Browser mit C# und WebAssembly Our Journey Today Architecture + The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET with .NET Backends Interop & Integration Comparison Data Binding & Forms Current State & Future
7. 7 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future PWA Web Components Web Assembly
8. ”The web has won.” SPAs im Browser mit C# und WebAssembly Blazor 8
9. 9 § 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” § Some outstanding standards like Web App Manifest, Service Workers § Web Capabilities wants to close gap between native and web Blazor SPAs im Browser mit C# und WebAssembly Progressive Web Apps (PWA) – the Web gets more native
10. Blazor SPAs im Browser mit C# und WebAssembly 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 10
11. 11 § 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 SPAs im Browser mit C# und WebAssembly WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
12. 12 Blazor SPAs im Browser mit C# und WebAssembly https://caniuse.com/#feat=wasm
13. 13 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Web Assembly .NET Razor Components
14. 14 Blazor SPAs im Browser mit C# und WebAssembly Blazor WebAssembly in the Browser Blazor DOM WebAssembly .NET Razor Components
15. 15 Blazor SPAs im Browser mit C# und WebAssembly Blazor WebAssemblyTechnical Architecture (Current) 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
16. 16 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Pages vs. Components HTML, CSS C#
17. 17 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Class Libraries DI Full Stack APIs, Push, Security
18. 18 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Data Binding Forms Validation
19. 19 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future 3rd Party JS Interop PWA Web Components
20. 20 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Blazor Server Established SPA Frameworks
21. 21 Blazor SPAs im Browser 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
22. 22 Blazor SPAs im Browser mit C# und WebAssembly Blazor Server – Disconnected UX
23. ✅ 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 ✅ 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 SPAs im Browser mit C# und WebAssembly My Personal Comparison (changes pending…) Blazor WebAssembly ⇔ Blazor Server 23
24. 24 Blazor WebAssembly 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 Runtime performance No experience, no real numbers; .NET is interpreted; interop WASM and JS worlds Continuously improved over years; may have pitfalls Blazor SPAs im Browser mit C# und WebAssembly My Personal View (changes pending…) Blazor ⇔ Angular
25. 25 Blazor SPAs im Browser mit C# und WebAssembly Our Blazor Journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Limits Missing Features Roadmap
26. 26 § 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 SPAs im Browser mit C# und WebAssembly Current State & Future
27. 27 § 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 § Architecture § Codebase § Team skills § 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 SPAs im Browser mit C# und WebAssembly Call-to-Action
28. 28 Blazor SPAs im Browser mit C# und WebAssembly Blazor Recap Blazor WebAssembly enables SPAs based on C# and .NET Standard. You need to know the Web, SPA architectures, Security et. al. – and JavaScript! Blazor is young & immature – technical architecture, app size, missing features. The ecosystem is immature – may 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. Stateful server-side execution models are error-prone, single-point- of-failure, not scalable. And it locks you in. ❗
29. 29 Blazor SPAs im Browser mit C# und WebAssembly Blazor WebAssembly Whitepaper (deutsch) https://www.thinktecture.com/de/blazor-whitepaper
30. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter 30
31. 31 § 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 SPAs im Browser mit C# und WebAssembly Resources