Updating a Windows 8 JavaScript app from RC to RTM

Now that the Windows 8 RTM version is available to MSDN Subscribers (and a 90-day trial version is available for non-subscribers), it’s a good time to update your app to the RTM version of Visual Studio 2012. Updating to RTM is required to submit an app for the Windows Store, and it’s a pretty painless process.

Updating WinJS

One significant change between apps built with the Visual Studio 2012 release candidate and those built with RTM is the version of the Windows Library for JavaScript (WinJS) used. WinJS has been updated for RTM, so if you’re migrating an app from RC to RTM, you’ll need to update WinJS. There are two parts to this process:

  1. First, open the solution in Visual Studio 2012 (RTM), locate the “References” node in Solution Explorer (as shown below), expand it to find the reference for the Windows Library for JavaScript, and right-click it and click “Remove”, as shown below:
    WinJSOld_2
  2. Next, right-click the References node, and click “Add Reference…”
  3. In the Reference Manager dialog, check the box next to Windows Library for JavaScript 1.0, and click “OK,” as shown below:
    RefMan_2
  4. Now that you have the right reference, use Ctrl+Shift+H to open the Find/Replace All dialog, which should default to finding for the entire solution (if not use the “Look in” drop-down to select “Entire Solution”), and replace all instances of “Microsoft.WinJS.1.0.RC” with “Microsoft.WinJS.1.0”, as shown below. NOTE: If you check the box marked “Keep modified files open after Replace All” you will be able to undo the changes, otherwise, they’ll be automatically saved for files that are not open.
    ReplaceAll_2
  5. Save all changes. At this point, your app should be able to run successfully, though you may potentially see some issues if your code is impacted by any of the changes from RC to RTM. Review the official Migration Guide for a list of the changes to HTML/CSS and JavaScript for Windows 8 RTM.

Fixing Issues

As noted above, the whitepaper “Migrating your Release Preview app to Windows 8” contains a list of the breaking changes made to the app development platform, including those for HTML/CSS/JS. If you find that there are rendering or other issues with your app once you have updated your WinJS references, you’ll need to refer to the whitepaper as a resource in troubleshooting them. For CSS issues, I also highly recommend using the DOM Explorer (available while debugging), and it’s Select Element feature, which will allow you to quickly locate in your markup any of the elements that have issues, and examine the CSS styles that are being applied to those elements.

Getting Ready for the Store

One more important step remains, which is making sure your app is ready for onboarding to the Windows Store. For Window 8 RTM, apps submitted to the store must specify an OSMinVersion and OSMaxVersionTested value of 6.2.1 in the app manifest (RP apps will have a value of 6.2.0). For new apps, this will happen automatically, so one way of dealing with this is to create a new project, and copy your existing code into it.

But for existing projects, you can edit the manifext XML directly as follows:

  1. In Solution Explorer, right-click the manifest file (package.appxmanifest), and click “View Code”.
  2. Find the “Prerequisites” section, and modify the “OSMinVersion” and OSMaxVersionTested” values to read “6.2.1”
  3. Save the file.

Get WACKed

While not directly related to migration, another important step in getting your app ready for the store is to run the Windows App Certification Kit, which I affectionately refer to as the WACK tool. WACK will examine your application for performance and other important criteria, and will produce a report with an overall Pass/Fail score, plus a list of issues found if your app fails certification by WACK. It is absolutely critical that your app be validated with the WACK tool prior to submitting for store certification, because if your app doesn’t pass WACK, it will almost certainly not pass store certification.

You can run the WACK tool directly from the Start screen, and then select the app you want to validate from a list of installed apps, but it’s a little more cumbersome to do it this way.

A quicker way is to run the WACK tool as a part of the process of creating your app package (since you need to create an app package for the test to pass anyway):

  1. Uninstall any installed version of your app by locating it in the Start screen, selecting it,
  2. Open the Store menu (in some VS versions this is found as a sub-menu of the Project menu), and click “Create App Packages…”
  3. For now, select “No” on the initial screen, as shown below, since we just want a package for testing purposes, and click “Next”.
    CreateAppPackages_2
  4. Choose the location for your APPX package, and make sure the solution configuration is set to Release, then click “Create”, as shown below:
    CreateAppPackages2_2
  5. Once the package has been created, note the paths to your package, and then click “Launch Windows App Certification Kit” to start validation on the package, as shown below:
    CreateAppPackages3_2
  6. Allow the validation test to complete before interacting with your computer again, to avoid any impact on the performance testing.
  7. Once the testing is complete, click the link below your score to view the validation report, and click “Finish” to close the tool, as shown below. If you passed, and you have a Windows Store account, you should be all set to submit your app for certification (if you don’t have a store account, visit http://aka.ms/apps, create an account, and profile your app to qualify for an App Excellence Review, which is your opportunity to get a store token before the store opens for individual developers).
    WACK_Pass_2

PS

As a postscript, if you’re a developer in the US, check out Generation App. Generation App is a great program designed to help you get from an idea to a polished app in 30 days. It includes:

  • Insider tips and tricks on Windows 8 application development.
  • Personal on-the-phone access to a Windows 8 architect*.
  • An exclusive one-on-one Metro style design consultation*.
  • An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.
  • * See site for restrictions and limitations

If you’ve already got an app idea, sign up for Generation App, and bring it to market faster!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.