Metro Style Apps: WinJS a must?

14
votes

Yesterday I have started developing my first Metro style App using JavaScript. I've used one of those templates in Visual Studio 2011. This project template comes with a bunch of generated code which relies heavily on WinJS. The whole structure reminds of the ASP.NET with its Views and corresponding Code Behind files. There is also a navigator.js file which is responsible for the navigation between the Views. The whole data resides in the data.js and can be retrieved using different functions.

I worked with backbone.js and I found its concepts like MVC structure and routing pretty cool. My question is basically if you can implement such a Metro style App using backbone.js? Can I eliminate WinJS and just start from scratch? Should I try to integrate backbone.js into the current structure? What would it look like then? Are there any restrictions for using third party JavaScript frameworks? Should I leave the generated structure as it is?

What are the best practices and patterns developing Metro Style Apps with JavaScript?

Thanks

2
windows-8microsoft-metrowindows-runtimewinjs

2 Answers

9
votes

You can use any JavaScript framework you like within a Metro-style JavaScript application. See this related question about jQuery:

jQuery and Windows 8 JavaScript Metro Style Apps

The WinJS framework performs a couple of functions, the first is a set of non-UI APIs for managing and manipulating data, making service requests etc ... These are easily replaced with other JavaScript frameworks. The second is the UI layer, here you might struggle a bit. The WinJS UI has been designed to follow the Metro Design Language. If you replace it with your own UI layer (using jQuery UI for example) your application will just not look right.

Personally I would use WinJS for the UI layer and to integrate with the runtime (state persistance, app switching etc...), but use a more standard JavaScript library, such as Backbone or Knockout for the bulk of my code to ensure portability.

0
votes

I use Knockout js and Require js for MVVM. For visual effects, I use jQuery.

My data-main looks like a bit this:

(function () {
    "use strict";

    var app = WinJS.Application;

    app.onactivated = function (eventObject) {
        require(["/scripts/knockout"], function(ko){
            // My knockout viewModel and data binding goes here
        });
    };

    app.start();
})();

If you prefer Backbone in stead, I guess the setup would be similar.