What is a typescript AMD module and do I need it for an ASP MVC4 web application?

Question

I started to use Web Essentials and I see there's an option "Use the AMD module". I am using typescript for an ASP MVC4 application. Can someone explain what the AMD module is all about. Is this something that I should know about?

Answer 1

AMD is one way to format and load modular JavaScript. See here: http://addyosmani.com/writing-modular-js/ and especially here: http://requirejs.org/docs/whyamd.html

To quote from that latter source:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order" and something that was easy to use directly in the browser.

Essentially AMD allows you to load JavaScript modules on demand, and provides a format for encapsulating their content so the Global namespace isn't polluted.

In TypeScript, with the AMD compiler switch that you've discovered set to 'on', you export a module like this:

export module pe.components {
    export class Component {  // 'export' makes this visible outside the module

    }

    class FriendComponent { // no 'export' so this is only visible inside the module.

    }
}

And in another file you import this module like this:

import c = module('relative-path-to-file/pe.components');

And then use it like this:

var component:Component = new c.pe.components.Component(); // Works, because Component is exported

... but not this:

var friend:FriendComponent = new c.pe.components.FriendComponent(); // Shouldn't work* because FriendComponent is not exported.

(* there was a bug that made non-exported interfaces visible outside their declaring modules. I think this has been fixed in TS 0.8.1).

As to the second part of your question - this is really too broad. If your architecture requires you to load new functionality (plug-ins or applets within a single page application, for example), then yes, AMD modules and a loading framework such as RequireJS may be the way to go. If, on the other hand, you know in advance all the functionality your users are going to require, you might be better off just minifying your scripts thoroughly and loading them in advance as a single file.

I don't think the fact that you are working with MVC is relevant here: the question is whether your client-side architecture warrants an asynchronous, modular approach.