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.

Ebeb5d8fd081058ba8df73d378bf83d7?s=128

Sebastian P.R. Gingter

September 28, 2017
Tweet

Transcript

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

    1997-2017 Sebastian Gingter @PhoenixHawk | sebastian.gingter@thinktecture.com Software Architect
  2. Look who’s talking Sebastian Gingter Software Architect & Erklärbär bei

    der Thinktecture AG E-Mail: sebastian.gingter@thinktecture.com 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. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 ¯\_(ツ)_/¯
  12. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 (╯°□°)╯︵ ┻━┻
  13. 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
  14. 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
  15. 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
  16. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Legacy: Nicht doch eher so?
  17. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Legacy: Nicht doch eher so?
  18. 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
  19. 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
  20. 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!
  21. • 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?
  22. • 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
  23. 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
  24. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Ziel: Integration zu HTML5/JS Control
  25. 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
  26. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Ziel: Integration zu HTML5/JS
  27. 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
  28. • 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
  29. 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
  30. 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?
  31. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Option: Browser-Control Control
  32. • 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
  33. • 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
  34. • 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
  35. • 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
  36. • 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
  37. 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
  38. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 MS Access mit CEF
  39. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 MS Access mit CEF
  40. 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
  41. Von Windows-Forms & WPF in die neue HTML5-Welt BASTA! Jubiläumskonferenz

    1997-2017 Ziel: Integration zu HTML5/JS
  42. • 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?
  43. • 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
  44. • 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
  45. • 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
  46. • 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
  47. • 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
  48. Fragen??? Antworten!!! Von Windows-Forms & WPF in die neue HTML5-Welt

    BASTA! Jubiläumskonferenz 1997-2017 Vielen Dank