“Alles C#, oder was?" Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor

Single Page Applications (SPAs) schreibt man mit JavaScript, vielleicht auch mit TypeScript - is' so! Mit ASP.NET Core Blazor zeichnet sich eine mögliche Alternative für .NET-Entwickler ab. Auf Basis des Web-Standards Web Assembly stellt es Tooling und eine Runtime zur Verfügung, über die man SPAs mit C# entwickeln kann. In dieser Session zeigt .NET- und Web-Veteran Christian Weyer anhand praktischer Beispiele was mit Blazor bereits in einer frühen Vorab-Version möglich ist, vor allem hinsichtlich "Full Stack"-Programmierung für End-to-End Web-Anwendungen. Als Abrundung beleuchtet er neben den Möglichkeiten auch die Grenzen des Blazor-Ansatzes und vergleicht ihn mit den bislang üblichen Herangehensweisen - pragmatisch und realitätsnah.

Transcript

1. “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Christian Weyer @christianweyer CTO
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 Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor “Alles C#, oder was?”
3. 3 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook
4. Demo A typical Business Application Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor “Alles C#, oder was?” 4
5. 5 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook PWA Web Components Web Assembly
6. ”The web has won.” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor “Alles C#, oder was?” 6
7. manifest.json { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Progressive Web Apps (PWA) - Web App Manifest Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor “Alles C#, oder was?” 7
8. Browser “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor PWA - Service Worker as an Interceptor (Offline, FTW!) Service Worker Internet Web Site / Web App HTML/JS Cache fetch 8
9. 9 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook PWA Web Components Web Assembly
10. 10 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Web Assembly& .NET Mono Razor Components
11. 11 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Blazor Web Assembly in the Browser Blazor DOM Web Assembly .NET Razor Components
12. 12 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Blazor Current Technical Architecture Compiler Parser JIT (.NET assemblies are interpreted) Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor.js Blazor page (.html) JS Runtime mono.wasm mono.js mscorlib.dll etc. myapp.dll
13. 13 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Razor → Blazor HTML, CSS C# Pages vs. Components
14. 14 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Class Libraries Full Stack DI Routing
15. 15 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Data Binding Event Routing Forms Validation
16. 16 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook 3rd Party JS Interop PWA Web Components
17. 17 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Blazor Server Cross-Platform
18. 18 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Blazor Server Blazor Stub DOM .NET Razor Components ASP.NET Core SignalR-based data exchange
19. 19 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Blazor Server – Disconnected UX
20. ✅ 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 ❌ We always need 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 needs to be physically very close to get low latencies ❌ No viable option to implement offline features “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Comparison: Blazor Web Assembly ⇔ Blazor Server 20
21. 21 “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor 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 & Outlook Limits Missing Features Roadmap
22. 22 § Blazor Web Assembly 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 § Expose Components as Web Components § AOT Builds § Better Developer Tooling (e.g. improved Debugger, Live Reload) § Roadmap § Blazor WASM 1.0: May 2020 § Improved & enhanced Blazor WASM in .NET 5.0 timeframe “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Current State & Outlook
23. 23 § Microsoft is building a new UI framework for the browser – so… § … ask yourself § “How do we deal with Blazor?” § “Why would we pick Blazor over an established SPA framework?” § “Why would we choose a SPA framework, and not Blazor?” § … you need to check your § Plans for existing & new projects § Team skills § Architecture § Codebase § Web Assembly & Blazor might change the game – it may not be a game changer for you “Alles C#, oder was?” Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor Call-to-Action
24. Thank you! Christian Weyer @christianweyer christian.weyer@thinktecture.com 24