{"id":483,"date":"2014-04-08T08:30:00","date_gmt":"2014-04-08T08:30:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2014\/04\/08\/building-windows-phone-8-1-apps-in-html\/"},"modified":"2022-10-03T10:52:27","modified_gmt":"2022-10-03T17:52:27","slug":"building-windows-phone-8-1-apps-in-html","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/building-windows-phone-8-1-apps-in-html\/","title":{"rendered":"Building Windows Phone 8.1 Apps in HTML"},"content":{"rendered":"

Last week at the BUILD<\/a> conference, we announced<\/a> 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\u2019ve 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.<\/p>\n

Universal Apps<\/h2>\n

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<\/a> 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.<\/p>\n

We provide three universal App project templates to get you started.<\/p>\n

\"Universal<\/a><\/p>\n

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<\/a>.<\/p>\n

The first thing you\u2019ll notice about universal apps is their project structure:<\/p>\n

\"Universal<\/a>You 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.<\/p>\n

Once you\u2019ve created your project, you\u2019ll 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\u2019re currently focusing on to ensure you\u2019re getting the best coding experience, including IntelliSense for just those APIs that work on your current platform:<\/p>\n

\"Current<\/a><\/p>\n

For example, if you switch to coding for Windows 8.1, Visual Studio won\u2019t show you APIs that only work on Windows Phone 8.1. When there are APIs that don\u2019t exist on all of your target platforms, Visual Studio flags the APIs for you:<\/p>\n

\"Flags<\/a><\/p>\n

You can learn more about the Context Switcher along with other great tips for building Universal Apps in the following Build session<\/a>.<\/p>\n

The Device Panel<\/h2>\n

Blend\u2019s 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\u2019s themes and accent colors.<\/p>\n

\"Configuration<\/a><\/p>\n

Debugging and Diagnostics<\/h2>\n

All of the debugging and diagnostics features for Windows Store apps are available for Windows Phone development as well:<\/p>\n

\"Debugging<\/a><\/p>\n

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

Manifest Designer<\/h2>\n

An important part of defining your app\u2019s 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.<\/p>\n

\"Manifest<\/a><\/p>\n

Where to Get It<\/h2>\n

To start building an app that supports Windows Store and Windows Phone with HTML using universal projects, install Visual Studio 2013 Update 2 RC<\/a>. If you don\u2019t already have Visual Studio 2013, you can download Visual Studio Express 2013 for Windows with Update 2<\/a> for free.<\/p>\n

If you have any questions or comments, feel free to comment below or post on the forums<\/a>!<\/p>\n

Cheers,<\/p>\n

Jordan & Kirupa<\/p>\n\n\n\n
\"clip_image012\"<\/a><\/td>\nJordan Matthiesen<\/strong> (@JMatthiesen<\/a>) and Kirupa Chinnathambi<\/strong> (@kirupa<\/a>) are Program Managers in the Client Platform team inside Visual Studio.<\/p>\n

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.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

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\u2019ve made many improvements to Visual Studio 2013 and Blend for Visual […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4980,155],"tags":[135,5,136,9,137,376,124,185,129,147,12,126,133],"class_list":["post-483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-visual-studio","tag-blend","tag-csharp","tag-css","tag-debug","tag-html","tag-java","tag-javascript","tag-node-js","tag-universal-apps","tag-update","tag-visual-studio","tag-visual-studio-2013","tag-xaml"],"acf":[],"blog_post_summary":"

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\u2019ve made many improvements to Visual Studio 2013 and Blend for Visual […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=483"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/483\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}