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.

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