Slide 1

Slide 1 text

Workshop Blazor: Moderne Businessanwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO Patrick Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant

Slide 2

Slide 2 text

2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Mobile & web-based application architectures § Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies, Angular [email protected] @christianweyer https://www.thinktecture.com ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Christian Weyer

Slide 3

Slide 3 text

Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Patrick Jahr

Slide 4

Slide 4 text

4 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Four Blocks – approx. break down Intro Story … a bit boooring stuff … But please bear with us! Technology Architecture Code 😏 😊 Technology Architecture Code 😊 Technology Architecture Code Final Q&A 😊 09.00 – 10.30 11.00 – 12.30 13.30 – 15.00 15.30 – 17.00

Slide 5

Slide 5 text

5 § No longer Windows-only § Web-enabled § Deployment § Updates § Native-like features § Still: Smart Clients (SPA) § Path to Software-as-a-Service (SaaS) § APIs are king § Possibilities for specialized microservices § SaaS is the big transformation ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Modern Business Applications

Slide 6

Slide 6 text

6 § 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# & .NET everywhere? § In the Frontend: Can Blazor help here? ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform OK - What is the Problem? 🤔

Slide 7

Slide 7 text

7 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as Blazor is Web-all-the-way) § JavaScript killer ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor NOT? X

Slide 8

Slide 8 text

8 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor? Mono-based Runtime .NET CLR .NET 6 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)

Slide 9

Slide 9 text

End-to-End Architecture Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 10

Slide 10 text

Architecture Online vs. Offline Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 11

Slide 11 text

11 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Bird’s-Eye-View: Typical (Online) Target Architecture HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API

Slide 12

Slide 12 text

12 ASP.NET Core 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

Slide 13

Slide 13 text

13 ASP.NET Core 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

Slide 14

Slide 14 text

”The web has won.” Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 15

Slide 15 text

15 § Progressive Web Apps § Web Components § WebAssembly ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Three pillars of the Modern Web

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform

Slide 18

Slide 18 text

ASP.NET Core 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

Slide 19

Slide 19 text

ASP.NET Core 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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Browser Support https://caniuse.com/#feat=wasm

Slide 22

Slide 22 text

22 ASP.NET Core 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor WebAssembly Technical Architecture in .NET 6.0 – non-AOT 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 17.02.2022 blazor.boot.json

Slide 25

Slide 25 text

25 ASP.NET Core 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

Slide 26

Slide 26 text

Pages Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 27

Slide 27 text

RenderTree Generated C# Code Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 ASP.NET Core 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

Slide 31

Slide 31 text

Dependency Injection Components & Services Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Modularization RCLs Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 44

Slide 44 text

Modularization Lazy Loading Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 45

Slide 45 text

SEO & Performance Prerendering Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 46

Slide 46 text

Testing Unit Testing Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 47

Slide 47 text

47 ASP.NET Core 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

Slide 48

Slide 48 text

Data Binding One-way and Two-way Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

3rd Party Components Native vs. JavaScript Wrapper Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 53

Slide 53 text

53 ASP.NET Core 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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Progressive Web Apps (PWA) The new Cross-Platform Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

61 ASP.NET Core 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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

63 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor Server – Disconnected UX

Slide 64

Slide 64 text

✅ 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Personal Comparison Blazor WebAssembly Blazor Server

Slide 65

Slide 65 text

65 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform My Personal View Blazor ⇔ Angular

Slide 66

Slide 66 text

66 ASP.NET Core 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

Slide 67

Slide 67 text

.NET 7 Outlook Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor

Slide 68

Slide 68 text

68 § Blazor WebAssembly (WASM) is a browser SPA framework § For C# and .NET developers § .NET code runs assemblies interpreted on a CLR compiled to WASM § AOT-ed code will mostly run as native WASM § Blazor WASM is still young § Release end of April 2020 § Lots of space for improvement § Blazor WASM in .NET 6.0 establishes a reasonable baseline § More to come in NET 7.0+ https://github.com/dotnet/aspnetcore/issues/39504 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Current State & Future

Slide 69

Slide 69 text

69 § Fallacies of Distributed Computing § https://de.wikipedia.org/wiki/Fallacies_of_Distributed_Computing § What Web can do today? § https://whatwebcando.today/ § Blazor Knowledge Hub § https://www.thinktecture.com/de/asp-dotnet-core-blazor/ § FluentValidation § https://fluentvalidation.net/ § Blazor in .NET 5.0 § https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0 § bUnit § https://github.com/egil/bUnit § Mobile Blazor Bindings § https://github.com/dotnet/MobileBlazorBindings § ASP.NET Core 6 Roadmap § https://github.com/dotnet/aspnetcore/issues/27883 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Resources

Slide 70

Slide 70 text

70 ASP.NET Core 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 Web, SPA architectures, Security et. al. – and JavaScript! Blazor is young & immature – technical architecture, app size, missing features. The ecosystem is immature – will 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. No real Web architecture, no boundaries. Stateful server-side with dumb client UI.

Slide 71

Slide 71 text

71 § 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 JS SPA framework?” § “Why would we choose a JS 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 🗣 Call-to-Action

Slide 72

Slide 72 text

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Demo-Code: https://github.com/thinktecture/basta-spring-2022-blazor-workshop https://github.com/thinktecture/blazor-webassembly-demo Blazor Knowledge Hub: https://www.thinktecture.com/de/asp-dotnet-core-blazor/ Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://www.thinktecture.com/de/newsletter