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

Blazor-Gwerch: Dodned im Brausa - echt etz?

Blazor-Gwerch: Dodned im Brausa - echt etz?

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
PRO

September 12, 2020
Tweet

Transcript

  1. Blazor-Gwerch Dodned im Brausa - echt etz? Christian Weyer https://thinktecture.com/christian-weyer

    @christianweyer Co-Founder & 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 Blazor-Gwerch Dodned im Brausa - echt etz? Christian Weyer
  3. 3 § 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# everywhere? Blazor-Gwerch Dodned im Brausa - echt etz? OK - What is the Problem? In the frontend: Can Blazor help here?
  4. 4 Blazor-Gwerch Dodned im Brausa - echt etz? Blazor: How

    does it feel, in the first place?
  5. 5 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as

    Blazor is Web-all-the-way) § JavaScript killer Blazor-Gwerch Dodned im Brausa - echt etz? 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 Blazor-Gwerch Dodned im Brausa - echt etz? 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-Gwerch Dodned im Brausa - echt etz? 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
  8. 8 Blazor-Gwerch Dodned im Brausa - echt etz? Blazor WebAssembly

    in the Browser Blazor DOM WebAssembly .NET Razor Components
  9. 9 Blazor-Gwerch Dodned im Brausa - echt etz? https://caniuse.com/#feat=wasm

  10. 10 Blazor-Gwerch Dodned im Brausa - echt etz? Blazor WebAssembly

    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 10.09.2020 blazor.boot.json
  11. 11 Blazor-Gwerch Dodned im Brausa - echt etz? 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#
  12. 12 Blazor-Gwerch Dodned im Brausa - echt etz? 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 DI Class Libraries Full Stack (APIs, Push, Security)
  13. 13 Blazor-Gwerch Dodned im Brausa - echt etz? 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 Passing Forms Validation
  14. 14 Blazor-Gwerch Dodned im Brausa - echt etz? 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 JS Interop PWA
  15. 15 Blazor-Gwerch Dodned im Brausa - echt etz? 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
  16. 16 Blazor-Gwerch Dodned im Brausa - echt etz? 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
  17. ✅ 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 Blazor-Gwerch Dodned im Brausa - echt etz? My Personal Comparison Blazor WebAssembly Blazor Server 17
  18. 18 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 Blazor-Gwerch Dodned im Brausa - echt etz? My Personal View Blazor ⇔ Angular
  19. 19 Blazor-Gwerch Dodned im Brausa - echt etz? 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 Status Quo Missing Features Roadmap ✔ ✔
  20. 20 § Blazor WebAssembly is in v1 as 3.2.0 §

    WASM is an MVP (and SPAs are not a target of it) § Mono WASM runtime is immature § Blazor is under ongoing development § Missing Features, e.g. § Modules, Lazy Loading § Component Model with CSS Encapsulation § AOT Builds § Better Developer Tooling (e.g. improved Debugger, Live Reload) § Roadmap § Improved & enhanced Blazor WASM in .NET 5 timeframe § AOT postponed to .NET 6 Blazor-Gwerch Dodned im Brausa - echt etz? Current State & Future
  21. 21 § 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 SPA framework?” § “Why would we choose a 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 Blazor-Gwerch Dodned im Brausa - echt etz? Call-to-Action
  22. 22 Blazor-Gwerch Dodned im Brausa - echt etz? 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 – 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. Blazor Server might be a fit for internal applications. Stateful server-side execution model.
  23. 23 Blazor-Gwerch Dodned im Brausa - echt etz? Blazor WebAssembly

    Whitepaper (deutsch) https://www.thinktecture.com/de/whitepapers/blazor-webassembly
  24. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer

    @christianweyer christian.weyer@thinktecture.com Demoanwendung: https://github.com/thinktecture/blazor-webassembly-demo Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter 24
  25. 25 § Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § 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/ § FluentValidation library § https://github.com/Blazored/FluentValidation Blazor-Gwerch Dodned im Brausa - echt etz? Resources
  26. Blazor-Gwerch Dodned im Brausa - echt etz? Christian Weyer https://thinktecture.com/christian-weyer

    @christianweyer Co-Founder & CTO 26