Metro Style Apps: WinJS a must?

Question

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

Ferdie

Answer 1

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.

Cantabrigian

Thanks ColinE for the good ideas! I'am still struggling to visualize such an architecture. Would I replace the logic in the navigator.js with the backbone style routing? Is there a need for Backbone.View or would I stick to the WinJS UI with its templates and bindings? Or should I wrap the WinJS UI Code Behind in a Backbone.View? There are still some events controlling the life cycle of the Application like the 'ready' event when the View is rendered. Where would I handle these? It is nice to realize that it is possible to use other frameworks but their integration causes headache – Ferdie

WinJS is three parts: the style sheet, the base.js, and the ui.js. If you take the dependency on the style sheet, then you will have no trouble making it "look right". – Collen

I really want to know if there is some kind of massive performance gains from using WinJS for things like bindings, does anyone have any info on this? – Blowy

Answer 2

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.

Sickle