Windows-Anwendungen in die JS-Welt bringen

Vortrag auf der Herbst-BASTA 2014 in Mainz

Transcript

1. Aus alt mach neu: Windows-Anwendungen in die JavaScript-/AngularJS-Welt bringen •  Was SIE ERWARTET –  Mögliche Wege aus „der Ecke heraus“ –  Lösungsansätze: JavaScript .NET –  Erfahrungen aus Kundenpro- jekten: Strategie, Architektur, Technologie –  Demos •  Was Sie NICHT ERWARTET –  Ein „Migration Wizard“ –  AngularJS Tutorial 1
2. Jörg Freiberger | Thinktecture AG Aus alt mach neu: Windows-Anwendungen in die JavaScript-/AngularJS-Welt bringen think mobile!
3. Dipl.-Ing. Jörg M. Freiberger •  Freiberuflicher Consultant, Thinktecture •  joerg.freiberger@thinktecture.com
4. Talking Points •  Motivation zur Migration bestehender Windows-Anwendungen – Strategisch – Architekturell •  Lösungsansätze – Migration Schritt-für-Schritt – Vorbereitung auf Cross-Plattform Umgebung 4
5. Ausgangslage •  Klassische Windows-Anwendung – „monogam“ – auf 1 Plattform konzentriert – Stichwort „oder“: Windows oder Web oder iOS oder Android oder... •  Es gibt gute Gründe zur Migration •  Kein unbegrenztes Budget vorhanden – Bestehende Anwendung kann nicht von Grund auf neu entwickelt werden
6. Windows Android, iOS, ... WPF XAML Windows 8 XAML HTML HTML Services C / C++, Delphi ObjC, Java, ... C# C#, JavaScript Java Script Ausgangslage
7. Die Schmerzen... 7
8. Motivation zur Migration •  Bestehende Plattform wird nicht mehr supported –  Alte Umgebung/Programmierframework stirbt aus oder fällt aus politischen Gründen weg –  DER Entwickler verlässt die Firma –  DLLs, COM und ActiveX, MFC, VBA, etc. •  Aktuelle Plattformen sollen bedient werden –  Windows klassisch, Windows (Phone) 8, Web, iOS und Android •  Neue Features kommen hinzu –  Evtl. sollen neue Features aber nicht allen Benutzern zur Verfügung stehen
9. Strategische Ziele •  Neue Plattform, neue Geräte, neue Welt •  Pflege und Wartung verbessern (oder gar erst ermöglichen) – Schneller auf Kundenwünsche reagieren können •  Marketing, Imagewechsel, etc. – Mehr als nur alter Wein in neuen Schläuchen
10. Es geht also um… •  Vorgehen nach Prinzip: Teile und herrsche –  Modul-für-Modul, Dialog-für-Dialog, ... •  Wichtige Entscheidungen –  Entweder eine Version der Anwendung pro Plattform oder einmal HTML/JS (mit geringen plattformspezifischen Anpassungen) –  (Externe) Unterstützung oder Entwickler-Update •  Nicht nur reine Migration einer bestehenden Anwendung –  Gleichzeitig Vorbereitung zur Unterstützung neuer, mehrerer Plattformen
11. iOS Wrapper Android Wrapper WPF Wrapper Windows 8 Wrapper Web Wrapper JavaScript Business Code HTML C# JavaScript Validierung Services Zielsetzung
12. Es geht auch um Zusatzaufwand •  Neue Technologien, neues Know-How •  Integrationsaufwand / Brücken schlagen zwischen alt und neu •  Komponenten/Bibliotheken von Drittanbietern •  Übergangsprozess (Migration) verläuft nicht reibungslos –  Die technischen Herausforderungen sind i.d.R. nicht trivial
13. Zielarchitektur – meistens 13
14. Ausgangslage – Beispielanwendung 14 •  WPF Anwendung – DataGrid und DataSource •  SQL Server Backend – Entity Framework – Northwind
15. Ziel: Bidirektionale Integration Architekturelle Lösungsansätze 15 Browser Control In process
16. Ziel: Bidirektionale Integration Technische Varianten •  Long Polling – Eigenimplementierung oder z.B. socket.io •  SignalR – Microsoft ASP.NET und JavaScript •  Browser control – CefSharp oder WebBrowser Control •  .NET und JS in-proc – edge.js – Google V8 & ClearScript 16
17. WPF & JS – HTTP Long Polling –  Lang laufender Request von JS aus an Web API –  Response kann Befehle enthalten –  Einsatz bei z.B. Delphi-Anwendungen (ohne .NET) 17 Self-hosted Service 1) HTTP GET 2) Aufgerufene Methode „blockiert“ und sendet Response als log. Befehl 3) HTTP Response mit Befehl
18. Ziel: Bidirektionale Integration Architekturelle Lösungsansätze 18 Browser Control In process
19. AngularJS 19
20. AngularJS 20 •  JavaScript Bibliothek – Open Source •  Umfangreiches und mächtiges Framework für Client-Anwendungen •  Architektur – MVC-Prinzip – Elemente: Services, Direktiven, Controller •  Konzepte – Module, Scope, Expressions, Filter, Dependency Injection, etc.
21. HelloWorld in AngularJS 21 var  bastaApp  =  angular.module('bastaApp',  []);        function  MainService(){          this.getGreetings  =  function()  {              return  "Hello  World";          }      }      bastaApp.service(              'mainService‘,              MainService);        function  MainController($scope,  mainService)      {          $scope.greeting  =                            mainService.getGreetings();      }      bastaApp.controller(              'mainController‘,              MainController);   <script  type="text/javascript"      src="angular.js"></script>   <script  type="text/javascript"        src="mainController.js"></script>   ...     <body  ng-­‐app="bastaApp"        ng-­‐controller="mainController">          {{  greeting  }}   </body>  
22. Self-Hosting •  HTML/JavaScript mit OWIN & Katana – Open Web Interface for .NET - Spezifikation zur Interaktion zwischen Webservern und Anwendungskomponenten – Katana (Microsoft) implementiert OWIN – Walkthrough: siehe Ressourcen •  ASP.NET Web API – NuGet: Microsoft.AspNet.WebApi.SelfHost – Walkthrough: siehe Ressourcen 22
23. Ziel: Bidirektionale Integration Lösungsansatz Browser 23 Browser
24. Birektionale Kommunikation mit ASP.NET SignalR •  Pushen von Nachrichten vom Server zum Client (und vice versa) •  Web Sockets: bidirektionale Kommunikation in HTML5 API –  Transportauswahl mit fall back Strategie •  Implementierungen –  Server: Microsoft.AspNet.SignalR •  Nuget package –  Client: jquery.signalR.js •  jQuery plugin 24
25. ASP.NET SignalR 25 Server: SignalR Hub Client: jQuery SignalR Selfhosted HTML
26. Ziel: Bidirektionale Integration Lösungsansatz WebBrowser Control 26 Control
27. Einsatz von Browser Controls •  Controls, die eine Webseite in einer Windows-Anwendung darstellen –  Speziell auf einen Browser zugeschnitten •  Bekannte Varianten –  Microsoft (IE) WebBrowser Control –  CefSharp für Chromium –  Alternativ: Awesomium
28. CefSharp – Was ist das? •  Chromium Embedded Framework (CEF) – Natives Framework, um Chromium- basierte Browser einzubetten – Chromium ist ein Open-Source Browser Projekt •  CefSharp bietet Wrapper Controls für WPF und Windows Forms
29. Real World: MS Access & CEF •  Bestehende Anwendung auf Basis von MS Access – VBA, evtl. mit SQL Server Backend – Es wird auch gerne von „Schatten-IT“ gesprochen •  Auch hier: Umfeld ändert sich – Kunden fordern Web Portal – Vertrieb/Vorstand fordert iPad-Fähigkeit – Alterspyramide der Entwickler
30. MS Access und CEF •  Mögliche Lösung: JavaScript & HTML –  .NET und XAML nicht geeignet wegen Web (und z.B. TV Apps) •  Vernünftige Vorgehensweise (technisch, betriebswirtschaftl. und strategisch) –  sanfte Migration: Rahmenanwendung nach und nach aushöhlen •  Existierende Features migrieren, weg von VBA zu JS/H5 •  neue Funktionalitäten ausschließlich in JS/H5 •  Lösungsansatz: Browser in MS Access 30
31. MS Access – Child Window ActiveX Wrapper (VB6) .NET COM interop control (.dll) MS Access Anwendung Architekturbild 31 CefSharp MS Access
32. MS Access Anwendung 32
33. MS Access Anwendung Einzelner Bereich in H5/JS 33
34. MS Access Anwendung CefSharp WebView im COM Wrapper 34
35. MS Access Anwendung Konfiguration der CefSharp JS-Brücke 35
36. MS Access Anwendung Einbindung als OCX (dünner Wrapper) 36
37. CefSharp – Probleme •  Allgemein hoher Speicherverbrauch •  Memory Leaks in der Implementierung der „Brücke“
38. Ziel: Bidirektionale Integration Lösungsansatz In-Process 38 In process
39. Edge.js •  node.js Modul •  Ausführung von .NET und node.js Code in einem Prozess var  edge  =  require('edge');     var  helloWorld  =  edge.func(__dirname          +  "/csharpcodefile.csx");     helloWorld("BASTA  2014",          function(err,  result)  {                  if  (err)  throw  err;                  console.log(result);   });     using  System.Threading.Tasks;   public  class  Startup   {      public  async  Task<object>  Invoke(object  input)      {          return  "Hello  World  to  "  +  input.ToString();      }   }  
40. Jenseits von Windows: Multi-Plattform-ing •  Weitere Schritte für Support anderer Plattformen •  Spezielle Anpassungen sind in annehmbarem Umfang durchzuführen – Ergänzungen im JavaScript – Generieren der Anwendung 40
41. Multi-Plattform-ing •  JavaScript Code checked auf Vorhandensein von CefSharp-Brücke – Nur dann wird CEF-spezifischer Integrations-Code ausgeführt •  Erzeugung der nativen OS Apps mit Hilfe von Cordova/Phonegap – iOS, Android, Windows Phone, Windows 8 41
42. Zusammenfassung •  AngularJS und Migration – Braucht sorgfältige Planung – Als Chance zur Erneuerung betrachten •  Hoher Anschaffungswiderstand – Zusatzaufwand in Entwicklung, Know-How, etc. – Zahlt sich langfristig aus wegen Multi- Plattform-Support – Ist auf jeden Fall geringer als Neuentwicklung
43. Vielen Dank 43
44. Ressourcen •  AngularJS –  https://angularjs.org/ •  SignalR –  http://signalr.net/ –  https://github.com/SignalR/SignalR/wiki/SignalR-JS-Client •  Edge.js –  http://tjanczuk.github.io/edge/#/ •  CefSharp –  https://github.com/cefsharp/CefSharp –  https://code.google.com/p/chromiumembedded/ •  OWIN & Katana –  http://odetocode.com/blogs/scott/archive/2014/02/10/building-a-simple-file- server-with-owin-and-katana.aspx •  Selfhosting WebApi –  http://www.asp.net/web-api/overview/hosting-aspnet-web-api/self-host-a-web-api •  Thinktecture –  www.thinktecture.com 44