---

September 2012

Volume 27 Number 09

Visual Studio 2012 - A More Productive IDE for Modern Applications

By Peter Vogel | September 2012

While Visual Studio 2012 Professional supports several new technologies (for example, Windows Store apps and the ASP.NET Web API), the Visual Studio team seems to have taken the opportunity to concentrate on creating a “better IDE.” They started with an overhaul of the UI. Although the Visual Studio 2012 UI overhaul isn’t nearly as drastic as what Microsoft has done with Windows Store apps, it includes many significant changes. That’s not to say there aren’t lots of non-UI improvements, but let’s talk first about the “why” of those changes.

The Visual Studio 2012 “better IDE” focuses on three goals to help you be more productive: reducing clutter, simplifying common tasks and improving usability. While the new monochromatic UI and use of “all caps” in top-level menus have attracted the most attention, other, more significant changes are going unnoticed. For example, the number of default toolbars that appear as Visual Studio changes from one mode to another is sharply reduced in Visual Studio 2012 (see Figure 1). While this reduces clutter, the more practical result is room for a couple more lines of code on the screen. This reduces the need to scroll up and down and allows developers to more easily see “the whole method,” simplifying a very common task: writing code. It’s a change that might seem trivial, but it reflects the direction of many of the changes in Visual Studio 2012.

Figure 1 Reduced Color and Chrome Make Code Highlights Stand out More

Accessing Code

Access to code is a key feature of the new Visual Studio 2012 experience. For example, if you have the preview button selected, your first reaction when clicking on a file in Solution Explorer might be that Visual Studio 2012 is now opening files with single-clicks rather than double-clicks. However, what you’re seeing when you single-click on a code file is a preview of the file (a visual clue is that the window’s tab appears on the right-hand side of the tab well). Single-clicking on another file in Solution Explorer dismisses the existing preview and previews the new file. If, however, you make a change to a previewed file, the tab shifts to the left and the file stays open in edit mode.

But searching for code by clicking on each file is inefficient—the new search/filter options at the top of some of the tool windows provide a much more effective way to find what you want. The most obvious example is the Search in Solution textbox at the top of Solution Explorer. It lets you look for file names and—more important—member names in any project in the solution (though not with ASP.NET Web site projects). You no longer need to open a new window to search for text. The result is less clutter and simplification of a common task.

Also reflecting the move to reduce clutter while improving usability, Solution Explorer now combines, along with the Find window, features of Class View with the traditional Solution Explorer file-based view to let you drill down into individual members within your files (see Figure 2). Complementing this feature is the new Home button at the top of Solution Explorer that restores Solution Explorer to the standard list of files.

Figure 2 Solution Explorer Now Acts as a Kind of Object Browser

Quick Launch (which appears at the right-hand side of the menu bar) seems less useful to me. It searches for Visual Studio assets rather than project assets. If you’re looking for menus or Visual Studio options by keyword, Quick Launch will let you find the matching Visual Studio item and then go directly to it. It’s not clear to me how often I’ll want to do that, but Quick Launch might encourage me to do it more.

IntelliSense Expands

IntelliSense continues to expand its search parameters to make it easier for you to find classes and members. As you type, IntelliSense not only matches any part of a word but also selectively matches any uppercase letters in the names of classes and members. In an .aspx file, for example, typing “oc” brings up an IntelliSense list showing OutputCache.

CSS gets IntelliSense with this release, and Web developers will find that IntelliSense recognizes the new HTML5 tags. ASP.NET developers even get support when entering binding expressions. SharePoint developers creating sandboxed solutions will actually see their lists get shorter; no farm-only items will be listed for code in sandboxed solutions.

It’s JavaScript, however, which has gained the most IntelliSense support. Visual Studio 2012 now automatically incorporates JavaScript comments into its IntelliSense support for JavaScript functions and variables. If you use XML commenting in your JavaScript code, you have new options for generating IntelliSense support for overloaded functions. Visual Studio 2012 even takes a stab at providing IntelliSense for dynamically loaded script files. Selecting a JavaScript function call and pressing F12 (or selecting Go to Definition from a context menu) will take you to the file containing the function (except for generated code). Not all JavaScript support is equally useful, though—when Visual Studio 2012 can’t determine the data type for a variable, IntelliSense often just lists every JavaScript entity available.

ASP.NET and ASP.NET MVC Developers

ASP.NET MVC developers will appreciate the new project templates that support creating mobile apps (including the jQuery mobile libraries) and apps that support the ASP.NET Web API. Another project type supports the Microsoft client-side-enabled Single Page Application, which integrates several JavaScript APIs—the Knockout Model-View-ViewModel (MVVM)/data-binding library, the HTML5 History API and the Microsoft Upshot library for managing downloaded objects—to support creating AJAX apps. If you’re happy with the Microsoft choice of JavaScript libraries—and they are good choices—you won’t have to assemble your own technology set from scratch any more.

Visual Studio 2012 also will now auto-format JavaScript code for Web and SharePoint developers. If you’ve got a different standard for JavaScript formatting, you’ll either need to turn this feature off in Tools | Options or adjust your expectations.

Visual Studio 2012 supports the new HTML5 tags—the ASP.NET default.aspx page even includes section tags. Developers can stop coercing <span> and <div> tags using shared CSS classes as a way of identifying their page’s structure and start using tags dedicated to that task. IntelliSense for older HTML tags supports the new HTML5 attributes (including the custom data attributes and the Accessible Rich Internet Applications accessibility attributes). Of course, you have to count on the browser recognizing these new tags and attributes.

Page Inspector

The major change for Web developers comes in debugging. You can still press F5 to debug your ASP.NET and ASP.NET MVC applications, but a new dropdown list in the debug toolbar makes it easy to switch between browsers by automatically listing all the browsers installed on your computer. The real jewel in the crown on this list, however, is Page Inspector, which will change the way Web developers solve problems in their pages.

The typical debugging process for an ASP.NET page has seven steps: Open the page in the browser, see something wrong, guess at the problem, shut down the browser, apply your fix, open the page in the browser (again) and see if the problem is gone. Page Inspector short-circuits this whole process; just right-click on a page (.aspx, .cshtml or .vbhtml) in Solution Explorer and select View in Page Inspector. Visual Studio 2012 then reconfigures itself into several new panes, showing your page as it’s rendered in the browser along with the source file that you selected, a tree view of the HTML sent to the browser and an interactive view of the CSS applied to your page—and they’re all live (see Figure 3).

Figure 3 Page Inspector Shows All the Markup that Controls How the Page Is Rendered

As you move your cursor from place to place in the browser view, the HTML and CSS panes update to show you what’s contributing to what you see in the browser. While your source file doesn’t move to match your browser, your source does remain updateable. If you make a change to your source, the browser view refreshes to exhibit the results of your change. In the CSS view, you can disable rules or, by clicking on a rule, switch to the CSS file containing the rule. Once there, if you change the rule, the page redisplays to show the result of your change.

It’s not a perfect solution—the view is crowded (even on a 17-inch monitor) and Page Inspector seems to have trouble with absolute positioning in stylesheets (but you probably shouldn’t be using absolute positioning, anyway). Even with those caveats, Page Inspector is going to be a tool that I won’t be able to live without.

Testing

While Web developers get improvements in debugging, everyone benefits from the enhanced support for test-driven development (TDD). The old test output window has been replaced by a new Test Explorer (see Figure 4), available from Test | Windows, which centralizes most TDD activities. Test Explorer lists the status of all of your tests from their last test run, including the time each test took (giving you an early look at where your performance bottlenecks might be). Clicking on a failed test in Test Explorer displays its information at the bottom of Test Explorer. Double-clicking on a test in Test Explorer takes you to its code so you can start a debugging session with it. If the list of tests gets very long, you can filter it by keyword. Test Explorer now groups all the failed tests together instead of intermixing them with all the other tests, and shows all tests marked with the Ignore attribute instead of silently skipping them.

Figure 4 Test Explorer Provides a More Interactive Way to View and Run Tests

Test Explorer also offers a new option for running tests: to run all tests that haven’t been run yet. Initially, your tests all start in the Not Run category and, as you run those tests that prove your new code works, some tests shift (eventually) into the Passed category. Once you’ve proven that your new code works, you can pick Run Not Run Tests to run whatever tests remain un-run to prove that you haven’t introduced any new errors to your old code. Test Explorer is another example of simplifying common tasks while reducing visual clutter in the UI.

The most significant change in testing is, unfortunately, only available in Visual Studio 2012 Ultimate: automatically executing your tests after every build. Ultimate and Premium also include support for test code coverage (allowing you to see which lines of code haven’t been tested), but that’s a tool of doubtful usefulness, at best, in my opinion (some professional developers disagree).

And, of Course, Windows 8

Not surprisingly, Microsoft has provided good support for developers creating applications for Windows 8. You’ll need a Windows 8 developer license to create these apps, but Visual Studio 2012 throws you into the wizard that walks you through the process of getting the license the first time you select a this project type.

Visual Studio 2012 provides six project types for Windows Store applications: three UIs (blank, grid and split); a class library; a language-independent Windows Runtime Component; and a test library. The variety of project types suggests that Windows Store applications live in their own world.

Like the Web application support for multiple browsers, you can debug Windows Store apps in a variety of environments by selecting the environment you want from a dropdown list on the toolbar. The default environment is “Local Machine,” but you can also select Simulator, which brings up the Microsoft tablet-like simulator, as shown in Figure 5.

Figure 5 The Simulator Option for Testing Windows Store Applications Mimics a Tablet

From the right-hand side of the simulator, buttons turn your mouse into various kinds of pointers that mimic touch interactions with your application (assuming that you don’t have a touchscreen on your development machine). Another button lets you set the location for your simulated tablet using latitude, longitude and elevation for testing location-based applications. The Rotate Clockwise and Rotate CounterClockwise buttons let you swing the tablet between portrait and landscape modes. There’s even a button for capturing a screenshot of your simulated tablet that drops the screenshot into the Windows clipboard. Using the simulator isn’t the same as testing on a real physical device, but it’s good enough for initial testing and will save you having to shoot your app over to another device just to run a simple test.

Rethinking the UI

Much has been said about the reduction in “visual clutter” in the Visual Studio 2012 UI—so much that Microsoft added some “color clutter” between the beta and the release candidate (RC). In general, the goal in any UI design is to make similar things look the same (that is, all menu items should look alike, as should all buttons) and different things look different (that is, buttons and menu items should look different). The Visual Studio 2012 RC seems to have struck a “good enough” balance in making things look appropriately (and obviously) the same and different. It will be interesting to see if, in a few years, developers start thinking of earlier versions of Visual Studio as “gaudy.”

While the UI color scheme attracted some discussion, more has been said about the Microsoft decision to put the top-level menu items in all caps to make the menu stand out from the clutter of toolbars. Several studies have shown that adult readers recognize words, in part, by the shape of their ascenders (d, b and f) and descenders (g and y) when the words are printed in mixed case. In all caps, though, all words have the same shape: rectangular. In Visual Studio 2012, however, you can’t really say that what developers do when accessing a menu is “reading.” Because the position of the menu items is fixed (File, Edit, View, Window, Help), developers probably find menus as much by position as by the item’s actual text.

Experienced users are always disconcerted by any change, but the real impact of all caps will be on new users. Does the reduction in individual menu item recognizability pay off in increased “mouse marksmanship”?

In the meantime, various registry hacks and Visual Studio 2012 extensions have been posted that allow developers to have the top-level menu items display in mixed case. An option in the final release version of Visual Studio 2012 will probably make everyone happy.

Blend for Visual Studio … and Windows Store Apps

Part of the support for creating Windows Store applications includes bundling Blend for Visual Studio with the Visual Studio 2012 package. However, Blend is an optional part, so you’ll need to pick the Custom Installation option to include it in your Visual Studio 2012 installation. Perversely, while Blend supports both XAML and Windows Presentation Foundation (WPF), it’s not available from within Visual Studio 2012 for anything but Windows Store application development.

Although Blend is shipped with Visual Studio 2012, you can’t really say that it’s integrated with Visual Studio 2012. Right-clicking on a UI file in a Windows Store application allows you to pick the Open in Blend option. Selecting that option opens Blend in a new window. Fortunately, Blend picks up your project’s file list so you can modify your files without having to return to Visual Studio 2012 (in fact, when you do return to Visual Studio 2012, you’ll get a “File has been updated outside of Visual Studio” message for the files changed by Blend). Files added to your project in Blend are added to your Visual Studio 2012 project. But you still need to be careful as you move between the two windows: You can switch to a different solution in Visual Studio 2012 without Blend noticing or caring. Having said all that, Blend lets you do a great many things graphically that would otherwise force you into working directly with XAML.

More Goodies: Multiple Monitors, Debugging, Azure and SharePoint

There’s more, of course. You can disengage windows from Visual Studio 2012 and then dock them to each other (Microsoft calls this a “raft”). You can then drag your raft to the position—or monitor—of your choice. The debugging windows are much more thread-aware and, more usefully, let you flag the threads you’re interested in and limit the display to those threads.

Azure developers get better integration between the Azure Platform Management Portal and Visual Studio 2012. Moving an ASP.NET MVC app to the cloud requires only a few clicks, and you never have to exit Visual Studio to use the Azure management portal. Not everything that Azure developers need is in Visual Studio 2012 Professional, however. If you want to copy a database to the cloud (either just the schema or the schema and data), you’ll need to download the SQL Azure Migration Wizard from CodePlex (bit.ly/bYN8Vb).

SharePoint developers get new templates for site columns and content types—fundamental building blocks for SharePoint sites. Visual Studio 2012 also, finally, gets a visual list designer for SharePoint that’s almost as good as the one in SharePoint. SharePoint developers can also publish their solutions directly from Visual Studio 2012 to a remote site (which will drive whoever is supposed to be managing releases crazy).

While WPF and Silverlight developers don’t get the minimal integration with Blend that Windows Store app developers do, some Blend menu choices (such as Pin Active Container and Create Data Bindings For) have been added to the XAML designer’s context menus.

 

Team Foundation Service

As software best practices continue to encourage creating lots of simple, dedicated objects that are assembled to create complex applications, managing the multiplicity of software components through their entire lifecycle has become increasingly important. The home for application lifecycle management (ALM) tools in the Microsoft universe is Visual Studio Team Foundation Server (TFS). However, especially in smaller teams, there’s an assumption (sometimes misplaced) that the costs of installing, configuring and managing TFS would wipe out whatever ALM benefits it would provide. This is where Team Foundation Service comes in: It’s TFS in the cloud.

While Team Foundation Service is still in preview mode, you can experiment with it (or just review its features) at tfspreview.com. Team Foundation Service integrates with both Visual Studio 2012 and Eclipse (though not all features are available for Eclipse).

With Team Foundation Service, you can use PowerPoint at the start of your application development process to storyboard your application. Once development begins, the service provides source control, continuous unit testing (though only on check-in), and tools for managing information about features, task, bugs, feedback and backlog. Setting up continuous integration builds is relatively easy (at least for simple projects) and includes automatic deployment to Azure. Team Explorer, a Web-based tool, lets you review your project from anywhere.

Pricing still wasn’t announced at the time this article was written. Microsoft has said there will continue to be a free level of the service after it leaves preview mode. However, Microsoft has also said that there will be paid levels of the service for users who aren’t satisfied with the free level.

Upgrade?

Since Visual Studio 2008, Visual Studio has been “disconnected” from the corresponding version of the Microsoft .NET Framework, meaning you could upgrade to the new IDE without upgrading your version of the framework. You have even more freedom in Visual Studio 2012 because all projects are not automatically upgraded to the .NET Framework 4.5 with no way to go back. You can successfully round-trip a project between Visual Studio 2012 and 2010, provided that you don’t use SQL Server 2012 Express LocalDB in Visual Studio 2012 (a zero-configuration version of SQL Server Express only supported in Visual Studio 2012) or some feature only available in the .NET Framework 4.5.

If you’re going to upgrade to the .NET Framework 4.5, of course, you have no choice but to upgrade to Visual Studio 2012. But if you’re not upgrading to the .NET Framework 4.5, Visual Studio 2012 is still worth considering. The price isn’t unreasonable (Professional is $499 without an MSDN subscription) and, for ASP.NET developers, Page Inspector is probably worth the cost all by itself. Azure developers will appreciate the deeper integration with Visual Studio 2012. The new Solution Explorer and Test Explorer tools are very handy. At the very least, every .NET developer should be spending time with the preview.

---

Peter Vogel is a principal at PH&V Information Services, specializing in ASP.NET development with expertise in service-oriented architecture, XML, database and UI design.

Thanks to the following technical experts for reviewing this article: Mike Abrahamson and Mike Fourie