Windows Universal 10 JavaScript App + Knockout.js

I finally decided to see what the universal app stuff is all about, and was ready to finally tackle XAML when, to my surprise, I found that you can write your app using JavaScript and HTML.  No thanks to the template being buried out of the way.  I figured it would have been an option once I picked Universal App just like when you create a Web App you can select WebApi, MVC, Web Forms, how accounts will be handled, ...  Thank god for channel 9.

Even though I found that I *could* do a JavaScript universal app, I figured it would be some really limited subset or quirky, but so far, it's been pretty much an outstanding process.  I was unsure what would and wouldn't work, so I decided to just throw everything I wanted into the project and see what worked.  So far, everything has worked!

In preparation for the project, I googled around about including Knockout.js into a Windows Universal 10 JS App and did not find my information.  In fact, the information that I did find turned out to not work.

I was able to use the package manager to install all of the following:

PM> Install-Package Knockoutjs
PM> Install-Package knockout.TypeScript.DefinitelyTyped
PM> Install-Package fontawesome
PM> Install-Package jquery
PM> Install-Package jquery.typescript.definitelytyped

Honestly, I feel dirty including jquery as I really only ever use the ajax and promises parts of it and should probably learn a better way of dealing with those concerns.  More on that another day.

In default.html, include knockout before the default.js file so that it is in scope when default.js runs.  Modify default.js to include a call to ko.applyBindings.

default.js:
    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
 "use strict";

 var app = WinJS.Application;
 var activation = Windows.ApplicationModel.Activation;

 app.onactivated = function (args) {
  if (args.detail.kind === activation.ActivationKind.launch) {
   if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize your application here.
   } else {
    // TODO: This application was suspended and then terminated.
    // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
   }

   args.setPromise(WinJS.UI.processAll().then(function () {
       ko.applyBindings(new ApplicationViewModel());
   }));

  }
 };

 app.oncheckpoint = function (args) {
  // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
  // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
  // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
 };

 app.start();
})();

In this example I have a new ApplicationViewModel that is being created and bound.  The script file containing the view model also needs to be included on the default.html page.

It's just that simple.

So far, the only things that's really different about this compared to MVC is there is not a routing engine and razor (that I've come across at least).  Just simple page using relational links as you might do in a simple website.

At any rate, I highly encourage anyone that is a web developer to take a look at the Windows Universal 10 JS Apps.