<Developer Day /> Vom Desktop zur Windows 8 App Funktional, usability-technisch und architektonisch Christian Moser Software Architect and UX Designer, Zühlke [email protected] | @christian_moser Muss ich bestehende Desktop-Produkte für Windows 8 anpassen? Brauchen wir eine Windows Store App? Welchen Einfluss hat Modern UI auf unser Produkt-Design? Wie setze ich typische Interaktionen im Modern UI um? Wo sind die Unterschiede zwischen einer .NET 4.5 und einer WinRT App? Wie kann ich möglichst viel Code wiederverwenden? myImmo Was bedeutet Windows 8 für Produktmanager Ständige Präsenz auf dem Startscreen Neue Zielgruppe ansprechen (Tabletnutzer) Top Immobilien auf den LiveTile anpreisen Suchabos über Secondary Tiles Bedienung Einsatzgebiet Umfang Design Verteilung Optimiert für Touch Zwischendurch und unterwegs Simple und mit klarem Fokus Modern UI Style Verteilung über Store Optimiert für Maus und Tastatur Zuhause am PC oder am Arbeitsplatz Komplex und umfangreich Windows Desktop-Style Verteilung über Internet oder Datenträger Sprint 1 Sprint 1 Sprint 2 Sprint 2 Sprint 3 R1 Sprint 4 Sprint 3 Sprint 5 Sprint 4 R2 R1 Sprint 6 Sprint 5 … R3 Neue Gewichtung von Architektur Wartbarkeit Testing Line-of-Business Anwendung Windows Store App Grosses Budget Kleines Budget Oft geschäftskritisch Zusätzlicher «Channel» Viele Funktionen und Schnittstellen Simpel und fokussiert Wichtige Aspekte: Wartbarkeit, Wichtige Aspekte: Time-to-market, Sicherheit, Stabilität, Skalierbarkeit Innovation, Kundennutzen, Up-to-date, lebendig StundenRapport Kundenliste Aufträge Lager Von Privat / Agentur Unternehmen Unternahmen Unternehmen Für Privatkunden Privatkunden Geschäftskunden Mitarbeiter Verteilung Windows Store Windows Store Store / Side Loading Side Loading Bleiben auf dem Desktop Desktop Anwendung App Eingabe umfangreicher Text-Daten Pixelgenaue, komplexe Interaktionen (z.B. CAD) Rechenintensive Aufgaben / Hintergrundtasks Selten genutzte Funktionen Geeignet für eine App Wichtige, häufig genutzte Funktionen Funktionen, die unterwegs nützlich sind Browsen von Daten Einfache, kurze Interaktionen Zusatzfeatures Offlinefähigkeit Windows 8 Features (LiveTiles, Contracts,…) myImmo App Konstenlose B2C-App Erster Release: Nach 1 Monat Verteilung über Windows Store Features für Version 1 Browsen von Mietobjekten Hypothekenrechner Sharen von Objekten Was bedeutet Windows 8 für Designer Schnelles «Undo» wegen hoher Fehlerquote Elemente sind grösser Mehr, dafür einfachere Interaktionen Befehle stehen «auf Abruf» zur Verfügung Kein Schmuck Search, Share, Settings über Contracts Inhalt steht im Vordergrund und wird selbst zur Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Redesign-Plan 1. Featureset reduzieren 2. Schmuck entfernen 3. Contracts nutzen 4. Schrift und Icons anpassen 5. Layout anpassen 6. Moden-UI Navigation Was bedeutet Windows 8 für Softwarearchitekten Windows Store App Neue Lösung in C#/XAML Klassisch Aktuelle Lösung in ASP.NET MVC • Möglichst viel Code wiederverwenden (Time to Market, Testing und Wartung) • Möglichst wenig Logik in der Windows Store App (Time to Market, falls weitere Apps folgen) • Bekannte Praktiken und Tools wiederverwenden (C#, XAML, MVVM, ReSharper, FxCop,…) Maximale Flexibilität Maximaler Reuse Kein Reuse PL löst gewisse API-Probleme Kein Lernen aus Fehlern API Einschränkung Bei stark unterschiedlichen Sprachen / Plattformen Wenn alle Nutzer flexibel sind und Architektur geeignet Maximale Freiheit Guter Reuse Man hat schnell etwas Volle API verfügbar Hohe Redundanz Manuelle Adaption nötig (#If ) Bei vielen Einschränkungen oder ungeeigneter Architektur Wenn Portable Library kein genügendes Subset anbietet #if WinRT using Windows.Storage; #else using System.Configuration; #endif public class SettingsService { public string ReadSettingValue(string key) { #if WinRT return ApplicationData.Current.LocalSettings .Values[key].ToString(); #else return ConfigurationManager.AppSettings[key]; #endif } } Verfügbare Visual Studio Extensions: Caitlyn, Project Linker (Prism) Feature .NET WinRT Silverlight Phone Core LINQ IQueryable dynamic ab 7.5 ab 4.5 MEF Network Class Library Serialization WCF MVVM ab 4.5 Data annotations ab 4.0 XLINQ ab 4.0 System.Numerics Xbox 360 Desktop Windows Store WPF WinRT XAML = .NET Core .NET Core I/O Network Threading I/O Network Threading Resources Reflection Security Resources Reflection Security Backoffice Client (WPF) View Client ViewModel Presentation-Services Webseite (ASP.NET MVC) Server (WCF) Controller Data Service View Business Data Model Mortage Calculation Service Data Access Service Data SQL Property Management Service Backoffice Client (WPF) Client View View ViewModel ViewModel Presentation-Services Presentation-Services Webseite (ASP.NET MVC) Server (WCF) Controller Data Service View Business Data Model Mortage Calculation Service Data Access Service Data SQL Windows Store App (C#, XAML) Property Management Service Backoffice Client (WPF) Client View View ViewModel ViewModel Presentation-Services Presentation-Services Webseite (ASP.NET MVC) Server (WCF) Controller Business Data Service View Data Access Service Data Windows Store App (C#, XAML) SQL Portable Library Data Model Mortage Calculation Service Property Management Service Backoffice Client (WPF) Client Webseite (ASP.NET MVC) View ViewModel ViewModel Presentation-Services Presentation-Services Data Service View Portable Library Data Model Mortage Calculation Service IPlatformAccess Platform Access Layer Data Access Service Data View Server (WCF) Controller Business Windows Store App (C#, XAML) SQL Platform Access Layer Property Management Service Nutzung des Service in der Portable Library public interface ISettingsService { T ReadSettingsValue<T>(string key); } public class PropertyService : IPropertyService { public PropertyService(ISettingsService settingsService) { var interest = settingsService .ReadSettingsValue<double>("InterestRate"); } } Implementierung in der App container.Register<ISettingsService, WinRtSettingsService>(); public class WinRtSettingsService : ISettingsService { public T ReadSettingsValue<T>(string key) { return ApplicationData.Current.LocalSettings .Values[key].ToString(); } } Implementierung auf dem Desktop container.Register<ISettingsService, DesktopSettingsService>(); public class DesktopSettingsService : ISettingsService { public T ReadSettingsValue<T>(string key) { return ConfigurationManager.AppSettings[key]; } } Demo Portable Libraries in Action Bei der Entwicklung einer Windows Store App ist das Code-Sharing nur ein Aspekt. Eine gute Idee und eine gelungene Umsetzung sind viel wichtiger. Möglichst viel Logik auf dem Server macht die AppEntwicklung agiler. Beim Entwurf einer modernen Enterprise-Lösung an Multi-Channel-Fähigkeit denken