Maximizing code reuse between Windows Phone 8 and Windows 8

Ken Cenerelli@KenCenerelli

kencenerelli.wordpress.com

Agenda• Part 1: Hardware Overview

• Platform APIs

• Shared Core

• Part 2: Development Techniques

• MVVM Project Structure

• Portable Class Libraries

• Shared XAML UI

• Sharing Code with Partial Classes

• Wrap-up

• Next Steps, Resources & Q & A

Part 1: Hardware Overview• We are on the path to Windows and

Windows Phone convergence

• Right now Windows 8 and Windows Phone 8 have a shared core but you cannot write once and run everywhere (unlike iOS or Android)

• We can however leverage some existing architecture similarities between the two

Some Key Differences• It’s important to design for the platform

differences as well as similarities

Windows 8 Platform

Windows Phone 8 Platform

Shared APIs

What Shared Core Means• OS components such as the kernel,

networking, graphics support, file system and multimedia are the same on both Windows 8 and Windows Phone 8

• Hardware manufacturers work with the same driver model on both platforms

• Windows Phone gets the support for multi-core and other hardware features that Windows has had for years

• These solid, common foundations makes it easier to extend the Windows platform into the future

What Shared Core Doesn’t Mean• Windows 8 and Windows Phone 8

developers work to exactly the same APIs• (though you will see more commonality as new

features are introduced to both platforms in the future)

Part 2: Development Techniques• Four examples of how you can approach

code reuse:• MVVM project structure

• Portable Class Libraries

• Shared XAML UI

• Add As Link (Partial Classes)

• Accelerate your app development with these methods

• Not all will work in every situation

MVVM - Overview• MVVM is an architectural pattern:

• Relies on features XAML/C# provide

Why use MVVM?• Loose coupling between UI and code

• Enables reusability

• Separation between UX designer & developer

• Increased testability

MVVM components• Model• Data or business logic

• Database, Web Services, File System, etc.

• View Model• A specialization of the Model that the View uses

• Informs the view to update

• No UI code

• View• Represents the user interface the user sees

• Should contain a minimal amount of code

MVVM for code reuse• Create a separate UI for each platform to

take advantage of the different screen sizes

• MVVM by itself doesn’t help us for sharing code across platforms – only on the same platform

• Use Portable Class Libraries to share models and view models across platforms

Demo 1:MVVM Project Setup

Portable Class Libraries - Overview• Portable Class Libraries have been available

since .NET Framework 4

• Portable assemblies can target multiple platforms, including Windows 7, Windows 8, Windows Phone, Silverlight, and Xbox 360

• Only allowed to call APIs available across multiple platforms

• Note: the Express versions of Visual Studio 2012 don’t include a Portable Class Library project template. It is available only in Visual Studio 2012 Pro or greater

Portable Class Libraries – What To Share• Any managed code you write, particularly app logic

• Do not share conditional compilation code (code for WP8 that you want to implement differently for Windows 8)• Instead, abstract away the platform-dependent code and share

only the portable, platform-independent code

• Windows Runtime APIs aren’t portable and can’t be used in a Portable Class Library• There is overlap in the Windows Runtime APIs that are supported

on WP8 and Windows 8. However, binary compatibility is not supported. Your code has to be compiled for each platform

• Doesn’t use UI constructs • Although XAML for WP8 and Windows looks similar this code isn’t

portable

Portable Class Libraries & MVVM

Demo 2:Portable Class Library

Shared XAML UI - Overview• Isolate parts of your UI into user controls and

attempt to share those. Windows Phone 8 and Windows 8 both support XAML user controls

• New controls take advantage of form factors

• Consider the Windows Phone when designing the Windows 8 SnapView

• Limitations• XAML on Windows Phone 8 and XAML on Windows 8

is not binary compatible

• Namespace prefixes are different in XAML for Windows Phone 8 and XAML for Windows 8

Shared XAML UI – What To Share?

Demo 3:Shared XAML UI

Sharing Code - Overview• Change once, Change everywhere

• Approaches:• Add as Link

• #if conditional blocks

• Partial Classes and Methods

Add As Link - Overview• Use this technique for any code you’re

able to isolate that’s platform-independent and used in both apps• eg. User controls with no platform

dependencies.

• This is particularly useful when you’re trying to share code that uses a Windows Runtime API that can’t be shared inside a Portable Class Library

#if Conditional Blocks - Overview• Pros:• Enable/Disable lines or chunks of code based on

compilation platform

• Existing compilation constants• NETFX_CORE Windows 8• WINDOWS_PHONE Windows Phone 8

• Useful for when there are subtle differences in syntax or methods

• Cons:• A downside is it can make code unreadable

Partial Classes - Overview• Can put shared functionality in one code

file and platform specific code in additional code file

• Classes are marked as partial and compiled into a single class

• Separates platform specific features

• Can use partial methods as a mechanism to separate out platform specific logic

Demo 4:Creating a Partial Class

Actions to continue your learning

•Build a project in both Windows 8 and Windows Phone 8

•Create a Portable Class Library to link the two projects

•Choose one other development technique to extend your code between both projects

Resources for Attendees• Channel 9: Building Apps for Both Windows

8 and Windows Phone 8 Jump Start http://bit.ly/18dELOu

• Maximize code reuse between Windows Phone 8 and Windows 8 http://bit.ly/11TfzOl

• How to Make Portable Class Libraries Work for You http://bit.ly/116yIL4

• Channel 9: Create Cross-platform Apps using Portable Class Libraries http://bit.ly/1906wv8

Questions?• Ken_Cenerelli@Outlook.com

• @KenCenerelli

• kencenerelli.wordpress.com