Współdzielenie kodu aplikacji Windows Phone i Windows 8

...czyli dwie pieczenie na jednym ogniu

Bartłomiej ZassTechnical Evangelist | Microsoft

co najmniej

dwie

Poznasz różne strategie pisania przenośnego kodu dla smartfonów i tabletów (nie tylko Microsoft i nie tylko w C#!)

Zrozumiesz podobieństwa i różnice między platformami Windows Phone 8 i Windows 8

Poznasz podstawy wzorca Model-View-ViewModel

Zastosujesz Portable Class Libraries do wyodrębnienia wspólnej logikiaplikacji Windows Phone i Windows 8

Cel sesji

Różne strategie pisania kodu przenośnego HTML i JavaScript – jQuery Mobile, PhoneGap C#

Windows Phone 8, Windows 8 – podobieństwa i różnice

Architektura aplikacji - MVVM i Portable Class Libraries

Plan prezentacji

Źródło: Gartner

Dlaczego HTML i Javascript? Jedyny wspólny mianownik między platformami

Przeglądarki internetowe w urządzeniach mobilnych Osadzone kontrolki przeglądarki w natywnych aplikacjach

A może C++? Windows Phone 8 obsługuje C++ Objective-C to NIE C++

“79% of mobile developers report that they will integrate some HTML5 in their apps in 2012”

Appcelerator/IDC – Q1-2012 – Mobile Developer Report

Javascript dzisiaj Natywne aplikacje dla Windows 8 Gry – np. Cut The Rope, Angry Birds Office 2013, Sharepoint Node.js Cała masa bibliotek – nie tylko jQuery!

„Model-View-Whatever” w Javascript np. Knockout, Angular, Backbone, Mustache

Ciekawostki http://jscriptlinq.codeplex.com/ - LINQ w JS

http://bellard.org/jslinux/ - implementacja Linux w JS

Nowy język autorstwa Andersa Hejlsberga (twórca C#) Nadzbiór Javascript

Nie trzeba uczyć się nowej składni Silnie typowany Javascript

Klasy, interfejsy, dziedziczenie, modyfikatory dostępu, ... Częściowa zgodność z propozycją ECMAScript 6 Refactoring, wsparcie Visual Studio

Kompilowany do Javascript!

TypeScript

Demo

TypeScript

Strategie - HTML 5 i aplikacje mobilne

OS platform

Przeglądarka obsługująca HTML 5

Mobilna strona

Natywna platforma aplikacyjna

Rozwiązania hybrydoweCross-kompilacja

Titanium (Appcelerator)…

Frameworki Javascript

Apache Cordova (PhoneGap)AppMobi…

JQueryMobileSenchaTouchJoPropulsion…

Demo

jQuery Mobile

Dostęp do natywnych funkcji z poziomu JavaScript Inaczej niż w Windows 8 – opakowana kontrolka przeglądarki

PhoneGap – popularna dystrybucja Apache Cordova Obecnie własnością Adobe PhoneGap Build Service

Aplikacje mogą być zgłaszane do sklepów Windows Phone, Android, iOS, Symbian, BlackBerry, ...

Windows 8 póki co nie – może nie mieć sensu Windows Phone 8 – nadal ma zastosowanie, pełne wsparcie

Apache Cordova

PhoneGap i Windows Phone

Demo

PhoneGap i Windows Phone

Mimo wszystko większe możliwości Lepsza integracja z urządzeniem Większa wydajność niż PhoneGap Wygodniejsze pisanie (subiektywne) i debugowanie

Decyzja na podstawie celu, budżetu, projektu, wiedzy zespołu

Natywne aplikacje

Wspólne jądro systemu – Windows NT Te same komponenty systemowe

Sieć, kernel, grafika, system plików, multimedia Wspólny model sterowników Obsługa wielu rdzeni w Windows Phone Solidna, nowoczesna platforma do przyszłej rozbudowy

Ten sam CLR Nie oznacza to dokładnie tego samego API

Obecnie - wiele podobieństw W przyszłości - na pewno bardzo dużo wspólnego kodu

Windows Phone 8 i Windows 8

Windows Phone 8 API

• Aplikacje managed wykorzystujące WP 7.1, WP 8.0 .NET oraz WinPRT API

• Natywne aplikacje wykorzystujące WinPRT i Win32

• Gry wykorzystujące WP 7.1 XNA Framework

• Gry wykorzystujące Direct3D lub DirectX

.NET API for Windows

Phone

Windows Phone

Runtime

Win32 & COM

Managed Managed & Native

Native

WP7.1 XAML & C#/VB

WP8.0 XAML & C#/VB

WP8.0 XAML & C++

WP8.0 Games DirectX/Direct 3D & C++

WP7.1 XNA & C#/VB

WP8.0 XAML & C#/VB with Direct3D Graphics

Kod natywny (C++) Współdzielenie większości kodu Wspólny kod gier wykorzystujących DirectX / Direct3D

HTML 5 np. PhoneGap, własne rozwiązanie hybrydowe lub strony mobilne Ten sam silnik Internet Explorer 10!

C# / VB.NET Dla programistów WP 8 – wiele klas współdzielonych z WinRT Drobne różnice w podstawowym API (zwłaszcza widoki)

Windows Phone 8 i Windows 8 – c.d.

Zarządzany kod Wszystkie API z Windows Phone 7.1

Przestrzenie nazw System oraz Microsoft.Phone Wiele nowych klas dodanych w WP 8, np.:

Microsoft.Phone.Wallet Microsoft.Phone.Tasks.ShareMediaTask Microsoft.Phone.Tasks.MapsTask Microsoft.Phone.Storage.ExternalStorage Microsoft.Phone.Networking.Voip …

.NET API for Windows Phone

Podzbiór pełnego WinRT + dodatki specyficzne dla telefonu

Windows (Phone) Runtime zaimplementowane w C++Projekcje do C#, VB.NET, C++Obecnie brak projekcji do HTML5/JavaScript

Windows Phone Runtime API

Pełny WinRT (ok. 11,000 obiektów)

Podzbiór przeniesiony do Windows Phone

Runtime (ok. 2,800 obiektów)

Nowe dla Windows Phone

Runtime (ok. 600

obiektów)

Specyficzne dla Windows Phone (wybrane):

• Synteza i rozpoznawanie mowy• VOIP• Windows.Phone.PersonalInformati

on• LockScreen,LockScreenManager• Wszystkie i dodatki

Wspólne API dla WinRT i WinPRT

Wybrane wspólne przestrzenie nazw i klasy

• Windows.ApplicationModel.Package• Windows.ApplicationModel.Activation• Windows.ApplicationModel.DataTransfer• Windows.ApplicationModel.DataTransfer.DataTransfer

Manager• Windows.ApplicationModel.Store• Windows.Devices.Geolocation• Windows.Devices.Sensors.Accelerometer• Windows.Devices.Sensors.Compass• Windows.Devices.Sensors.Gyrometer• Windows.Devices.Sensors.Inclinometer

• Windows.Foundation.IAsyncAction• Windows.Foundation.IAsyncOperation(TRes

ult)• Windows.Graphics.Display• Windows.Networking.Connectivity• Windows.Networking.Proximity• Windows.Networking.Sockets• Windows.Storage• Windows.Storage.Pickers• Windows.System.Launcher• Windows.System.Threading.Threadpool• …

• Wszystkie

W kilku przypadkach, WinPRT API oferują podobne funkcjonalności do .NET API z WP 7.5, np.:

Możemy skorzystać z dowolnego APIDeweloperzy adresujący WP 7.1 oraz WP 8 będą preferowali .NET APIDeweloperzy myślący o współdzieleniu kodu pomiędzy Windows Phone 8 i Windows 8 będą skłaniali się do WinPRT API

Przypadki duplikacji w API

.NET API Windows Phone Runtime API

System.IO.IsolatedStorage Windows.Storage

System.NET.Sockets Windows.Networking.Sockets

System.Threading.ThreadPool Windows.System.Threading.ThreadPool

Microsoft.Devices.Sensors Windows.Devices.Sensors

Oprócz .NET i WinPRT API, dostęp do niektórych Win32 API, np.:

Winsock do niskopoziomowego oprogramowania połączeńCamera APIs dla aplikacji natywnychCOM APIs takie jak CoInitializeEx, CoTaskMemAlloc, CoTaskMemFree, CreateFile2, ReadFile, WriteFile, HeapAlloc, CreateMutexExW, WaitForSingleObjectW, …

Głównie dla programistów piszących w kodzie natywnym

Możliwość dodania referencji w projekcie managed (rzadko potrzebne)

Win32 i COM API

Demo

WinPRT i WinRT - podobieństwa

Namespace’y XAML WP – xmlns:imgsch="clr-namespace:ImageSearch;assembly=…" W8 – xmlns:imgsch="using:ImageSearch"

Event handlery WP – System.Windows.RoutedEventArgs W8 – Windows.UI.Xaml.RoutedEventArgs

Nawigacja WP – NavigationService.Navigate(new Uri("/page.xaml?Id=5", UriKind.Relative)); W8 – Frame.Navigate(typeof(DetailsPage), e.ClickedItem);

SQL CE Windows 8 - brak

Wybrane różnice

Windows Phone 7

settings = IsolatedStorageSettings.ApplicationSettings;settings["exampleSetting"] = "Hello Phone";

Windows 8

settings = Windows.ApplicationData.Current.LocalSettings;container = settings.CreateContainer(“main", ApplicationDataCreateDisposition.Always);settings.Containers["main"].Values["exampleSetting"] = "Hello Windows";

Roaming – tylko Windows 8

settings = ApplicationData.Current.RoamingSettings;

Zapis ustawień

Kontrolki XAML

Mapowanie kontrolek

Np. Panorama, PivotNp. GridView, ListView

Np. Grid, StackPanel, TextBox, ListBox, Button, itp.

Demo

Z Windows Phone do Windows 8 - różnice

Współdzielenie elementów XAML Separacja logiki i UI – wzorzec Model-View-ViewModel Wspólna logika w Portable Class Libraries Dodawanie plików jako link Własne komponenty Windows Runtime (tylko WP 8) Kompilacja warunkowa + dyrektywy preprocesora

Techniki współdzielenia kodu

Współdzielenie logiki – jak? Brak binarnej kompatybilności między projektami

Silverlight, Windows Phone, Windows 8, WPF Osobne typy class library

Trudności w utrzymaniu...

Jedno źródło Jeden projekt Jedne binaria

Wiele platform!

Portable Class Libraries

Platform / feature matrix

Demo

Portable Class Library

Model-View-ViewModel

View

ViewModel

DataBinding CommandsMessages

Model

View Service

Events

PropertyChanged

Widoki Jak wyświetlić

informację? Napisane w XAML

View Modele Jaką informację

wyświetlić? Logika interakcji

Modele Model danych Logika biznesowa ...

Platform-specific

Przenośne

Demo

Przyspieszony kurs podstaw MVVM

Architektura cross-platform

Startup

Widoki

Windows Store App

Kod platform - specific

View Modele

Modele

Portable Class Library

Abstrakcje platform - specific

Startup

Widoki

Windows Phone App

Kod platform - specific

Referencja Referencja

// W Portable Class Library public interface IFileStorage { Task SaveFileAsync(string filename, string contents);

Task<string> LoadFileAsync(string filename); }

// W ViewModelu public void Save() { _fileStorage.SaveFileAsync(Filename, Contents); }

public async void Load() { Contents = await _fileStorage.LoadFileAsync(Filename); }

Abstrakcja – interfejs

Dodawanie plików jako link

Również z Partial Classes...

Kompilacja warunkowa

Nie w Portable Class LibraryW plikach XAML – nieobsługiwaneOstrożnie i z umiarem...

Demo

Portable Class Libraries i MVVM

public abstract class ServiceBusAdapter{  public static ServiceBusAdapter Current  {    get;    set;  }

  public abstract byte[] ComputeHmacSha256(byte[] secretKey, byte[] data);}

Abstrakcja - klasa abstrakcyjna

// Windows Phone - implementacjapublic class PhoneServiceBusAdapter : ServiceBusAdapter{  public override byte[] ComputeHmacSha256(byte[] secretKey, byte[] data)  {    using (var cryptoProvider = new HMACSHA256(secretKey))    {      return cryptoProvider.ComputeHash(data);    }  }}

// Windows 8 - implementacjapublic class MetroServiceBusAdapter : ServiceBusAdapter{  private const string HmacSha256AlgorithmName = "HMAC_SHA256";  public override byte[] ComputeHmacSha256(byte[] secretKey, byte[] data)  {    var provider = MacAlgorithmProvider.OpenAlgorithm(HmacSha256AlgorithmName); //...    return hashed.ToArray();  }}

ServiceBusAdapter.Current = new PhoneServiceBusAdapter(); // Windows Phone startupServiceBusAdapter.Current = new MetroServiceBusAdapter(); // Windows 8 startup

// W Portable Class Library

var adapter = ServiceBusAdapter.Current;byte[] signatureBytes = adapter.ComputeHmacSha256(issuerSecretBytes,

Encoding.UTF8.GetBytes(token));

Wywoływanie kodu platform-specific

Kod specyficzny dla platformy Abstrakcje

Klasy abstrakcyjne Interfejsy

Przekazywanie zależności z kodu aplikacji Kontener IoC Service locator / platform abstraction layer

public class ServiceLocator{ public static IFileStorage FileStorage { get; set; } public static IPhotoChooser PhotoChooser { get; set; }}

// Rejestrowanie usługi – start aplikacji WP 7_container.RegisterType<IStateService, PhoneIsolatedStorageStateService>();

// Rejestrowanie usługi – start aplikacji Win 8_container.RegisterType<IStateService, Win8LocalStorageStateService>();

// Rejestrowanie usługi – singleton_container.RegisterType<INavigationService, Win8NaviService>(

new ContainerControlledLifetimeManager());

Dependency Injection - Unity

public class MyViewModel(IStateService stateService){

// ...}

// Wewnątrz Portable Class Library// Widok bindujemy (np. w XAML) do ServiceLocator.MainViewModelpublic class ServiceLocator{ public static MyViewModel MainViewModel {

get{ // Automatyczne wstrzykiwanie zal. do konstruktora return container.Resolve<MyViewModel>(); }

}}

Dependency Injection – c.d.

Demo

Windows Phone i Windows 8 + PCL – przykład zaawansowany

Xamarin Port Mono dla iOS (MonoTouch) i Android

MvvmCross Framework MVVM dostarczany w postaci Portable Class

Library Współdzielenie kodu ViewModeli, Modeli oraz usług między

Windows Phone, WinRT, MonoTouch i Mono for Android

Inne platformy?

Demo

MVVMCross

HTML 5 (+ PhoneGap) Niski koszt wejścia Wiele platform Niższa wydajność i mniejsze możliwości

MVVM i Portable Class Libraries Współdzielenie logiki Abstrakcje funkcjonalności platform-specific

Windows Phone 8 i Windows 8 Wiele współdzielonych elementów, ale też różnic

Podsumowanie

MVVM MVVM Light Toolkit portable fork MvvmCross

IoC Autofac Ninject portable fork Microsoft.Composition (Lightweight MEF)

Other Json.NET

Zasoby

MVVM Light toolkit (basics) http://channel9.msdn.com/Events/MIX/MIX10/EX14

MVVM Light toolkit (deep dive) http://channel9.msdn.com/Events/MIX/MIX11/OPN03

Windows 8 and MVVM Light toolkit http://blog.galasoft.ch/archive/2012/02/19/impressions-slides-and-code-from-techdays-belgium-and-netherlands.aspx

Caliburn.micro concepts http://channel9.msdn.com/Events/MIX/MIX10/EX15

Zasoby – c.d.

Daniel Plaisted’s blog

http://blogs.msdn.com/b/dsplaisted/archive/2012/08/27/how-to-make-portable-class-libraries-work-for-you.aspx

Portable Class Library MSDN documentation

http://msdn.microsoft.com/en-us/library/gg597391(v=vs.110)

Portable Class Library overview blog post blogs.msdn.com/b/dotnet

/archive/2012/07/06/targeting-multiple-platforms-with-portable-code-overview.aspx

Create a continuous client using portable libraries msdn.microsoft.com/en-us/magazine/hh852593.aspx

MvvmCross slodge.blogspot.com/2012/05/portable-class-libraries-in-mvvmcross.html

Portable Class Libraries on Channel 9 (lots of links in show notes) channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-ToolboxPortable-Class-

Libraries

Zasoby – c.d.

© 2012 Microsoft Corporation. Wszelkie prawa zastrzeżone. Microsoft, Windows oraz inne nazwy produktów są lub mogą być znakami towarowymi lub zastrzeżonymi znakami towarowymi firmy Microsoft w Stanach Zjednoczonych i innych krajach. Zamieszczone informacje mają charakter wyłącznie informacyjny. FIRMA MICROSOFT NIE UDZIELA ŻADNYCH GWARANCJI (WYRAŻONYCH WPROST LUB DOMYŚLNIE), W TYM TAKŻE USTAWOWEJ RĘKOJMI ZA WADY FIZYCZNE I PRAWNE, CO DO INFORMACJI ZAWARTYCH W TEJ PREZENTACJI.