Migrating iOS Apps to Windows Phone

Since its announcement over a year ago Windows Phone has generated significant interest from the developer community. Many have already developed for iOS and are seeking to port their applications across to Windows Phone. Whilst this would appear to require learning a new set of tools, technologies and APIs, the reality is that the migration path is well trodden and full of useful resources along the way. In this article we’ll look at some of the similarities and differences between the platforms, and how you can use the developer and designer tools to assist you in porting your application across to Windows Phone.

User Interface

One of the most important aspects of both platforms is that the user is king, which directly correlates to making the platform and all applications that run on it user centric. Both iOS, and the constraints imposed by AppStore approval, and Windows Phone, through the Marketplace certification requirements, encourage users to build highly responsive applications that don’t crash or fail during normal operation. They also provide guidance around styling and user interaction, again to allow users to build applications that look and feel as though they belong on the platform.

Windows Phone has its own differentiated style. Leading with the Metro design language the Windows Phone platform uses beautiful typography, identifiable and meaningful icons, and creative and meaningful placement of content. Importantly the platform also allows that content to breathe and come alive through the use of space and animation.

Start, Hubs and Pivot

In contrast to iOS where everything begins with the home area consisting of applications and folders, the Windows Phone Start contains an array of Live Tiles (Figure 1). Rather than simply being a mechanism for users to track and launch their favourite applications, the contents of a Live Tile can be dynamically updated to reflect the current status of the application. For example in Figure 1 the Messaging tile has been update to indicate that there are two unread messages, the People tile has been updated with images of some of the contacts on the phone and the Calendar tile includes information about the next appointment.

The Start is designed to allow users to get in, get what they need, and get out again, without necessarily opening up applications. Windows Phone 7.5 will allow users to pin different parts of an application to the Start. For example a news aggregation application would allow the user to pin one or more feeds to the Start, allowing them to quickly jump into reading that feed within the application. These tiles too can be dynamically updated either via a notification pushed from the cloud, or via a background agent, which can be used to periodically check for updates. Live Tiles are one of the signature features of Windows Phone, and as such you should consider which aspect, or perhaps multiple aspects, of your application would make sense to appear in the Start.

From the Start the user experience on Windows Phone includes a series of Hubs that are aggregation points for data within the core platform. The built in hubs are People, Pictures, Music & Video, Office, Games and Marketplace. If you take a look at the People hub, Figure 2, you’ll see that the experience is a Panorama view where the actual phone acts as a viewport, allowing the user to scroll horizontally to discover more content.

One of the important things to note about the hub, or panoramic experience, is that its best use is for aggregating data from multiple data sources. In the case of the People hub, contact information could be coming from a number of services such as Facebook and Twitter, as well as the users Exchange or mail account. Also, the entire user experience should not be jammed into a single Panorama. The Panorama should highlight top items, favorites and so on, allowing the user to drill in to get more detail.

Another unique feature of the interface is the Pivot, which is used to split a single data set, to make it easier for the user to locate the information they’re interested in. The Pivot control is used to present information in a more densely configured fashion. As an example, Outlook mobile on Windows Phone uses the Pivot control. Figure 3 illustrates the info card for a contact in the People hub where the different aspects of a contact are broken up across different Pivot items.

Another example of the Pivot in action is in a real estate application where search results can be reorganised based on suburb, price or listing date. Each of these sort orders could be presented on a different Pivot item, making it easier for the user to locate the properties that they might be interested in.

Navigation

Rather than splattering navigation controls, such as arrows, throughout the interface, Windows Phone focusses on exposing content and using that same content to allow the user to navigate through the platform. For example in the People hub the profile images in the recent list allow the user to jump into the info card for those contacts.

The Windows Phone interface is missing the visual clutter that makes up so many other mobile platforms, providing a much cleaner interface. It is all about content over chrome. There is neither a Back arrow nor soft buttons for navigation within the interface, as all Windows Phone devices must carry a hardware Back button on the front side of the device. This design decision alone allows the application to reclaim a significant portion of the screen that would otherwise have been taken up with a Back arrow, or a navigation bar.

The Back button not only allows the user to navigate back through the list of open applications, it will also navigate the user back through the pages of an individual application. This is collectively known as the back stack. In Windows Phone 7.5 the functionality of the Back button has been extended to permit fast application switching. By pressing and holding the Back button for a short period of time, the application switcher is displayed, Figure 4, allowing the user to quickly jump back to any application that is currently running.

In addition to the Back button there are two other buttons that all Windows Phone devices are required to have on the front side of the device. These are the Start and Search buttons, which navigate the user to the Start and Bing Search experience respectively. Whilst there is no ability for an application to intercept or integrate with these buttons directly, Windows Phone 7.5 introduces the ability to connect to the Bing Search via App Connect. This allows an application to extend the search experience, allowing a user to navigate from a search result through to an application.

Many applications designed for iOS use a tab bar to navigate between different areas within the application. There is not a direct equivalent for Windows Phone applications; instead application developers are encouraged to make minor adjustments to the architecture of their application so as to use the hub experience to aggregate information from each of the equivalent iOS tabs and then drill down to Pivot and Page views as needed for more detail. The user can then click through the content on the hub to access more detailed information on that content or access other areas of the application.

The Application Bar provides a consistent experience for exposing the actions available to the user within the context of a page. For example in the Bing Search application, shown in Figure 5, the Music, Vision and Voice icon buttons allow the user to initiate a music search, a search based on a scanning barcodes or MS Tag via the camera, or from an audio capture respectively. In the left image the Application Bar is in its default view, with only the icon buttons visible; the right image shows it expanded with additional menu items visible. Menu items are a mechanism for exposing additional, less frequent, actions to the user.

Application Lifecycle

There is a common misconception that Windows Phone doesn’t multi-task and that iOS does. In fact you could argue that both do multi-task or that neither multi-task, depending on your definition of multi-tasking. In contrast to platforms such as Windows Mobile (the predecessor to Windows Phone) or Android, neither iOS nor Windows Phone actually allow multi-tasking of applications. Only one application is permitted to execute or be active in the foreground at any given time, and when an application goes into the background it is suspended. However, both platforms allow multiple applications to be opened and will retain their state as the user moves between applications.

It’s important for application developers to understand the lifecycle of a Windows Phone application, specifically what happens when an application goes into the background, and then when it returns to the foreground. There are four application level events which are raised when the application is launched (Launching), sent to the background (Deactivated), returned to the foreground (Activated) or closed (Closing). Similar to iOS, once an application has been sent to the background, it may not necessarily ever return to the foreground.

When a Windows Phone 7.5 application is sent to the background the platform will keep the application in memory for as long as possible. Should the device run low on memory, the platform will terminate paused applications, whilst still retaining information about the state that those applications were in. These applications are still available to the user to switch to or go back to. However, rather than simply being reactivated, the application will have to be started again, returning the user to the page within the application that they were on. The platform will also restore any state information persisted by the application in either the application or page state dictionaries. The application is responsible for retrieving state information from these dictionaries and restoring the state of pages within the application. This is also referred to as “tombstoning”.

Controls

Windows Phone has a very unique style which is consistent across the core platform. The controls that come with the Windows Phone SDK have been styled so as to maintain this consistency. This includes both basic controls such as TextBlock, TextBox and Application Bar, as well as more advanced controls such as the Panorama, Pivot and Map controls.

In addition to the controls that ship with the SDK, Microsoft have also published additional controls via the Silverlight Toolkit for Windows Phone. These are available for any Windows Phone developer to use within their application, complete with source code. Again, these controls have been developed and styled so as to match the built in controls of the core platform.

Styles, Resources and Themes

In keeping with trying to encourage developers to build applications that are consistent with the core platform, there are also a number of resources that are available to all Windows Phone applications. These include brushes, used for setting foreground and background colours, and styles, used for consistency across sets of controls.

It is also possible for developers to define their own resources such as colours, fonts, styles and even templates that can be reused throughout the application. Resources can be defined at the application, page or even at the control level, depending on how widely the resource is to be reused.

Windows Phone also supports two theme settings. The user can select between Dark (white text on black background) or Light (black text on white background) themes, and they can select an Accent colour, which is used to highlight important information throughout the platform. Applications built for Windows Phone have to work properly across all theme settings. Luckily this is easily done by reusing the built in resources.

Push Notifications

You saw earlier that one of the signature features of the Windows Phone platform are Live Tiles that can be pinned to the Start. These tiles can be updated by the application itself when it’s running, through a background agent, or via a tile notification sent to the phone. There are actually three types of push notifications:

1. Tile

   Tile Notifications are used to update a Live Tile associated with a Windows Phone application. In the original release of Windows Phone Live Tiles only supported a background image, a title and a badge/count on the front of the tile. Windows Phone 7.5 added support for a back side of the tile which also includes an image and two text attributes. All of these attributes can be updated via a tile notification.

2. Toast

   Toast Notifications appear to the user in a similar style to an incoming SMS, at the top of the device as an overlay over whatever application is currently in the foreground. The user can choose to ignore or dismiss the message, or they might click on the message. In the latter case the application to which the toast message belongs would be launched. Windows Phone 7.5 introduces the ability to deep link from a toast notification which means the user may be navigated directly to a page within the application, rather than the home, or main page.

   If the foreground happens to be the application to which the toast message belongs, an event will be raised within the application, without displaying the message to the user. This allows the application to determine how the message is presented to the user.

3. Raw

   Raw Notifications are used for sending messages directly to a running application. As the name suggests raw notifications are simply an array of bytes which can contain application specific data. This style of notification is particularly useful for peer-to-peer style messaging. Unlike tile and toast notifications which will be processed by the phone regardless of whether the application is running, a raw notification can only be processed by the application if it is running. Raw notifications received by the phone while the application is not running will be discarded.

Images

Unlike iOS devices which only come in one fixed size, the physical size of Windows Phone devices can vary depending on the manufacturer. However, the resolution of all Windows Phone devices is 480 x 800. This resolution lies between the low resolution on the earlier iPhones and the higher resolution of the iPhone 4. It’s important to note that the resolution does not have the same aspect ratio as an iPhone. When migrating an application from iOS to Windows Phone, image resources will most likely need to be resized. They may also need to be cropped or adjusted in order to adapt them for the different aspect ratio of Windows Phone.

Tools

In addition to ensuring a great experience for Windows Phone users, Microsoft has gone to great lengths to deliver amazing development tools for building applications for the platform. There are two tools which can be downloaded from http://create.msdn.com and work with the same solution and project structure, allowing developers and designers to work hand in hand.

Visual Studio

Visual Studio 2010 is a best of breed IDE for developing Windows Phone applications. It provides a rudimentary design experience for laying out applications, coupled with a high productivity code editor. Developers can choose to write applications in either C# or VB.NET, with page and control layouts being defined in XAML (a specific XML format defined for WPF, Silverlight and Windows Phone applications).

Expression Blend

Designers and developers can find it easier to work in Expression Blend to design page and control layouts. As Expression Blend works with the same solution, project and files that Visual Studio does, developers and designers can work concurrently on the same application.

Expression Blend not only allows designers to build static layouts, it also facilitates the creation of multiple states, transitions and animations, and can even facilitate the wiring up of data binding. Designers can even create sample data which can be used at design time to assist with designing the application.

Architecture, Patterns and Frameworks

In porting an application from iOS to Windows Phone one of the first things to do is to work through what the visual architecture of the application is going to be. By this we’re referring to how the application is broken up into pages. Some applications have only a couple of pages; some have over a dozen pages, depending on the complexity of the application.

There are some Windows Phone specific points to consider when architecting your application.

• Windows Phone application usually consists of a home or main page, from which the rest of the application flows from.
• The home, or main page, often makes use of the Panorama control in order to provide a summary experience of the entire application.
• Rather than cross-linking between different areas of the application, Windows Phone applications often rely on the Back key to return the user to the home, or main page, so that they can switch to a different area of the application.
• There are cases where a user may deep link into a different page in the application from a pinned Live Tile, rather than starting an application with the home, or main page. In these cases you may consider having a home button to allow them to return to the home, or main page.

Project Templates

Both Visual Studio and Expression Blend ship with a number of project templates for building Windows Phone applications. There are templates that demonstrate data binding, the Panorama control and how to use the background agents introduced in Windows Phone 7.5. These are great examples of how you can build different Windows Phone applications. The Silverlight Toolkit for Windows Phone also has a sample application which again is useful for getting familiar with that toolkit.

Data Binding and MVVM

One of the most powerful techniques for building a Windows Phone application is data binding. Data binding can be used to connect data to the user interface, typically in a declarative manner. In the same way that you declare the layout for your page in XAML, you can declare what attributes you want to data bind to different properties of the source data object (also known as the DataContext). At runtime you set the data context of the page, or alternatively on a control within the page, which activate the data binding framework. By default the data binding is one way, which means that the user interface will be updated based on changes in the underlying data. However for input controls you can change this to be bi-directional, or two way, allowing the underlying data to be updated as the input controls are changed.

An extension to the concept of data binding is the Model-View-ViewModel pattern. This pattern is relatively straightforward in that you have your data model (the Model), you have your page layout (the View) and you have a class that represents the current state of the page (the ViewModel). Data binding is used to connect the View with the ViewModel. Since the ViewModel contains properties that represent the state of the View, it can be tested using unit and integration testing to validate the behaviour of the application.

MVVMLite, CaliburnMicro, WindowsPhoneMVC

There are many different interpretations of the MVVM pattern. Some require more application infrastructure than others. There are a number of frameworks that have emerged to assist developers focus on building their applications, rather than on plumbing logic. Some examples of these are:

• MVVMLite
• CaliburnMicro
• WindowsPhoneMVC

Windows Azure Toolkit for Windows Phone

Over the last couple of years the expectations of mobile users have matured beyond simple mobile applications that can exist in isolation. Now, for an application to be successful it needs to be connected to other services in the cloud. For example users expect for applications to be connected to their social network of choice, or for an application to have some cloud based storage for data so that if they lose their device their data is backed up.

Microsoft has recently released the Windows Azure Toolkit for Windows Phone, as well as a corresponding toolkit for iOS and Android, that assists developers connect their application to Windows Azure. The toolkit demonstrates how to use ASP.NET Membership services or ACS, to authenticate users, Blob, Table and Queue storage for persisting data to the cloud, and finally how to send both Tile and Toast notifications.

Mapping Resources

Microsoft has also been hard at work providing a number of online resources for migrating applications across from iOS to Windows Phone. These include a series of blog posts covering a range of areas for consideration:

Chapter 1: Windows Phone Platform introduced to iPhone application developers
Chapter 2: A New UI Paradigm
Chapter 3: Developer and Designer Tools Introduced to iPhone Application Developers
Chapter 4: C# programming introduced to Objective-C programmers
Chapter 5: Image Format Considerations in migration of iPhone applications to Windows Phone
Chapter 6: Application Lifecycle Differences Between Windows Phone and the iPhone
Chapter 7: iPhone to Windows Phone Application Preference Migration
Chapter 8: Introduction to Windows Phone Notifications for iPhone Developers

They have also created an API Mapping Tool which can be used to address specific issues that are often encountered when migrating an iOS application across to Windows Phone. Starting with the iOS API you can drill down and locate references and information on how best to port that part of your application to Windows Phone.

The mapping tool and other resources for assisting with application migration from iOS to Windows Phone can be found at Windows Phone Interoperability

Why Migrate to Windows Phone?

By migrating your application across to Windows Phone you are immediately opening up another market through which you can sell your application. With Windows Phone 7.5 you have access to more markets and more languages that you can target. Your application can be free or paid, and there are a number of options to generate money via in-application ads. Microsoft has released an SDK for their AdCenter but this is limited to only a few markets at present. For other markets there are other alternative such as AdMob that have an SDK available for Windows Phone.

The other reason for migrating to Windows Phone is that it is an amazing platform on which to prototype new features. Visual Studio and Expression Blend combined allows application developers to rapidly add and change features, making it easy to respond to customer feedback. Improvements to the Windows Phone Marketplace gives developers full control as to when they release applications to the market, when updates are available and even distribute test versions of their applications. All up this makes Windows Phone a great platform to innovate and go to market with new features.