Before reading further, readers should know:

• I am a knucklehead.
• I am not an engineer by any means.
• I have no Windows development experience whatsoever. I do not know anything about the Windows developer stack.
• My last Windows machine at home was a homebrew PC in 2002. That year, I switched to OS X. The last Windows machine I used at work was in early 2005.
• The procedure below does things the stupid way, rather than the right or elegant way.

To sum up — me: knucklehead. Windows: alien territory.

Onward.

A Suboptimal Workflow for Metro App Development with YUI 3

1. Download the Windows 8 Developer Preview. Install the ISO as a VM using VirtualBox, Fusion, or Parallels. FWIW, I used Parallels with 2 GB RAM on a 30 GB volume.

   Marvel at the fact that Windows installations take a lot less time today than they did on 2002-era hardware. Click through license agreements with enthusiasm. But don’t sign up for Live.

2. Boot your brand new Windows 8 VM! Don’t let the fact that your virtual sound card is broken dampen your spirits.

   Stare at the brave new tablety world that is Windows 8. This doesn’t look like XP at all. You are… kind of intrigued, actually. Your Mom, however, is going to be super-pissed.

3. Click the Visual Studio 11 square-thingy. Start a JS project and choose one of the built-in templates.

   It’s… a single-page web app! It uses a brand new JavaScript framework called Win-NIH.js. No, it’s actually called WinJS. It’s even documented. I’m sure it’s awesome.

4. Delete all script and link references to WinJS and related CSS assets from the main default.html web page.

5. Important: disable Visual Studio’s auto-id-mangling by going to Tools -> Options -> Text Editor -> HTML -> Miscellaneous and unchecking “Auto ID elements on paste in Source view”. (Thanks, Hardy Erlinger!) Otherwise, copying and pasting will cause Visual Studio 11 to stomp over all the IDs in the HTML, breaking your project. Yes, really.

   Now you’re going to need some code. So fire up Internet Explorer — might as well go all-in on this Microsoft stuff.

6. Go to yuilibrary.com and view the TODO App Example, a toy single-page app that demonstrates how to use the YUI 3 App Framework. Scroll down to the bottom of the page, copy the complete TODO example, and paste it into default.html. Good artists copy, great artists steal.

7. Now it’s time to load the YUI library itself, or at least the modules that power the YUI 3 TODO app. Go to the YUI 3 Dependency Configurator. Select the modules event-focus, json, model, model-list, and view in the configurator, copy the resulting combo-load URL, and paste that URL into a new IE tab. IE will offer to open or save the JavaScript file. Click Save.

8. Return to the project in Visual Studio. Right-click the /js folder and add an existing file. Browse to the Downloads folder and add the combo.js file. When the file is imported to your project, feel free to rename it to yui-todo.js or something else meaningful.

9. In default.html, add a script element with a src of /js/yui-todo.js above all other script elements.

10. In the YUI().use() call, replace the list of module names with just '*'.

11. From the Build menu, click Deploy. This builds your app and then side-loads it into your Windows environment, all in one step.

12. Go back to the main Windows 8 tablety area. Scroll all the way to the right, and you will see your TODO app, with a generic black icon. Single-click to launch.

Congratulations! You’ve built, deployed, and run your first JS-style Metro app. It works exactly like the browser version. Except you can’t exit the app. Hahaha! You’re going to have to throw away your VM and start over.

Kidding. To quit the Metro app, hit the CMD button. To make changes, you’ll want to delete the deployed app from your environment before attempting to rebuild and redeploy the app again.

Elapsed time from launching Visual Studio (knowing nothing) to a deployed Metro app (still knowing nothing): a little under an hour. I actually wasted most of that time on other things:

• Stumbling around an unfamiliar UI, figuring out how to navigate around etc.
• Fooling around in Visual Studio — looking at the source files, building and deploying one of the default projects, building and deploying a static HTML page with one JS function all as a Hello World project, etc.
• The big one, the ID-stompage problem. This eventually required doing a Debug build. I have no idea how to use the Visual Studio debugger, and it slows things down tremendously, but it does generate some JS console log output for you when you go back to run the app.

Observations

• Despite running into a serious bug in Visual Studio 11, I was really impressed that the whole thing worked as advertised. You are not locked into WinJS at all. If it runs in IE 10, it should build as a Metro app. I dig it.
• As You Know Bob, in the browser YUI 3 is meant to load a small seed file, and then asynchronously load module files from a server or CDN running a combo-loader. For Metro apps, we’re subverting this process by hand-crafting a physical rollup file of the modules we need and calling YUI().use('*'). Obviously, the way I actually created that rollup is a huge hack.
• I haven’t actually tested the YUI 3 Loader in Metro — it would be neat if it worked — but the loader is probably not all that relevant for creating Metro apps anyway.
• I don’t really know Visual Studio at all, so I don’t know how to develop iteratively there very well. Also, if you need to track down a runtime error, doing a Debug build is particularly painful. I’m sure Visual Studio experts know exactly how to do this stuff efficiently. See also: I am a knucklehead.

Anyway, my recommendation for the typical frontend engineer is to just stick with the development environment you like. Build and test your app in browsers, and basically just use Visual Studio as a build tool. I bet someone smarter than me knows how to automatically import code into Visual Studio and trigger a build headlessly. That would be nifty.

Postscript for Future Microsoft App Store Employees

If you have been wondering why you keep having to reject submissions of this weird “YUI 3 TODO app” — well, this post is probably why. My sincere apologies.