Windows-Anwendungen in die JS-Welt bringen

Windows-Anwendungen in die JS-Welt bringen

Vortrag auf der Herbst-BASTA 2014 in Mainz

41d4d68058c3b8018345e66ca589c28e?s=128

Joerg Freiberger

September 24, 2014
Tweet

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