Building Windows Phone 8.1 Apps in HTML

Building Windows Phone 8.1 Apps in HTML

Rate This
  • Comments 17

Last week at the BUILD conference, we announced that you can now build apps for Windows Phone 8.1 using HTML, CSS, and JavaScript using much the same techniques you use for building Windows 8.1 Store apps today. To help you build these apps, we’ve made many improvements to Visual Studio 2013 and Blend for Visual Studio 2013. In this post, we highlight a handful of the cool and new improvements that you might find useful, with a particular focus on the universal Windows app technology.

Universal Apps

With the latest updates to Windows 8.1 and Windows Phone 8.1, you can create universal Windows apps for a common Windows runtime using XAML/C#/C++/VB or HTML/JS. Practically speaking, that means you can share most or all of your code and assets between Windows 8.1 Store and Windows Phone 8.1 apps. To make this sharing easier, in the Visual Studio 2013 Update 2 RC we added a new project type called Universal Apps. Universal apps offer an improved project structure that makes it easier for you to share your common code between platforms, while separating your platform-specific HTML, CSS, and JavaScript source.

We provide three universal App project templates to get you started.

Universal App Project Templates

The Blank app includes just the basics to let you bring their own assets and code. The Hub/Pivot app offers a good example of similar content shown in different container controls. The Navigation app starts you off with the infrastructure you need to build navigation within a single page app (SPA). You can learn more about these kinds of projects on MSDN.

The first thing you’ll notice about universal apps is their project structure:

Universal App Project StructureYou will see three project nodes: one for Windows Store, Windows Phone, and Shared. Code and content that is specific to Windows Store will reside in your Windows Store project. Similarly, code and content specific to Windows Phone will reside in your Windows Phone project. Your Shared project will contain all of the code and content that is intended to be shared across your Store and Phone projects.

Once you’ve created your project, you’ll likely want to focus on building your app for each platform in turn. The context switcher, located within the navigation bar at the top of shared files, lets you switch the platform you’re currently focusing on to ensure you’re getting the best coding experience, including IntelliSense for just those APIs that work on your current platform:

Current Platform

For example, if you switch to coding for Windows 8.1, Visual Studio won’t show you APIs that only work on Windows Phone 8.1. When there are APIs that don’t exist on all of your target platforms, Visual Studio flags the APIs for you:

Flags on APIs that don't exist on all your target platforms

You can learn more about the Context Switcher along with other great tips for building Universal Apps in the following Build session.

The Device Panel

Blend’s Device Panel enables you to preview your app in different orientations, resolutions, and dimensions without requiring you to deploy to multiple devices. The Device Panel now supports Phone apps. You will see an updated set of device configurations applicable to phones within the list of available displays. In addition, there are configurations for Windows Phone’s themes and accent colors.

Configuration for Windows Phone's Themes and Accent Colors

Debugging and Diagnostics

All of the debugging and diagnostics features for Windows Store apps are available for Windows Phone development as well:

Debugging and Diagnostics features

One area that is especially important for mobile devices is app performance. To help with this, the UI Responsiveness Tool and Memory Analyzer can help in diagnosing performance issues. The UI Responsiveness tool shows you a clear chart of where your application spends time rendering your app’s visuals. The Memory Analyzer enables you to see where memory is being allocated, freed, and held over time.

Manifest Designer

An important part of defining your app’s look and feel is ensuring visual assets, such as the logo and splash screen, distinguish your app from the crowd. The manifest designer makes it easy to provide Windows Phone assets within your app. If you are creating a universal project, the manifest designer enables you to specify visual assets for both your Windows Phone and Windows Store apps.

Manifest Designer

Where to Get It

To start building an app that supports Windows Store and Windows Phone with HTML using universal projects, install Visual Studio 2013 Update 2 RC. If you don’t already have Visual Studio 2013, you can download Visual Studio Express 2013 for Windows with Update 2 for free.

If you have any questions or comments, feel free to comment below or post on the forums!

Cheers,

Jordan & Kirupa

clip_image012

Jordan Matthiesen (@JMatthiesen) and Kirupa Chinnathambi (@kirupa) are Program Managers in the Client Platform team inside Visual Studio.

When they are both not busy posing for photos or writing bios of themselves, they spend a lot of time thinking about how to provide great tooling experiences for HTML, CSS, and JavaScript developers.

Leave a Comment
  • Please add 4 and 6 and type the answer here:
  • Post
  • Amigos, mucho plantel de novedades, y yo que soy representante de unas pagina web, como encuentro donde registar esos enlaces y como enviarlos, a mas personas, es lo que me preocupa a mi, y me parece que no caza, con estas instruciones

  • Is there any performance concerned compare with C#/Xmal?

  • Why In New Projects > Javascript > Windows Store App on My Computer is not exist Universal apps projects? please you can do a tutorial about it?

  • If I install the Update 2 RC will I need to re-update/reinstall VS or something when the release of Update 2 happens?

  • gogoqaz - the performance is comparable for many tasks, but it depends on what you are trying to build. This article should help you out further: msdn.microsoft.com/.../dn574803.aspx

  • nguyenlamzx - do you have Update 2 RC installed? You can download it from the following link: www.microsoft.com/.../details.aspx

    If you do have it installed, what is the version number you see in Help | About.

  • Miksa - no, you won't. When the final Update 2 hits, you should be able to install over your current RC installation :-)

  • Is there a way to deploy to the phone without connecting it to Visual studio? I've a few phones which i have to test before putting the application into app store. Thanks.

  • After installing update 2, I did not have Universal Apps under Javascript/Store Apps as well.  I have VS Ultimate, with various extensions installed.  I do remember installing the "Visual Studio Extensions for Windows Library for Javascript" update that was recent, so I don't know if that messed with the update 2 install.  I do have Universal templates under C#.  I tried installing update 2 twice.  I will try to revisit these comments in case anyone has suggestions for me.  Thanks...

  • @Michael - if you installed the update for Visual Studio Extensions for Windows Library for JavaScript, there is a known bug in the Update2 RC that will cause it to not install the JS templates.  You will need to uninstall Update2 RC, then uninstall the Extensions for Windows Library for JS, and then reinstall Update2 RC in order to make the templates appear.

  • Gearard, I will try that as soon as I get a chance.  I look forward to trying out WP8.1 javascript support.  Thank you very much for the response.

  • I uninstalled the extensions for javascript v2, uninstalled update 2, then reinstalled update 2, but still don't get the universal templates under javscript.  I guess I'll have to just wait for the final version, and hope that I don't have to completely uninstall VS.net, as I don't want to spend the time to do that.  Thanks!

  • Building apps with HTML is on par with building bridges with jello. At this point Microsoft has the numbers which show that the HTML/Javapuke layer on top of WinRT is a disaster. Please stop pushing this absolutely brain dead approach to software development.

  • Can I use any javascript frameworks that are available like Angular.js and Knockout.js ,entena, Jquery to develop Windows phone 8.1 and Windows 8.1 and XboxOne app

  • Can any one tell me how to get Device token in Windows phone programming

Page 1 of 2 (17 items) 12