Visual Studio 2013 RC for Web Developers - One ASP.NET, Browser Link, and our Direction

ASP.NET and Web Tools for VS2013RC is out today. You can feel free to install it over the top of VS2013 Preview if you like. That's what I did.

• Download and Install VS2013RC

Be sure to check out http://www.asp.net/vnext for release notes and docs, as well as updated tutorials. There will be a lot more docs and videos coming, as well as details on how to extend and use everything. Since this is the Release Candidate (rather than the final release) there's still some work to be done.

One of my favorite features, and a feature that I think is the most representative of the direction we are going, is Browser Link and best of all, its extensibility model.

For example, you remember how you can select Browse With, and set multiple browsers as your default browser? (Some folks haven't noticed that feature yet) Here I've made a regular side and selected IE and Chrome as my defaults with the Browse With dialog (hold Ctrl for multi-select within Browse With).

Now, Ctrl-F5 to launch both browsers:

Notice that Bootstrap is the default template now. We'll have Bootstrap 3.0 for the final release.

I'll change some text in the Index.cshtml. Hover over the Browser Link button in the toolbar:

It knows two browsers are talking to VS using SignalR and JavaScript. No magic, just web standards.

Now, you can type code and html and press Ctrl+Alt+Enter to refresh all connected browsers, or you can click Browser Link Dashboard:

Here's the dashboard. I've clicked on IE:

Even more interesting, is that Browser Link is itself extensible.

That menu in the Browser Link Dashboard where we're talking to a specific browser? You can add things to that. Mads Kristensen has done just that with Web Essentials and added extensions to Browser Link (Make sure to get the VS Web Essentials 2013 RC build, or you can build it from source!)

Here's what the Browser Link Dashboard looks like with a Browser Link Extension installed. See the added menu items?

Aside: Note also the Error List, we can add a new class of error in VS and even fix them with a double-click.

If I click Design Mode, check out what happens. The "Design Surface" potentially moves to the browser itself, using JavaScript, but with bi-directional communication between VS and the browser.

Remember that Web Essentials is open source, so I can get an idea of what's going on by reading the source. Without getting too deep, I can look at Inspect Mode and see it's using MEF.

[Export(typeof(BrowserLinkExtensionFactory))]
[BrowserLinkFactoryName("InspectMode")] // Not needed in final version of VS2013
public class InspectModeFactory : BrowserLinkExtensionFactory
{
...
}

And that is a list of actions:

public IEnumerable Actions
{
    get
    {
        yield return new BrowserLinkAction("Inspect Mode", InitiateInspectMode);
    }
}

And that it's using SignalR to talk to injected JavaScript:

private void InitiateInspectMode()
{
    Clients.Call(_connection, "setInspectMode", true);
    _instance = this;
}

And I can see in the browser's JavaScript that as I hover over elements in the browser, I can select the source in VS and even bring VS to the front:

inspectOverlay.mousemove(function (args) {
    inspectOverlay.css("height", "0");

    var target = document.elementFromPoint(args.clientX, args.clientY);

    inspectOverlay.css("height", "auto");

    if (target) {
        while (target && !browserLink.sourceMapping.canMapToSource(target)) {
            target = target.parentElement;
        }

        if (target) {
            if (current && current !== target) {
                $(current).removeClass("__browserLink_selected");
            }

            current = target;
            $(target).addClass("__browserLink_selected");
            browserLink.sourceMapping.selectCompleteRange(target);
        }
    }
});

inspectOverlay.click(function () {
    turnOffInspectMode();

    browserLink.call("BringVisualStudioToFront");
});

This is just a taste of what's coming. One ASP.NET is a journey, not a destination. We'll have more refinements, more scaffolding, and continued improvements as we head in this directions and in future updates (Update 1, etc).

Browser Link is just one feature, be sure to check out (and subscribe to) the Web Dev Blog where ASP.NET and Web Tools lives on MSDN. Today's post talks about:

• One ASP.NET
• Authentication
• The new HTML5 editor
• Azure Web Site tooling
• Scaffolding
• MVC5, Web Forms, SignalR 2, Web API 2
• Entity Framework 6
• OWIN Support and Self-Hosting
• ASP.NET Identity
• NuGet 2.7

Remember, even thought it feels like a lot, these are almost all additive changes that you can take or leave. You can still make and develop ASP.NET 2 apps in VS 2013. You can use your own View Engine, your own ORM, your own Identity, you own Scaffolding, your own components. You decide.

We'll have docs and updates soon for scaffolding, modifying and customizing File New Project to add your own, as well as a list of what's new and released as NuGet packages. Watch http://www.asp.net/vnext and the Release Notes for lots of details and any breaking changes.

Sponsor: Big thanks to Infragistics for sponsoring the feed this week! Download Your Free HTML5/jQuery Grid:  Prepare to launch eye-popping, performance-driven HTML5 applications with Ignite UI. Believe your eyes - you can download the world's fastest, most reliable jQuery Grid now - no strings attached!