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

Basta 2017: Von Winforms & WPF in die neue HTML5 Welt

Basta 2017: Von Winforms & WPF in die neue HTML5 Welt

Die Folien zu meiner Session Von Winforms & WPF in die neue HTML5 Welt, gehalten am 28.09.2017 auf der BASTA 20 in Mainz.

Sebastian Gingter

September 28, 2017
Tweet

More Decks by Sebastian Gingter

Other Decks in Programming

Transcript

  1. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Sebastian Gingter @PhoenixHawk | [email protected] Software Architect
  2. Look who’s talking Sebastian Gingter Software Architect & Erklärbär bei

    der Thinktecture AG E-Mail: [email protected] Twitter: @PhoenixHawk Blog: https://gingter.org Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017
  3. Special Day: “Cross-Platform HTML 5” Thema Sprecher Datum, Uhrzeit Raum

    Anfassen erlaubt: Mobile Apps mit Angular und Cordova Thomas Hilzendegen DO, 28. September 2017, 09.00 bis 10.00 Gutenberg-Saal 4 Fenster überall: Desktopanwendungen mit Angular und Electron Fabian Gosebrink DO, 28. September 2017, 10.45 bis 11.45 Gutenberg-Saal 4 Offline First mit Angular und SQL Server – Es geht auch ohne Netz Thorsten Hans DO, 28. September 2017, 12.00 bis 13.00 Gutenberg-Saal 4 Von Windows Forms und WPF in die neue HTML5-Welt Sebastian Gingter DO, 28. September 2017, 15.45 bis 16.45 Gutenberg-Saal 4 Web goes Native: Progressive Web Apps (PWA) – with Angular Shmuela Jacobs DO, 28. September 2017, 17.00 bis 18.00 Gutenberg-Saal 4 Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017
  4. • Motivation zur Migration bestehender Windows-Anwendungen • Strategisch • Architekturell

    • Lösungsansätze • Schrittweise Migration • Vorbereitung auf echte plattformübergreifende Verwendbarkeit Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Unser Thema
  5. • Neue Plattform(en), neue Geräte, neue Welt(en) • Pflege und

    Wartung verbessern bzw. erst ermöglichen • Schneller auf neue Anforderungen reagieren können • Marketing / Image-Auffrischung • Mehr als nur Evolution: Revolution Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Strategische Ziele
  6. • Der Firmen-Wert steckt in der existierender Anwendung klassisch, monogam,

    monolithisch, Win32, “legacy” • Alles neu Schreiben ist unpraktikabel (Zeit/Geld) • Es gibt aber dennoch gute Gründe für eine Migration (Mobile) Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Problemstellung
  7. “Legacy”-Anwendung • Klassische Windows-Anwendung • Nur Windows • z.B. Access,

    VB6, MFC, Delphi, Windows Forms, WPF… • “Legacy”? • jeder Code, der gestern für das “heute” geschrieben wurde • jeder Code, der nicht bewusst für die Zukunft geschrieben wurde Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Unser Startpunkt
  8. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Die Situation Windows Android, iOS, ... WPF XAML Windows UWP XBox HTML Services C / C++, Delphi ObjectiveC Swift, Java, ... C# C#, JavaScript JavaScript TypeScript
  9. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Der Schmerz im Ars… Allerwertesten
  10. • Bestehende Plattform wird problematisch • Alte Umgebung / Framework

    stirbt aus • Alte Umgebung fällt aus politischen und/oder Sicherheitsgründen weg • DER Entwickler verlässt die Firma • DLLs, COM, ActiveX, MFC, VBA, VCL, Access… • Es sollen aktuelle(re) Plattformen bedient werden • Windows 8+, XBox One, Web, iOS & macOS, Android, Smart TVs… Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Motivation zur Migration
  11. Radikalkur • Nicht nur eine Migration sondern kompletter Re-Write •

    Wichtige Entscheidungen • Entweder eine Version der Anwendung pro Zielplattform oder einmal HTML5/JS (ggf. mit ein paar plattformspezifischen Anpassungen) • (Externe) Unterstützung und/oder Entwickler-Update Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Möglicher Ansatz
  12. Der sanfte Weg • Teile und Herrsche (Divide and conquer)

    • Maske für Maske, ein Dialog nach dem anderen • Portierung auf neue Plattform schrittweise durchführen • Jeden Schritt auch in der Legacy-Anwendung nutzbar machen • Dabei Chancen nutzen Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Möglicher Ansatz
  13. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Die Situation Windows Android, iOS, ... WPF XAML Windows UWP XBox HTML Services C / C++, Delphi ObjectiveC Swift, Java, ... C# C#, JavaScript JavaScript TypeScript
  14. Jetzt lange verschobenes Refactoring machen! Von Windows-Forms & WPF in

    die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Dann die Chance nutzen Separation of Concerns Wiederverwendung Leichter separat anzubieten
  15. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Zielsetzung iOS Wrapper Android Wrapper WPF Wrapper Windows/UWP Wrapper Web Wrapper JavaScript Business Code HTML bisheriger Code JavaScript Validierung Services
  16. Fallstricke / Zusatzaufwände • Neue Technologien = neues Know-How •

    Lernkurve mit einpreisen • Integrationsaufwände • Komponenten / Bibliotheken von Drittanbietern • Reibungsverluste beim Übergangsprozess • technische Herausforderungen sind im Allgemeinen nicht auf die leichte Schulter zu nehmen Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Achtung!
  17. • Wir brauchen ein griffiges Beispiel • WPF Anwendung •

    DataGrid & DataSource • SQL Server Backend • Entity Framework Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Was bedeutet das für uns?
  18. • Kann Stück für Stück bereitgestellt warden • Form für

    Form • z.B. erst einmal nur der Reporting-Teil (wenig Interaktion) • Design mittels CSS an aktuelle Anwendung angepasst • Soll in aktuelle Anwendung integriert werden Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Ansatz: Neue HTML5-Anwendung
  19. Technische Möglichkeiten • Externe Web-App • Long-polling (Eigenimplementierung oder z.B.

    socket.io) • SignalR • Embedded Web app: Browser Control • CefSharp oder WebBrowser Control • .NET und JS in-proc • ClearScript mit Googles V8 • (edge.js?) Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Notwendigkeit: Bidirektionale Kommunikation
  20. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Ziel: Integration zu HTML5/JS Control
  21. Für externe Browser • OWIN & Katana • Anwendung ist

    gleichzeitig Webserver • Liefert HTML und sonstige Web-Ressourcen selber aus • ASP.NET Web API • Stellt Funktionalität als (HTTP)-APIs bereit Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Option: Self-Hosting
  22. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Anwendung & JS – Long Polling • Lang laufender Request von JS aus an Web API • Response kann Befehle enthalten • Einsatz bei z.B. Delphi-Anwendungen (ohne .NET) Self-hosted Service 1) HTTP GET 2) Aufgerufene Methode „blockiert“ und sendet Response(s) als logischen Befehl 3..x) HTTP Response mit Befehl
  23. • Pushen von Nachrichten vom “Server” (Desktop-Anwendung) zum “Client” (Web-Anwendung)

    und wieder zurück • WebSockets • Transportauswahl mit Fallback-Strategien Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 ASP.NET SignalR
  24. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 ASP.NET SignalR Server: SignalR Hub Client: SignalR JS Selfhosted HTML
  25. Kleiner strategischer Einschub • Ja, wir bauen unsere Anwendung in

    einen oder mehrere (Web-)Service(s) um • Chancen & zukünftige Optionen • Cloud-Hosting • SaaS Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 WTF machen wir hier eigentlich?
  26. • Control zeigt Webseite in einer Anwendung dar • Speziell

    auf einen Browser zugeschnitten • Varianten • Microsoft (IE) WebBrowser Control • CefSharp für Chromium Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Einsatz von Browser-Controls
  27. • Chromium Embedded Framework • Liefert die Chromium-Engine (Browser) als

    (native) DLLs • zzgl. Wrapper zum Einbau in eigene Projekte • CefSharp: .NET Wrapper • CefSharp.Wpf • CefSharp.WinForms • WebKitX • ActiveX MFC/ATL Wrapper z.B. für VB6, Access oder Delphi Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 CEF
  28. • WPF und Windows Forms • Kommunikation über bridged Objekte

    • Durch das Laden nativer dll’s ist dynamisches Umschalten zwischen 32 und 64 bit etwas tricky, aber inzwischen gut machbar Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 CefSharp
  29. • Bestehende Anwendung auf Basis von MS Access • VBA,

    immerhin schon mit SQL Server Backend • “Schatten-IT” • Umfeld ändert sich • Kunden fordern Web-Portal • Vertrieb / Vorstand fordert iPad-Fähigkeit • Alterspyramide der Entwickler Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Real World: MS Access & CEF
  30. • Mögliche Lösung: HTML5/JS • .NET und XAML nicht geeignet

    wegen Web (und z.B. Apps für SmartTVs) • Technisch, betriebswirtschaftlich und strategisch vernünftige Vorgehensweise gefordert • Sanfte Migration, Rahmenanwendung nach und nach aushöhlen • Existierende Features migrieren: VBA -> JS • Neue Funktionen nur noch in JS Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Real World: MS Access & CEF
  31. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Browser in MS Access MS Access – Child Window ActiveX Wrapper (VB6) .NET COM interop control (.dll) CefSharp MS Access
  32. Mögliche Stolperfallen • Chrome (bzw. Chromium) ist nicht gerade für

    seinen sparsamen Umgang mit Arbeitsspeicher bekannt • Die Bridge zwischen Host-Anwendung und Web-Anwendung in CEF kann zudem noch Memory-Leaks verstecken Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 CEF
  33. • Node.js Modul • Ausführung von .NET und Node.js Code

    in einem Prozess • In beide Richtung (JS in .NET und .NET in JS) • Achtung: • Noch kein Support für aktuelles .NET Core • Pflege des Projektes scheint abzuebben Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Edge.js?
  34. • Weitere Schritte für den Support anderer Plattformen • Integration

    mit Plattform-spezifischen APIs • Kamera • Tray-Icons • Spezielle Anpassungen sind ggf. noch notwendig • Ergänzungen im Client-Code • Build-Prozess / Generieren der kombinierten Anwendung(en) Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Real Cross-Platform Business Applications
  35. • Client-Code kann Feature-Detection machen • z.B. Cef-Bridge erkennen und

    nutzen wenn sie da ist alternative normale HTTP-API-Calls machen • Erzeugen nativer Anwendungen mit Hilfe von Cordova und/oder Electron • Cordova: iOS, Android, UWP (XBox) • Electron: macOS, Linux, Windows Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Real Cross-Platform Business Applications
  36. • Proof of Concept • Echte Integration mit einer komplexen

    Anwendung • 3D-Szene in einer Host-Anwendung • 2-Wege Interaktion mit Webanwendung Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Kurzer Code-Walkthrough
  37. • Migration von Desktop-Anwendung zu SPA • Benötigt sorgfältige Planung

    • Als Chance zur Erneuerung betrachten • Hoher Anschaffungswiderstand • Zusatzaufwand in Entwicklung • Know-How muss aufgebaut werden (steile Lernkurve) • Zahlt sich ggf. erst mittel- bis langfristig aus • Ist aber geringer als komplette Re-Implementierung Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Resümee
  38. • Angular: https://angular.io • SignalR: https://www.asp.net/signalr • Edge.js: https://tjanczuk.github.io/edge •

    CefSharp: https://github.com/cefsharp/CefSharp • Thinktecture: https://thinktecture.com/ • Repo zu dieser Session: https://github.com/thinktecture/basta-herbst-2017-WpfCefSharp Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz 1997-2017 Ressourcen / Links
  39. Fragen??? Antworten!!! Von Windows-Forms & WPF in die neue HTML5-Welt

    BASTA! Jubiläumskonferenz 1997-2017 Vielen Dank