As of writing these word VS 2011 is in consumer preview stage (Beta).

The Goal

In order to build a large JavaScript application that can scale easily you need to distribute your code into modules and place each module in a separate file. Unlike JavaScript compilers, we humans need this structure for the sake of sanity. 

If we break a JavaScript application into multiple files we can easily loose IntelliSense and have performance issues when loading many files in runtime. We can easily get around this with 3 strategies:

• On release compile everything into a single file
• On debug remain with the file structure and load modules on demand. debug inside VS your specific files like a “normal” C# application.
• On design time have full IntelliSense inside a module that have dependencies to other modules

In order to achieve that you can easily add references to each module/file telling VS to load specific files, but that will only work in design time so we need to leverage this capability to something more suitable.

The Details

I have only a concept and only tested it in VS2011 since there are many JavaScript improvements like loading file asynch, and automatic IntelliSense build without the need to hit ctrl+shift+J. This may work in VS2010, to be honest I don’t see a reason why not?

So here is what I got:

Basically this is a vanilla solution structure with some helpers. My Script folder contains JQuery and RequireJS as NuGet packages.

My index.html is as follows:

So I’ve defined a global namespace and set to it my configuration value to multiple files like so: OM.debugConfig = “multiple files”;

Then my ajaxController just defines a module under OM.Communication namespace

Now, I want to have full IntelliSense on other modules, like my commonHelper module, that will be aware to my ajaxController

So what’s going on here?

1. I’ve added a VS reference to require.js (/// <reference path=”../../Scripts/require.js” />) now VS knows about require.js lib
2. I’ve defined my dependencies in the following manner:
   1. if (!OM.debugConfig) – [Visual Studio as Interpreter]
      the !OM.debugConfig is not defined (falsy). This is the case when vs tries to build its IntelliSense when you work on that specific file. So the folders to look for my modules are relative to my current file position
   2. if (OM.debugConfig === “multiple files”) – [Browser as Interpreter]
      the OM.debugConfig === “multiple files” is only defined in runtime (remember my index.html where I defined the OM.debugConfig = “multiple files”;) which now tells my browser where are my files. This enables me to have breakpoints inside VS in order to debug my application as a “normal” C# app for instance.
   3. if (OM.debugConfig === “single file”) – [Browser as Interpreter]
      the OM.debugConfig === “single file” can also be defined for instance in indexRelease.html, that will reference a single compiled file for all of my modules similar to what I’ve done here with T4 template compilation of my scripts.

here is the runtime (FireBug DOM)

This is only a POC, I’m sure this concept can help achieve much robust architecture.