Visual Studio 11 – Awesome New Features for Web Developers

Posted by: Sumit Maitra , on 4/28/2012, in Category Visual Studio, VSTS & TFS
Views: 70504
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.

Download VS 11 Beta and .NET 4.5 over here

 

The Development Environment

1. Backward compatible projects between Visual Studio 2010 and Visual Studio 11

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.

search-everywhere

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.

css-color-picker-enhancements

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.

d. Code Regions in CSS

e. Code outline support for CSS classes

5. Improved JavaScript support

Visual Studio 11 Beta incorporates the JavaScript engine used in IE 9. This parser significantly improves the accuracy of JavaScript parsing resulting in improved design time JavaScript feedback.

Additionally VS 11 supports the following for JavaScript

a. Go To Definition. Moves the cursor to the object or function definition, even if it is located in a different file.

b. Function overloads. When using JavaScript function overloads to add multiple functions with the same name, IntelliSense continues to parse code without displaying an error.

c. Bracket matching. Select an opening or closing brace to automatically highlight the corresponding closing or opening brace.

d. Outlining. You can expand or collapse functions and code blocks to highlight the structure of code.

e. Smart indenting. The editor automatically indents the script hierarchically, as it is being written.

f. XML documentation comments. Comments added to code for objects or methods, are displayed by IntelliSense, when writing code referring to those objects or methods.

6. Web Forms development

a. MVC style object binding support in Web forms applications, simplifying the code and reducing repetitive development work.

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.

d. Renaming ASPX pages. More easily change the name of an ASPX page. Visual Studio 11 Beta automatically updates all references.

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

page-inspector-firsttime-warning

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

live-change-complete

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.

live-change-refresh

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

a. Runtime and Framework Enhancements

  • i. Activity annotations. You can add annotations to workflow activities to provide additional developer documentation.
  • 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.

References

http://go.microsoft.com/fwlink/?linkid=243994

http://channel9.msdn.com/Shows/Web+Camps+TV/Web-Developer-Efficiency-Tools-in-Visual-Studio-11

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
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


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Greg Fohl on Saturday, April 28, 2012 9:25 PM
This is VS 2011 at its best! I am surprised you did not include image thumbnails when you hover in the Solution Explorer. It's quite useful
Comment posted by Sumit on Monday, April 30, 2012 8:06 AM
@Greg Thanks, missed that one. Yes, it is a really useful functionality.
@Anand Thanks, glad you liked it.
Comment posted by Anand D on Monday, April 30, 2012 3:30 PM
Very nice introduction
Comment posted by Anand D on Monday, April 30, 2012 3:33 PM
Very nice introduction

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel