Migrating a Windows Phone 7 app to JavaScript

Applies to Windows Phone only

Migrating a Windows Phone 7 Silverlight app to a Windows Store app using JavaScript can be either a straightforward effort or a difficult one, depending on the type of app. If you are porting a simple UI app—a utility or lightweight game—JavaScript can be an effective destination platform for Windows 8 ports from Windows Phone 7, using well-known, standard web-development technologies. If you are porting an app with significant UI components or a graphics-rich environment, you should consider a Windows Store app using C++, C#, or Visual Basic and XAML.

Preparing to port a Windows Phone 7 Silverlight app to JavaScript

Porting a Silverlight Windows Phone 7 app to a Windows Store app using JavaScript requires a certain level of preparation, especially if you are new to Windows 8 development. Note these considerations:

  • You must know HTML5, CSS3, and JavaScript. For more info, see the Create your first Windows Store app using JavaScript tutorial.
  • You must understand how you can use HTML5 and CSS to reconstruct the user interface of your application. You should identify the UI elements you are using from Silverlight, and review the controls provided in HTML5 and the Windows Library for JavaScript toolkit for controls analogous to those in your Silverlight app. Then review how your UI components and containers can be expressed as HTML5 pages and elements (<div>). Some controls might require using the elements provided in the Windows.UI namespace of the Windows Runtime.
  • You must understand how to redevelop core behaviors by using JavaScript. If the functionality you need is not available in JavaScript or the WinJS , you can use a specific subset of APIs from the .NET Framework by referencing the Windows Profile run-time libraries in your application.
  • You must evaluate the assets and UI of your application to see if they can cleanly support a variety of screen resolutions, the majority of which are larger than the native Windows Phone 7 resolution of 800 x 480 pixels. Consider redrawing and redeveloping your assets if they are static bitmaps. Windows Store apps using JavaScript can also support vector images using the Scalable Vector Graphics (SVG) support provided by WWAHost and can scale them appropriately, although you should consider alternate aspect ratios (4:3, 16:9, and 16:10).

If you are porting a game or graphics-intensive application, you must use the functionality provided in the Trident graphics model, including Canvas and SVG support, for WWAHost and Internet Explorer 10. This HTML-specific graphics model includes support for 2D and 3D transformations through W3C standards-compliant CSS behaviors. For more information, please see the W3C CSS 3D Transform draft specification.

Porting a Windows Phone 7 app to JavaScript

You develop a Windows Store app using JavaScript by using JavaScript, HTML5, and CSS3. So you must redesign the presentation components of your app and redevelop them as HTML documents, and you must represent all behaviors as JavaScript and CSS behaviors. Some tips:

  • You can express individual screens as HTML pages. Within these pages, you can express containers and discrete organizational elements with <div> elements or "frames" (connected or static).
  • You can implement controls using HTML control elements and input types (such as <input> or <textarea>), or through CSS3 and JavaScript (custom interactive elements).
  • You can perform drawing behaviors with the <canvas> element in HTML5 and JavaScript.

In addition, your Windows Store app using JavaScript can take advantage of Windows-specific libraries to increase functionality and use operating system-level functions. These libraries include:

  • The WinJS -- A toolkit of JavaScript libraries that support improved event handling and DOM query behaviors, enable new control types, and provide developer-friendly patterns for other common JavaScript behaviors.
  • Trident 6.0 -- An HTML- and CSS-based model for the layout and rendering of visual components that implements Canvas for the real-time drawing and manipulation of bitmap graphics, and Scalable Vector Graphics (SVG) support for vector graphics. (Trident 6.0 is the set of libraries used by Internet Explorer 10 for the display of content, and can be used to support additional graphics and rendering behaviors.)
  • The Windows Runtime -- OS-level functions made available to JavaScript.

The following table provides a list of Silverlight APIs and their Windows Runtime counterparts (as made available to JavaScript). This table does not suggest a one-to-one mapping of functionality; one platform may have more or less functionality than its counterpart. Also note that some Windows Runtime APIs are not available to Windows Store apps using JavaScript, such as the Windows.UI.Xaml namespaces and types. This is because HTML5 provides user interface elements, behaviors, and rendering for you to use instead.

API typeSilverlight API namespacesWindows Runtime API namespaces (C#/Visual Basic)
DevicesMicrosoft.Devices, Microsoft.Devices.Radio, Microsoft.Devices.Sensors Windows.Devices.Enumeration, Windows.Devices.Enumeration.Pnp, Windows.Devices.Input, Windows.Devices.Sensors
Windows Phone app model and environmentMicrosoft.Phone, Microsoft.Phone.Info, Microsoft.Phone.Notification, Microsoft.Phone.Reactive, Microsoft.Phone.Shell, Microsoft.Phone.Tasks Windows.Networking.PushNotifications, Windows.Devices.Sms, Windows.ApplicationModel.Background, Windows.ApplicationModel.Contacts, Windows.ApplicationModel.Contacts.Provider, Windows.ApplicationModel.Core
MapsMicrosoft.Phone.Controls.Maps, Microsoft.Phone.Controls.Maps.AutomationPeers, Microsoft.Phone.Controls.Maps.Core Microsoft.Phone.Controls.Maps.Design Microsoft.Phone.Controls.Maps.Overlays, Microsoft.Phone.Controls.Maps.Platform Windows.Devices.Geolocation
MarketplaceMicrosoft.Phone.Marketplace Windows.ApplicationModel.Store
Networking and syndicationMicrosoft.Phone.Net, Microsoft.Phone.Net.NetworkInformation Windows.Networking, Windows.Networking.BackgroundTransfer, Windows.Networking.Connectivity, Windows.Networking.NetworkOperators, Windows.Networking.Sockets, Windows.Web.AtomPub, Windows.Web.Syndication
Programming and data modelsSystem Windows.Foundation, Windows.Foundation.Collections, Windows.Foundation.Metadata, Windows.Data.Xml.Dom, Windows.Data.Xml.Xsl, Windows.Data.Json
LocationSystem.Device.Location Windows.Devices.Geolocation, Windows.Networking.Proximity
Automation and diagnosticsSystem.Diagnostics, System.Windows.Automation.Peers Windows.Foundation.Diagnostics
Graphics (3D transforms)XNA Framework Class Library, Content Pipeline Class Library No equivalent at this time.
Controls and UI infrastructureMicrosoft.Phone.Controls, Microsoft.Phone.Controls.Primitives, Windows.UI.ApplicationSettings, Windows.UI.Core, Windows.UI.Input, Windows.UI.Notifications, Windows.UI.ViewManagement
StorageSystem.IO.IsolatedStorage class Windows.Storage, Windows.Storage.FileProperties

 

You can access much of the .NET Framework Class Library by using the Windows Runtime. Silverlight functionality that is not specific to the Windows Phone platform typically has a counterpart API in the .NET Framework Class Library. For example, classes and methods available in the Silverlight version of the System and System.Diagnostics namespaces may also be available in the Windows Runtime as their .NET Framework counterparts. For the complete set of .NET Framework APIs available in Silverlight, and which may also be accessible in the Windows Profile, see the Silverlight class reference documentation.

Note  The Windows Profile provides a wrapper for over 12,000 of the .NET Framework APIs. However, not all of the .NET Framework APIs are currently supported. For a complete list, please refer to the Windows Profile API documentation.

Note  If you want to create a graphics-rich experience for your ported Windows Phone 7 Silverlight app (such as a game) and you don't want to use the XAML or JavaScript models because of the limitations of those models, consider porting it to a C++ app with DirectX.

 

 

Show:
© 2014 Microsoft