April 29, 2012

What’s New In Visual Studio 2011 Beta?

Please Note: This blog-post is about pre-release product. There may be some changes in the features I’ve mentioned here, while this product hits RTM

Visual Studio 2011 (VS11) is the new release of Microsoft’s development tool, releasing along side with Windows 8. As the new operating system promises new technologies like Windows Runtime and Metro Applications, VS11 has plenty of new features to support these technologies as well as improve productivity for old technologies like JavaScript, CSS, HTML, C# and what not. In this post, we’ll target older technologies like basic IDE features and enhancements on HTML, JavaScript and CSS. We’ll cover other technologies in subsequent posts. It all starts with New Web Site menu item:

Multi-targeting (still works):

You can now target .Net Framework 2.0 to 4.5 in single IDE. The legacy of Multi-Targeting is carried forward in this release of VS as well. You’ll see support for MVC style apps, Razor Syntax supported sites, etc… without installing additional extensions or packs.

image

HTML5 Support (Built-In)

In VS10, you’ve to add special add-on (VS Extension) or SP1 to get support for HTML5. But with VS11, you’ll get built-in support for HTML5 tags and it will help with IntelliSense too.

image

You’ll get built-in support for HTML5 tags and it will help with IntelliSense too.

image

Apart from that you can target multiple browsers at the same time. You don’t need to say View In Browser and select a browser. This setting is there, by default, near to debug option. And new browsers will be registered here as you keep installing them.

image

JavaScript Enhancements:

Now, you can right click any JS function and say ‘Go To Definition’ and cursor/focus will move to the function directly. I like this features because of two reasons. a) JS is dynamic and doesn’t have metadata, so implementing this feature is a big task. Superb work done by Microsoft. b) Think if you’re making $.ajax calls and have provided large set of options and call back functions. Navigating through the entire code and finding the correct function can be a bit pain. Here is the solution.

image

Just like XML Documentation is generated for C#/VB.NET code, the same functionality is available for JS code as well. My friend Vardhaman has written a blog about it and you can find it here: http://vrdmn.blogspot.in/2012/04/javascript-function-signatures-in.html (Image credit to Vardhaman)

image

CSS Enhancements:

Now, with VS11 you get full IntelliSense support for CSS styling. For example you want to create a background color, you have following option in VS without installing any extension:

image

Apart from this, there are many more enhancements. Lets take an example of border-radius. Which has different meaning in different browsers and need to provide vendor specific styling. Here you type in just border-radius and hit tab and it will type in following code for you:

image

Web Development Enhancements:

Sometimes, we write too-much code within DIV tag or create a group of tags which can be re-used. In that case, creating a reusable control (like ascx) will be an added advantage. In VS11, now you can just right click the code, which you think can be reused and voila. it will be taken out as a user control. For example:

image

Will get converted to:

image

These are very few from various enhancements which VS2011 provides in Web development stack. There are many more features and we’ll talk about them in next few posts.

Till then, download the beta from MSDN Download here and enjoy the coding.

Namaste

Mayur Tendulkar | www.mayurtendulkar.com