Säulen des modernen Web: Progressive Web Apps, Web Components und WebAssembly Christian Weyer Gründer, CTO Thinktecture AG

2 § Mitgründer & CTO, Thinktecture AG § Persönlicher Fokus § Cloud-native & Serverless Architekturen § Pragmatische End-to-End-Lösungenm § Mobile & Web-basierte Anwendungsarchitekturen § Microsoft Regional Director § Microsoft MVP (Developer Technologies & Azure) ASPInsider, AzureInsider § Google GDE (Web Technologies) [email protected] @christianweyer https://www.thinktecture.com Christian Weyer Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs

Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly 3 Säulen des modernen Web 3 Progressive Web Apps Web Components Web Assembly

4 § Mehr als nur noch Windows § Web als Plattform § Deployment, Updates § Native Features § Der neue Smart Client: Single Page Applications (SPA) § Pfad zu Software-as-a-Service (SaaS) § APIs, APIs, APIs! § SaaS ist die große Transformation Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly Moderne Business-Anwendungen

5 Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly Typische Architekturen: APIs und Clients HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API

”Das Web hat gewonnen.” Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs 6

Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs 7 Jeglicher Code Performant

8 § Low-level Bytecode für das Web § Jede erdenkliche Programmiersprache in den Browser bringen § Aktuell abzielend auf nicht-managed Umgebungen wie C, C++, Rust § Kann sehr schnell sein § Kein Ersatz für JavaScript § Zielstellungen § Schnell, effizient, kompakt, portabel § Nutzung existierender sicherer Sandbox-Konzepte § „Don’t break the Web“ Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly WebAssembly (Wasm) https://twitter.com/getify/status/997098808344547328

9 Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly C# & .NET im Browser: Blazor WebAssembly Blazor DOM Web Assembly .NET Razor Components

Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs 10 Baukasten-System Standardisiert

Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly Web Components § Wiederverwendung existierender UI-Funktionalität in Form von Komponenten § Semantische UI-Komposition § Investments sichern § Über Framework-Grenzen hinweg nutzen § Web Components sind Triumvirat an Standards § Custom Elements § HTML Templates § Shadow DOM § Web Components können mit allen Frameworks genutzt und tw. auch erstellt werden 11

Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs 12 Nativer App-iger

13 § Web Apps sollten… § sich anfühlen wie eine native App § installierbar sein, ohne App Stores § offline-fähig sein § Push-Nachrichten empfangen können, ohne laufen zu müssen § PWAs zielen auf Mobile und Desktop ab § Standards wie Web App Manifest oder Service Worker als Herz von PWAs § PWA- / Fugu-Schnittstellen werden stetig weiter entwickelt Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly Progressive Web Apps (PWA) – das Web wird nativer

Progressive Web Apps, Web Components und WebAssembly Säulen des modernen Webs Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive 14

15 Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly pwademo-

Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly Offline mit dem Service Worker Mobile oder Desktop DB auf Server Server HTTPS Browser Web App HTML/JS Cache-Speicher fetch Service Worker 16 Web API

Säulen des modernen Webs Progressive Web Apps, Web Components und WebAssembly 3 Säulen des modernen Web 17 Progressive Web Apps Web Components Web Assembly

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://www.thinktecture.com/de/newsletter 18