Visual Studio 11 – Awesome New Features for Web Developers

Abstract: There is a plethora of changes in VS 11 and the next .NET framework release that help improve developer productivity . In this article, we will focus on the Web Developer specific functions in the release that promise to make day to day developer life much easier.

The Visual Studio 11 Beta along with the latest .NET framework 4.5 has been out for about two months now and there are a slew of really good features that aligns with Microsoft’s goal of ‘Developer Happiness and Productivity’. In this article we will focus on the Web Developer specific functions in the release that promise to make day to day developer life much easier.

The Development Environment

Every upgrade of Visual Studio usually results in a one-way upgrade of the .sln and .csproj files that results in breaking changes for older IDE. Hence if you were the team lead trying to play around with the latest IDE before you introduced it to your entire team, and if you upgraded your projects, you couldn’t check it in to source control because that would break the build for everyone else in the team. Not anymore! Visual Studio 11 upgrades to .csproj files are compatible with Visual Studio 2010 and you can round trip between Visual Studio 11 and Visual Studio 2010.

2. Search Everywhere

In Visual Studio 11, you can invoke search from anywhere for example a global code search or a class search in Solution Explorer or a Control search in the Control Palette. Essentially all list/tree structures are now searchable.

3. Improved IntelliSense to support HTML, JavaScript and CSS

a. Code snippets: Large library of code snippets for most HTML tags possible. Code snippets come with the basic, mandatory values filled in with placeholders so you get an idea of the minimum values required for the new tag.

b. Auto update of end-tags or begin tags when the other changes. So if we are changing a <div>…</div> to a <section> changing either the starting <div> or the ending </div> will update the other one.

c. Auto indenting on line-breaks

4. CSS Styling

a. Color picker as you define the style. When defining color attributes, you get a color picker automatically that shows the colors in your current CSS file by default. You can navigate using the keyboard and bring up the full color palette with the ‘down’ key. The color palette has the following additional functionality

An opacity selector. If opacity value is < 1.0, then it automatically switches to argb mode. If it is 1.0, it goes back to #HEX mode.

A color picker that you can use to actually pick any color off your monitor.

b. CSS Snippets

The snippets are smart enough to put in vendor specific tags as and when required.

The editor validates values for all vendor specific attributes as well

c. Automatic Indentation

The editor can identify CSS hierarchies and indent the markup accordingly.

6. Web Forms development

b. No need to switch to design view for smart tag based functions like assigning a data source to a GridView or updating a Template, smart tags are available in the source view itself. Shortcut of Ctrl + . (period) works too.

c. Similar to smart tags, now event generation is also available in the source view. No need to switch to the design canvas. It’s much like the XAML editor.

e. Extracting to a user control. Select and extract the required markup to create a new user control. Visual Studio 11 Beta updates the page to include all necessary tag prefixes and registrations, and includes the control in the correct place on the page. Re-use the control elsewhere on the site as required. It even respects any configurations in the web.config for the control.

7. The Page Inspector

The page inspector is a browser window inside Visual Studio to render web applications as they are running on the server. Additionally it provides several useful features and developer tools that help debug markup and styling.

a. Page Navigator can be selected as the default ‘Run’ or ‘F5’ target so that your web apps start in Page Navigator directly. On the first run, it asks if it can add a configuration entry in web.config

b. Automatic code navigation: In the inspect mode, Page Navigator tracks the cursor as if hovers over each html element and then tracks the respective cshtml or aspx file in which the particular element was defined (not just HTML like in the Developer Tools of the browsers). For example in the image below we are hovering over the Title “Fun with SignalR” and we see the corresponding code location at _layout.cshtml

c. Automatic style navigation: Just like code navigation, you can navigate to particular CSS element and page inspector will track the CSS and bring it up for you, making CSS changes super easy.

d. Change detection and refresh. Page inspector detects markup changes that are made on the fly and a single keyboard shortcut (Ctrl+Alt+Enter) saves the changes and refreshes page inspector.

8. Single Page Web Application Template

This new Web Application Template provides a boilerplate for rich JavaScript apps that display various functionalities in a Single Page (Gmail is a good example of a single page app). Support for Knockout.js for JavaScript templates is provided out of the box.

Framework Enhancements

1. Support for asynchronous Operations

The async and await keywords further simplify usage of the Task Parallel Library enabling users to develop Asynchronous services that help build more responsive services. Benefits of this can be fully expressed in an article of it’s own.

2. SQL Express LocalDB

A lightweight database engine that installs and starts quickly and provides full compatibility with both SQL Server and SQL Azure. This ensures that developers can develop, test, and debug sites on their development computers with confidence that the site will work as expected when deployed to a production web server using a SQL Server database.

3. Windows Workflow Foundation Enhancements

New features in the Workflow Foundation development tools as well as framework support include

ii. Expanded activity pallet. You can create workflows faster by using the new out of the box activities

iii. Consistent syntax for workflow expressions. If you are using Visual C# to build workflows, you can now define expressions by using C# syntax. If you are using Visual Basic to build workflows, you can continue to use Visual Basic syntax in expressions.

iv. Finite State Machine workflows. State machines can be used to define business processes rather easily. Apart for the Sequential workflow activities now developers can create Finite State Machine workflow to model workflows that match business requirements much more closely.

v. Improved Support for Workflow Versioning. Any enterprise developer would know that change is the only constant when it comes to modeling a Business workflow. Long running workflows that change from one instance to another is a common occurrence. Previously, the workflow foundation’s support for versioning was rather weak and required a significant amount of plumbing to support versioning correctly. In Visual Studio 11 and .NET 4.5, developers get lots of hooks and framework support to be able to

Identify workflow changes

Upgrade workflows in-flight

Gracefully handle change in workflows

b. In Visual Studio IDE Enhancements for Workflow Runtime

i. Tree view. You can navigate large workflows more easily by viewing the structure.

ii. Pan gestures. You can easily pan through the designer if the workflow does not fit on a single page.

iii. Error identification. You can find and directly navigate to errors in the workflow designer from the error list.

Conclusion

Overall there is a plethora of changes that help improve developer productivity in VS 11 and the next .NET framework release. Lookout as we pick each one apart in the future.

Sumit is a .NET consultant and has been working on Microsoft Technologies since his college days. He edits, he codes and he manages content when at work. C# is his first love, but he is often seen flirting with Java and Objective C. You can follow him on twitter at @sumitkm or email him at sumitkm [at] gmail