Saves the day. Case Study WPF zu Web Rainer Stropek software architects gmbh http://www.timecockpit.com [email protected] @rstropek Ein Vortrag in drei Akten Web Mail Twitter 

Agenda In einer Anwendung, in der mehrere Entwicklerjahrzehnte stecken, das UI von WPF/Silverlight auf HTML/JavaScript umzustellen, ist für ein kleines Softwarehaus eine echte Herausforderung. Rainer Stropek und sein Team rund um time cockpit haben sich ihr gestellt. In dieser Session geht es um die Erfahrungen, die Do's und Dont's und die Tipps und Tricks, die dabei gesammelt wurden. Rainer wird die Session in drei Teile gliedern.  Im ersten Teil geht er auf die langfristigen Vorarbeiten ein, die in der Softwarearchitektur geschaffen wurden, um bereit für den Wechsel des UIs zu werden. Themen dabei sind Anwendungsmodularisierung, standardkonforme Web Services (OData, OAuth, etc.), plattformunabhängige DSLs u.v.m.  Der zweite Teil widmet sich weniger der Technik sondern mehr der Organisation. Wie bringt man in einem kleinen Team das Tagesgeschäft, den notwendigen Cash Flow und ein so großes Migrationsprojekt unter einen Hut?  Im dritten Teil berichtet Rainer über die Technik hinter der Web-Entwicklung. Er erklärt, welche Frameworks (AngularJS, KendoUI, etc.) warum eingesetzt wurden und wie der Entwicklungsprozess bis hin zur Continuous Integration mit Visual Studio Online gestaltet ist. 

WPF zu Web - Erfahrungsbericht  Akt 1: Vorbereitung Rahmenbedingungen Softwarearchitektur  Akt 2: Die Änderung Organisation Projektmanagement  Akt 3: Lösung Technik, ALM 

1. Akt Die Vorbereitung 

Vorstellung  Kleines Team Zwei Gründer, insgesamt sieben Personen Techniklastig DevOps  Als GmbH fünf Jahre alt Seit 2008 aktiv Eigenkapital, F&E Förderung  “Born in the Cloud” Microsoft Azure SaaS  Drei Geschäftsbereiche Time Cockpit CoFX Consulting 

Anpassbarkeit Für uns ein differen- zierender Faktor Nicht allgemeingültig Herausforderung: Multi- Tenancy Meta- Model ISV Base Model ISV Partners Customer- specific Model Partner Customer 

Image source: https://flic.kr/p/rqmzA5, Creative Commons License 

Beispiele für Shearing Layers  Site (Grundstück) Kaufmännische, datenorientierte Software Microsoft RDBMS mit SQL  Structure (tragende Wände) SaaS in der Azure Cloud inkl. Offlinefähigkeit Multi-Tenancy .NET, C#, Python, XML Metadatenmodell und UI Prinzipien (CoFX Kern)  Skin (Fassade) CoFX SDKs (.NET, Web Services) DB Generierlogik UI-Implementierung (XAML/C#, HTML/TS, RDL)  Services (Installationen) Kerndatenmodell und –Funktionen Standardreports und –UI  Space Plan (Raumaufteilung) Größere, kundenspezifische Erweiterungen Kundenspezifische Schnittstellen „Halbfertigprodukte“  Stuff (Einrichtung) Kleinere UI-Anpassungen Spezifische Reports UI-Einstellungen 

Demo CoFX Architektur Erweiterbares Datenmodell Ausdruckssprache TCQL UI-Metamodell Listen, Forms, Reports Navigation UI-Implementierung WPF, Silverlight, HTML API .NET, OData 

WPF Daten, Metadaten DAL VM, UI Generator BL/M UI (XAML) Silverlight DAL Proxy Entstehung WPF Client Klare Schichtentrennung XAML mit Silverlight im Blick Stark Metadatengesteuertes UI Offlinefähigkeit (Sync) Service Layer Proprietäres Protokoll (Daten, Metadaten, Auth) Browser Client (SL) DAL durch Proxy ersetzt Code-Wiederverwendung durch einheitliche API .NET API für Kunden Client Azure DAL Service VM, UI Generator BL/M UI (XAML) 

Tipps  Hab das Ziel klar vor Augen Wo wollen wir hin? Kurz- mittel- und langfristig mit abnehmender Genauigkeit Was kann aus inhaltlicher und technischer Sicht als fixiert angesehen werden? Wo ist mit Änderungen zu rechnen und welche Auswirkungen hätten sie?  Muster kennen und nutzen Inhaltliche und technische Muster (Patterns) Standardisierung und Automatisierung reduzieren den Aufwand massiv Abstraktion (z.B. DI) hilft, wird aber oft übertrieben  Technologien und Standards beobachten Was ist stabil genug für den heutigen Einsatz? Womit ist bald zu rechnen? Was muss langfristig beobachtet werden? 

2. Akt Wie geht man mit der Änderung um? 

“Disruptive Changes”  Das Ende von Silverlight Phones und Tablets Plugins sind “böse”  Rasante Entwicklung bei HTML/JavaScript Mächtigere Sprachen (z.B. TypeScript) Stabilisierung der Frameworks (z.B. jQuery, Angular)  Platformvielfalt Vor allem bei Mobile Devices  Web oder App? 

Der Prozess  Orientierungs- und Planungsphase Technologiestudien, Prototypen, Spielprojekte Technologien und Tools evaluieren Den Kunden aufmerksam zuhören Nutzungsmuster analysieren (z.B. Application Insights, Google Analytics)  Architekturentwicklung Mentales Modell der Zielarchitektur Nicht alle Details müssen fix sein Design to Cost steckt Kostenrahmen ab und beeinflusst Architektur  Schrittweise, iterative Umsetzung Agile Methoden auf Basis der zuvor durchgeführten Planung Möglichst frühen Kundennutzen anstreben 

DAL OData BL/M WPF Der Plan (Vereinfacht) Web Service API Standardprotokolle (OData, OIC/OAuth) Wird zur neuen API HTML5-Client Metadatengesteuert wo mögliche/sinnvoll Wiederverwendung von VM auf Serverseite Einbettung in XAML als Brücken- technologie Daten, Metadaten Client Azure DAL Service Silverlight HTML Client UI (HTML) MVVM (Proxy) VM UI Generator XAML/C# Impl. UI (HTML) MVVM (Proxy) 

DAL OData BL/M WPF Der Plan (Vereinfacht) HTML löst Silverlight ab Milestone: September 2015 Offlinefähiger Client nutzt HTML OWIN/ASP .NET 5 nutzen Sonstiges (kein Thema hier) Native Apps für spezifische Szenarien Optimierung für Mobile Auth: Identity Federation … Daten, Metadaten Client Azure HTML Client UI (HTML) MVVM (Proxy) VM UI Generator XAML/C# Impl. UI (HTML) MVVM (Proxy) DAL Service Silverlight Backend 

Tipps  Liquidität nicht vergessen! Design to Cost Ohne Cash Cow oder hohes Eigenkapital ist es schwierig Technischer Anspruch (Devs) vs. finanzielle Möglichkeiten (Mgmt., Shareholder)  Kontinuierliche Verbesserung statt Big Bang Kunden einladen, die neue Welt frühzeitig zu testen Produktive Lösung nicht “verhungern” lassen Verlässlichkeit durch Einhaltung des Releasezyklus (Scrum, Kanban) zeigen  Sein Unwissen nicht unterschätzen Neue Technologien sehen auf den ersten Blick immer toll aus Schwarze Schwäne an allen Ecken und Enden Alles dauert länger als man glaubt 

3. Akt Die Lösung (gewählte Technik, ALM) 

Technologiestack (Web)  TypeScript Steigert Produktivität und reduziert Laufzeitfehler  AngularJS Stabile Versionen für Produktiventwicklung Prototypen mit Previews Controls aus Telerik Kendo UI (gute TypeScript und Angular-Unterstützung)  OData/OAuth/Open ID Connect als neue API Standard ermöglicht Nutzung von Standard-Tools Metadaten sind eingebaut Ergänzung um individuelle Web APIs für spezielle Funktionen des UI  OWIN/ASP.NET 5 für Self Hosting 

Cloud On-Premise Developer Workstation (Visual Studio) Internal (on-premise) External TFS (legacy) Source Code Control (TFS) Automated Build Visual Studio Online Source Code Control (Git) myget (NuGet Package Repository) Automated Build Microsoft Azure Staging Web(s) Production Web Internal Users (Doogfooding) Early Adopters End Customers 

Jira (Atlassian Cloud) Requirements Mgmt. Project Mgmt. (Kanban) Visual Studio Online Source Code Control (Git) Automated Build & Test Continuous Deployment time cockpit Activity Log Time Tracking Controlling, Billing Visual Studio IDE External Git Tools Cloud On-Premise Jira issues  VSO tasks (enables assignment of code changes to tasks) Jira issues  tc tasks (enables time tracking and budgeting per project/tasks) Frontend for VSO Zendesk Customer Service Tickets  Jira issues (bugs, feature requ., etc.) Slack Team Communication Tickets (to enable discussion) time cockpit full client Signal Tracker Offline-enabled Frontend for time cockpit 

Tipps  Sich nicht verrückt machen lassen Transparenz von Open Source ist verführerisch Frameworks verschwinden oft so schnell wie sie erscheinen Worauf setzt man seine Zukunft?  Nicht zu Tode evaluieren und abstrahieren Es gibt keine perfekte Lösung Unternehmerisch handeln heißt manchmal (kalkulierte) Risiken einzugehen  Kunden sind selten Technologiefreaks Funktionalität und Service steht im Vordergrund Technologie ist Hygienefaktor Langfristige Lösungen haben ihre Berechtigung 

Fazit 

Wichtigste Tipps  Habe einen Plan Inhaltlich und technologisch Nicht zu früh zu Programmieren beginnen  Liefere schnell und regelmäßig Keine Angst vor Feedback Konstanten Rhythmus einhalten  Sorge für die notwendige Finanzierung Sonst ist es ein Hobby und kein Geschäft 

Saves the day. Von WPF zu Web Q&A Rainer Stropek software architects gmbh [email protected] http://www.timecockpit.com @rstropek Thank your for coming! Mail Web Twitter 

is the leading time tracking solution for knowledge workers. Graphical time tracking calendar, automatic tracking of your work using signal trackers, high level of extensibility and customizability, full support to work offline, and SaaS deployment model make it the optimal choice especially in the IT consulting business. Try for free and without any risk. You can get your trial account at http://www.timecockpit.com. After the trial period you can use for only 0,25€ per user and day without a minimal subscription time and without a minimal number of users. 

ist die führende Projektzeiterfassung für Knowledge Worker. Grafischer Zeitbuchungskalender, automatische Tätigkeitsaufzeichnung über Signal Tracker, umfassende Erweiterbarkeit und Anpassbarkeit, volle Offlinefähigkeit und einfachste Verwendung durch SaaS machen es zur Optimalen Lösung auch speziell im IT-Umfeld. Probieren Sie kostenlos und ohne Risiko einfach aus. Einen Testzugang erhalten Sie unter http://www.timecockpit.com. Danach nutzen Sie um nur 0,25€ pro Benutzer und Tag ohne Mindestdauer und ohne Mindestbenutzeranzahl.