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

“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.

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer

November 27, 2019
Tweet

Transcript

  1. 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?”
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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