Developing Client-Side (or Server-Side) HTML5/JavaScript Applications with Visual Studio 2010

Visual Studio 2010 is a very good choice for developing portable Client-Side HTML5 and JavaScript applications for Mobile and Desktop.

While Visual Studio 2010 supports JavaScript intellisense there are some tips and tricks you need to know.
Here we go:

Tip 0: Download and install the following Visual Studio 2010 Extensions

• Indent Guides
• JScrip Brace Matching Extension
• JScript Editor Extensions
• JScript Outlining Extensions
• JScript Word Highlighter Extension
• VSCommands 2010
• Productivity Power Tools
• PowerCommands for Visual Studio 2010
• MotherEffin THML5 Site (based on HTML5 Boilerplate project)

Tip1 : If you want to develop client-side application with HTML 5 and JavaScript, start a blank solution and add HTML files and JS files accordingly. Otherwise start and empty WebSite.

Tip2: You may want to use JQuery. To get intellisense for JQuery have a look here.

Tip3: Click Ctrl+Shift+J to reset the Intellisense to JavaScript

Tip4: To include a custom JS file into the Intellisense database use the following “special” comment

/// <reference path="path to your js file.js" />

Tip5: For documenting your own JavaScript functions use the <summary> tag after the function name e.g.

function foo(options) {
    /// <summary>  
    /// Helpful Tips
    /// </summary>  
    /// <param name="options">options</param>  
    /// <returns>jQuery</returns>
{
...
}

For formatting the parameters on multiple lines use &#10; sequence as new line e.g.

    /// <summary>
    ///   Updates the Game Logic
    /// </summary>
    /// <param name="options" type="Object">
    ///     There are no parameters for this function
    ///     &#10;1 - prop1: name
    ///     &#10;2 - prop2: id
    ///     &#10;3 - onSuccess: function to exec
    /// </param>

Tip6: If you plan to do a game consider the following:

Use the such code for the main loop.

var fps = 25;
var tick = 0;
function updateGame() {
    processPlayerInput();
    updateGameLogic();
    draw();
    setTimeout(updateGame, fps);
    tick++;
}

Paint inside an invisible canvas and then draw it to the visible one by using drawImage(buffer, 0,0);

Use frame buffering in the following way:

var buffer = document.getElementById("canvas");

var canvas = document.getElementById("visible-canvas");

buffer.width = canvas.width;
buffer.height = canvas.height;

var buffer_ctx = canvas.getContext("2d");
var ctx = canvas.getContext("2d");

...

// paint the buffer_ctx
...

ctx.drawImage(buffer, 0, 0);

Tip7: Have a look at Dojo and DojoX Toolkit.

If you have more tips feel free to comment.