Before reading further, readers should know:<\/p>\n
To sum up — me: knucklehead. Windows: alien territory.<\/p>\n
Onward.<\/p>\n
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.<\/p>\n
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.<\/p>\n<\/li>\n
Boot your brand new Windows 8 VM! Don’t let the fact that your virtual sound card is broken dampen your spirits.<\/p>\n
Stare at the brave new tablety world that is Windows 8<\/a>. This doesn’t look like XP at all. You are… kind of intrigued, actually. Your Mom, however, is going to be super-pissed.<\/p>\n<\/li>\n Click the Visual Studio 11<\/strong> square-thingy. Start a JS project and choose one of the built-in templates.<\/p>\n 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<\/a>. I’m sure it’s awesome.<\/p>\n<\/li>\n Delete all Important:<\/strong> 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<\/a>!) Otherwise, copying and pasting will cause Visual Studio 11 to stomp over all the IDs in the HTML, breaking your project. Yes, really.<\/p>\n Now you’re going to need some code. So fire up Internet Explorer — might as well go all-in on this Microsoft stuff.<\/p>\n<\/li>\n Go to yuilibrary.com<\/a> and view the TODO App Example<\/a>, a toy single-page app that demonstrates how to use the YUI 3 App Framework<\/a>. Scroll down to the bottom of the page, copy the complete TODO example, and paste it into 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<\/a>. Select the modules Return to the project in Visual Studio. Right-click the In In the From the Build<\/strong> menu, click Deploy<\/strong>. This builds your app and then side-loads it into your Windows environment, all in one step.<\/p>\n<\/li>\n 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.<\/p>\n<\/li>\n<\/ol>\n 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.<\/p>\n 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.<\/p>\n 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:<\/p>\n 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.<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,3],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","hentry","category-howto","category-web"],"_links":{"self":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":3,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/466\/revisions\/599"}],"wp:attachment":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}script<\/code> and link<\/code> references to WinJS and related CSS assets from the main default.html<\/code> web page.<\/p>\n<\/li>\ndefault.html<\/code>. Good artists copy, great artists steal.<\/p>\n<\/li>\nevent-focus<\/code>, json<\/code>, model<\/code>, model-list<\/code>, and view<\/code> 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<\/strong>.<\/p>\n<\/li>\n\/js<\/code> folder and add an existing file. Browse to the Downloads folder and add the combo.js<\/code> file. When the file is imported to your project, feel free to rename it to yui-todo.js<\/code> or something else meaningful.<\/p>\n<\/li>\ndefault.html<\/code>, add a script element with a src of \/js\/yui-todo.js<\/code> above all other script elements.<\/p>\n<\/li>\nYUI().use()<\/code> call, replace the list of module names with just '*'<\/code>.<\/p>\n<\/li>\n\n
Observations<\/h2>\n
\n
YUI().use('*')<\/code>. Obviously, the way I actually created that rollup is a huge hack.<\/li>\nPostscript for Future Microsoft App Store Employees<\/h2>\n