Sunday 25 March 2012

The best of VS11 (Talk from Dev11 Launch)–Demos

Continuing on from my previous post on the best bits of Visual Studio 11, these are the demos that I showed as part of that talk.

Testing integration

As part of the new test runners integration, this demo shows how to run different testing frameworks easily within the same project. To show the testing frameworks in  Unit Test Manager windows, you will need to install the xUnit.net test runner and the nUnit test adapter via the Extension Manager or from the Visual Studio Gallery. br />Once these are installed when you build the application you will see the 3 different unit testing frameworks appearing in the Unit Test Manager pane.
Download the demo project.

OAuth and OpenID providers

One of the new features that appeared with WebMatrix 2 Beta Refresh  (now with added Unicorn sauce) and Web Pages 2 Beta are the OpenID and OAuth providers which allow you to build applications that support these systems such as Facebook, Twitter and Google logins.
Currently these are only available in ASP.NET WebPages but as part of the whole one ASP.NET concept these features will be released for ASP.NET MVC and WebForms later.
This project comes from the WebMatrix starter site. It shows how to use the Google, Twitter and Facebook logins.

Using Google OpenID

Google OpenID is one of the simplest providers to implement. In the _AppStart.cshtml file add the following after the WebSecurity.InitializeDatabaseConnection
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);

In the Account/login.cshtml you can modify the social login section to look like
<section class="social" id="socialLoginForm">
<form method="post">
<h2>Use another service to log in.</h2>
<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="google" value="Google" title="Log in your Google account" />
</fieldset>
</form>
</section>

Using Yahoo for OpenID is the same procedure

Using Twitter OAuth


Twitter OAuth requires you to create a Twitter application first because the Oauth provider requires a consumerKey and consumerSecret tokens.

Head over to the Twitter developers site and create a new app. If you are developing on localhost, Twitter may not accept this as a valid domain name so you can use the 127.0.0.1 loopback address instead for the WebSite field in the new application creation.

Once you have your Twitter application setup just take note of the Consumer Key and Consumer Secret values.

Back to _AppStart.cshtml add the following
OAuthWebSecurity.RegisterOAuthClient(BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");

Insert you own consumerKey and Secret and then add the new input in your socialLoginForm and viola Twitter login integration!

Download the sample

Maps Helper

The final demo of the day is using the new Maps feature. This one also comes with WebMatrix 2 Beta Refresh but you can use it in MVC or WebForms right now. You need the new v2 of Microsoft.Web.Helpers assembly. You can get this assembly from the Bakery starter site in WebMatrix 2 Beta or from conveniently from here

To add a Google map to your website is as simple as the following lines of code.
<section id="map">
<div style="margin-bottom: 5px; font-weight: bold;">UiS Stavanger</div>
@Maps.GetGoogleHtml("Kjell Arholmsgt. 41, 4036 Stavanger", zoom: 15)
</section>
@Assets.GetScripts()
@Assets.GetStyles()

The map types that are supported right now are Google, Bing, Yahoo and MapQuest.

Download the sample.

Some handy information


You can get more on the new features of Web Pages 2 Beta here. Some of the new features that are in Web Pages now, will appear in the other parts of ASP.NET in line with the one ASP.NET vision.

Thursday 22 March 2012

Visual Studio 2010 & VS11 Side by Side on Windows 8 Consumer Preview

As part of my talks on VS11, I wanted to show some of the new templates that are shipped out of the box in Dev11 (VS11). As I detailed in my previous post, the new templates are only available when you are running on Windows 8.

This posed a bit of a dilemma because I was also doing a session on building a hybrid Windows Azure application. The Azure tooling story for VS11 is that it will be included at a later date but it didn’t ship with the beta. For the moment, Azure development is done in VS2010.

So I decided to bite the bullet and install a new copy of Windows 8 Consumer preview and see what happens when I install VS2010 and VS11 side by side. It was a lot less painful then I thought. Your mileage may vary depending on your installation.

The order of installation was

  1. Visual Studio 2010
  2. Visual Studio 2010 Service Pack 1
  3. Visual Studio 11 Beta
  4. Some Windows configuration voodoo
  5. Windows Azure SDK 1.6

I installed Visual Studio 2010 first and then updated to SP1. This also allows me to demo round tripping quite easily. After that, it was over to VS11 Beta and install that. VS11 Beta did its install thing quickly and I was good to go from a basic install standpoint. Both IDEs started as expected and no issues. Didn’t get any errors or collisions so I was happy at this point.

Taskbar

Now we get to the tricky side of the install. If you are used to working with the Azure SDK, you normally fire up the Web Platform Installer to install it. But Windows 8 doesn’t ship with .NET 3.5 activated. The install will fail even if you select to install .NET 3.5 for Windows 8. Of course, the error was a bit cryptic as they usually are so I tried configuring some stuff and manually enabling .NET 3.5 etc. Finally after some swearing and muttering I decided to read the manual! This limitation is detailed on the install notes.

WebPi

So I followed the details on installing the Azure tooling on the Windows Azure development site.

IISet

I configured the features as detailed in the install notes and added some of the additional ones that I use such as IIS6 compatibility. I also installed SQL Server 2008 R2 Express edition without the tools as I already have SQL Server 2012 running on the default instance with full tooling support.

Once I had configured it, I installed the Azure tooling in the following order

  1. WindowsAzureEmulator-x64.exe
  2. WindowsAzureSDK-x64.exe
  3. WindowsAzureLibsForNet-x64.msi
  4. WindowsAzureTools.VS100.exe

WorksOnMyMachineAzureProjectThe installation went smoothly and I opened up VS2010 and viola there was the Azure tooling and I could work away. The experience was ok, once I read the manual (honestly who reads the manual!).

As with all beta software there are a full caveats and not everything will be compatible with your installation such as installing the async CTP for VS2010. This has caused a few issues for people so be careful.

Tuesday 20 March 2012

The best of VS11 (Talk from Dev11 Launch)

This evening I have just finished a talk on the best bits of the new VS11 beta entitled turned your Web Development up to 11 (thanks to Glenn Henriksen for the inspiration). Coincidently Scott Hanselman, also published a post today while I was speaking with some of the stuff that I was talking about.

Anyways, here is a quick recap of the session for those that missed it.

The new IDE

The new VS11 IDE has a slimmer new design with Metro styling all the way through it. It has a faster startup time in its Beta version as compared to its older brother VS2010 when both are in their out of the box just installed configuration. I currently have VS2010 SP1 and VS11 Beta running on Windows 8 Consumer Preview side by side without any problems. It makes it very easy to show the new project round tripping feature (discussed later) and removing some of the pressure of trying to run Windows 8 with your existing development environment tools.

New Templates

There are new templates available when running on Windows 8 which are not included in VS11 when running it on Windows 7. And this is because they are Metro specific. These include the new Metro style applications in C# and in JavaScript.

Templates

Search overhaul

One of the one of the biggest overhauls in VS11 is the search and specifically the new Quick Launch. In my talk, I asked how you would change the references for intellisense for JavaScript (which leads into another feature in VS11 .. again which I will say later!). In VS11 it meant, playing hide and seek with the menus and trying to figure out where in the extensive options pane this setting lived. In VS11 it’s a quick case of using the shortcut Ctrl + Q and typing javascript  which will show the different options including changing the references for JavaScript.

Javascript

You can also use this Quick Launch function to learn keyboard shortcuts as it shows you in the results the shortcut along with the description of the item where applicable.

LearnShortCuts

This search overhaul has continued into the Solution Explorer where you can type some text and get any files or classes containing that text. You can even use regular expressions in this search.

SearchSolutionExplorer

Search has been improved in the Add References dialog as well

SearchReferences

In the code view, find now works as expected. In VS2010, pressing Ctrl + F would bring up the Find and Replace dialog box which really didn’t make sense. Now it brings up the Find dialog and you can search across different scopes and again you can use regular expressions if you so wish

The new preview window

Ever get tired of opening files to just see what’s inside of them and those files hanging around cluttering up your tabs because you forgot to close them when you were finished looking in the file? Well that’s all changed now in VS11 with the new preview window. This window opens when you click on a file allowing to preview its contents without actually opening it. But wait there’s more! If you decide that you actually like what you see. And they have finally added the Close All Documents button!!! Before you had Close Document, Close all documents but this. Now you have that final part of the triad, Close All Documents. It’s the tiny things that make a difference

Preview CloseAll

Templates are now extensions

How often do templates that ship with Visual Studio get updated or refreshed. The answer is simple, when the next version of Visual Studio ships. Now they are extensions or VISXs meaning that templates can be updated and added out of band. Now for those of you thinking ahead you can see why this would be one of the excellent little things hidden inside of VS11

Project Round Tripping

One of the biggest problems when a new version of Visual Studio comes along be it in Beta or in its RTM edition is that it has updated the solution file making it impossible for you to work with it in the previous versions. This breaking of solutions meant that all developers had to upgrade at the same time or projects had to be built in only one version of Visual Studio meaning you kept previous versions installed so you could open them. Also if you had clients that you were developing for, who weren’t upgrading that project stayed in the old version.

Of course there were hacks such as two SLN files but this led to developer frustration when someone added a new project to the solution but didn’t upgrade both SLN files. Well this is no more. With the new Project Round Tripping feature in VS11, you can use *nearly all* of your existing VS2010 SP1 projects in VS11 without having to upgrade or break your SLN file. Not all projects are compatible though and there is an article on MSDN detailing which projects will work and which won’t work.

This feature works with Visual Studio 2010 and SP1 and you can’t use it with Visual Studio versions older than 2010. Additionally if you use any feature that is specific to the new version of Visual Studio such as changing the framework version to 4.5 then the project cannot be opened again in VS2010.

Page Inspector

Quite simply, if you use FireBug, you will love this. If haven’t used FireBug before prepare to be amazed. This is honestly one of the best new features for Web Developers in VS11.

Page Inspector allows you to view your page in a number of different ways such as Files Mode which shows you which files in your solution make up this page. Extremely handy if you are brand new to a well established project that combines multiple files into one view.

FileView

You also have inspect mode which shows what control or place in your file generated that piece of HTML. Genius! Forget adding silly text or test calls to find where in the code is generating the output, just hover over the piece in the HTML view that you are curious about and Page Inspector will show you the rest.

InspectMode

You can also play with the source and Page Inspector will see that it has changed and update accordingly once you refresh. It will also prompt you that it has changed.

Refresh

This feature gives you the tools to expertly find where and what is happening in the HTML of your application with more power in actually finding it than FireBug has. Don’t get me wrong, I love FireBug but it doesn’t have the ability to show where in the files is generating the HTML that you are looking at. I also see Page Inspector as a great training tool for anyone trying to learn a new aspect of ASP.NET from junior developers all the way up the food chain.

New HTML editor features

Some of the irritations that you ignored when you started development but grew as you became more and more proficient have been fixed. Such as smart indent. This is where you type a tag and press return and in VS2010 it would start at the same position as the tag rather than tabbing in. Now it does.

Another frustration was when you changed a tag, you had to go find the corresponding closing tag and change that. Now it does.

For those of your who used ReSharper or CodeRush or another IDE extension, you probably wont remember a time where you couldn’t generate a method stub of a control from the Code View. Now you can.

Create

The new Smart Task feature for controls gives you access to the same functionally that you had on a control when in Design view but from the Code view.

DataGrid

And finally the improved Intellisense reduces options and it shows you the bits as you type.

It’s the little things that just make life a bit easier for developers.

New CSS editor features

Do know what the shortcut command CTRL + K, C means? Its means to comment out the piece of code you have highlighted or the line you are on. You know where it never worked. In the CSS editor.. well it does now. It may not sound like a big thing, but when you expect that shortcut chord to work across the editor uniformly and it doesn’t in one spot it because an annoyance.

The new color picker is a simple yet very effective addition to the editor. Before if you didn’t know a hex value for a colour (yes I spell it the British English way!), you had to use something like Paint.NET to find the colour code. Now its built into the editor and it appears when you type color: in the CSS editor.

The Testing Framework

Unit testing is now a complete first class citizen in VS11. There has been a massive amount of investment in this area and Peter Provost has a great series of articles on his blog about this.

This is just a quick overview of some of the features that I like.

VS11 now has a test runner framework which allows test runner extensions to be installed into VS11 so that your unit tests will appear in the Unit Test Explorer window and all run as part of the series of tests regardless of the testing framework you use. So if you use MSTest, Nunit and xUnit.NET in the same solution, no problem. Just download the test runners for Nunit and xUnit and install them and off you go they will appear in the Unit Test explorer. And what is the most important information you want to see about your unit tests? It’s the one that fail and these come up first on the Unit Test explorer window.

UnitTests

Also you can set your unit tests to run automatically on build!

OnBuild

The Code Demos

I finished off with some code demos which I will do in the follow up post to this. I did this like a sprinting lap around VS11 and I hope people got a decent glimpse of the real new goodies in VS11.

If you haven’t already downloaded the beta, you can do get it from here