DotNetCurry Logo

Visual Studio 2013 (Preview) - What’s New for Web Developers

Posted by: Suprotim Agarwal , on 7/17/2013, in Category Visual Studio, VSTS & TFS
Views: 37513
Abstract: A quick overview of the new features in Visual Studio 2013 (Preview) for Web Developers. We also take a peek at Mads Kristensen’s excellent Visual Studio plugin - Web Essentials.

With every Visual Studio release comes a big set of updates in IDE features along with Framework and language enhancements. With the Web Development team releasing out of band updates for ASP.NET and Azure development, things now move much faster than the earlier two to three year cycles we had. However, Microsoft as a whole is stepping it up with the upcoming Windows 8.1 and Visual Studio 2013 release.

Also worth noting is the ASP.NET team’s driving philosophy on ONE ASP.NET where developers can pick and choose from an À la carte  choice of frameworks and libraries. Changes in Visual Studio 2013 shows real progress in this direction. Last month’s BUILD conference showed us lots of new enhancements that are coming to Visual Studio and ASP.NET itself. Today we will review some of these changes.

 

VS 2013 Template Changes

Change 1: Getting started with Visual Studio 2013 Preview (Ultimate edition) you will notice changes from the Create New Project dialog.

new-starting-template

Fact is the Portable Class Library template that we see is a bug and will go away.

Change 2: The Template selection dialog has also changed and is likely to change further by the time the release happens.

new-project-template-combinations

It presents us with a list of Templates that we can mix and match with core references. For example we can select MVC + Web API or MVC + Web Forms or all the three. Similarly we can mix and match Mobile with Web API or Empty with Web API only.

The team will be releasing further guidance on how to create our custom templates to fill in the ‘Select a template’ list.

Change 3: Configure Authentication button in the Template Selection dialog is another change. It allows us to pick between ‘No Authentication’, ‘Individual User Accounts’ and ‘Windows Authentication’. So now we can choose separately if we need Authentication in our chosen template or not. Earlier choice of Authentication was tied to certain templates only.

Note: This dialog also looks different from what was demoed on screen at BUILD so it’s likely to change extensively by release.

authentication-options

Once you hit ‘Create Project’ Visual Studio does its thing and a default project structure is setup.

Change 4: BootStrap CSS by default

bootstrap-css-by-default

Yes, the ASP.NET team has picked up Twitter BootStrap as the default Responsive UI framework. Now we can stop building our own templates. I am going to leave you with this, to learn more about BootStrap you can refer to Twitter Bootstrap and ASP.NET MVC - Building a Responsive UI we did in the past.

Change 5: Scaffolding (for MVC, WebForms and Web API)

Starting with Visual Studio 2013, Scaffolding is going to be a common Tool for all types Projects (including Web API/MVC/Web Forms). Before we start scaffolding we add the following class and build the application

public class Contact
{
    public int ContactId { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Address { get; set; }
}

We start scaffolding of CRUD screens for the Contact class with the Add > Scaffold menu.

scaffolding-menu

Next we are presented with a screen of options on what we would like to Scaffold

scaffolding-selector

As seen above, we’ve selected the MVC Controller with Entity Framework option. Next we provide the Controller Name, Model Class, Data Context Class

scaffolding-mvc-details

Note: This dialog will differ based on the Scaffold option we selected. For example, if we select Web Forms, we get the following Scaffolding dialog

scaffolding-webforms-details

Once the scaffolding is complete, if we run the application and create a new Contact, the scaffolded pages use BootStrap as expected

new-create-ui

new-index-ui

That was a glimpse of scaffolding changes. There is more, including ability to scaffold Mobile Views/Areas so on and so forth.

The overall philosophy of One ASP.NET is slowly but surely permeating through the entire Web Development stack. With that, let’s now dive deeper into Visual Studio 2013.

Visual Studio 2013 IDE Changes

Before we get into what’s been added, let’s mention the two things that have been removed:

- Cassini Web Server: The ubiquitous web server that’s been with us since time immemorial, is now gone. It’s IIS Express all the way.

- FrontPage Extension: No more FrontPage Server Extensions and publishing using them, they have been deprecated and removed.

Apart from these two, it’s worthwhile mentioning that MVC 5.0 takes dependency of .NET 4.5 (even though it is not a IDE related change).

In case you don’t agree with my sequencing, feel free to jump ahead, we are covering JavaScript Editor enhancement, CSS Editor changes, HTML5 Editor (rewrite) and finally the amazing project Artery or Browser Link and Web.Config Intellisense.

Web Essentials – Free and (now) Open Source bag of goodies from Mads Kristensen

Well for any ASP.NET developer installing Mads’ Web Essentials Visual Studio Extension is a must. During BUILD, Mads made it’s source code Open Source and you can directly look at the code and contribute to it on Github. Today we’ll look at Visual Studio 2013 features plus Mads’ work.

JavaScript Editor Enhancements

The JavaScript Editor was scrubbed in VS 2012 release and has now started seeing incremental benefits. Some of the enhancements to it are as follows

1. Document Outline (Dropdown for Methods): JavaScript files now have Method lists in a dropdown and they are indented as per their scope. Also if the cursor is in a method, the method is highlighted.

js-document-outline

2. Folding Editor/Document: As we can see above, the JavaScript editor is also a folding editor where you can collapse methods if required.

3. ECMA Script 6 validation built in: The editor supports ECMA 6 hence if you use ECMA syntax like const, the editor will validate a variable as a const

js-ecma-6-validations

4. Identifier Highlighting: A feature that was previously in Web Essentials – Ability to highlighted selected identifier has now moved to code Visual Studio

js-variable-highlight

5. Less and CoffeeScript support are also built in now.

HTML5 Editor Enhancement

Apparently the HTML Editor has been rewritten from scratch. This has allowed the team to bring in a lot of new capabilities at the same time making it much more pluggable and extensible. Some of the new features in the HTML editor are as follows

1. Ampersand autocomplete for copyright etc. As we can see below, HTML codes for Unicode characters have now got special auto complete support.

html-auto-complete-ampersand

 

2. HTML 5 Supports data- attributes that you can use for additional validation or templating. The new editor now understands these and adds intellisense for these on-the-fly. For example, data-foo is added in intellisense as we can see below:

html-autocomplete-data-attr

Not only does it add the attribute, but it also offers the values for selection

html-autocomplete-data-attr-val

3. Smart Tags various HTML attribute like for <img> to insert height/width attributes with values taken from the actual image.

html-smart-attr-hw

On using the smart tag, the following values get added

html-smart-attr-hw-app

4. All throughout Visual Studio, Alt + Up/Down moves current line up or down.

5. Native Angular Support: Angular tags starting with ng- are now supported in the preview. Shortly there is will be more support for generating code/view model etc.

html-angular-support

6. RDF specifications for Facebook Open graph as well as Twitter cards is coming shortly. Similarly Windows phone meta tag support is already in the preview

html-meta-ms

As is Apple iTunes app support

html-meta-apple

These meta tag support allow us to build Web Applications that merge seamlessly with the various mobile platforms. We could always use these special tags, however getting Intellisense support for these simply makes us more productive by not having to refer to a cheat sheet every time we need to do something like this.

That previews the HTML editor changes. Key point being the new editor is far more extensible and easily pluggable than the existing editor and as a result, the Team is working on churning out extensions and improvements at a much faster rate than before. Also once guidance for building these extensions are released, it will be much easier for us to plug in our own extensions.

Browser Link – Code Named Artery

This is probably the most exciting enhancement being worked on by the Dev team. Visual Studio 2012 gave us the Page Inspector. That allowed us to go back and forth between a sandboxed browser and the server side code.

However, ‘Browser link’ takes it up one notch by getting rid of the sandbox and directly using the target browsers. This feature uses SignalR under the hood to create an active connection between Visual Studio and the Browser(s) through which Visual Studio can update Browsers when any markup change is effected. This is rather difficult to demonstrate in a single image because of its real-time nature. Suffice to say, if you have multiple browsers for your app as follows

browser-link-step-one

Next you update the header to ‘Testing Browser Link”, save the file and then either use the Refresh menu or hit Ctrl+Alt+Enter

browser-link-step-two

Both the browsers will simultaneously update to reflect the new header

browser-link-step-three

Well, here you just have to keep faith that I didn’t hit F5 on each browser separately Smile.

This was with the HTML changes, if you change CSS, the CSS files get updated as well and in fact, only the CSS is reloaded making the refresh really snappy. There are a host of other things being worked on like browser plugins to support two way edits and having more server side details on the browser (like master and child page details).

By default Browser Link is enabled only in Debug mode. It checks for the compilation mode flag in Web.config. To make it available in production, you can force it via the following setting in Web.config’s appSettings section.

<add key="vs:enableBrowserLink" value="true"/>

Here true means browser link is enabled across both debug and production. False means it’s disabled in debug as well as production mode.

There are more features coming like syncing fields and scroll positions across all linked browser etc. This is truly an exciting feature with immense possibilities.

Web.Config Intellisense improvements

Last but not least, there is a Web.Config intellisense update worth mentioning.

web-config-rewrite

This is an end user requested feature that Mads developed providing Intellisense for the <rewrite> tag in Web.Config. An interesting side note is that using URL Rewrites, you can actually setup an outbound rule that injects scripts for tracking and statistics if you want. The following entry shows how to add a placeholder script tag at the end of every page.

<rewrite>
  <outboundRules>
    <rule name="Add Tracking Script" patternSyntax="ExactMatch">
      <match filterByTags="None" pattern="&lt;body>"/>
      <action type="Rewrite" value="&lt;script> // Web Analytics Tracking Code &lt;script>&lt;body>"/>
    </rule>
  </outboundRules>
</rewrite>

It essentially replaces the end body tag with a custom script and an end body tag.

Conclusion

That’s brings us to the end of… this article, not the list of features that have been added to MVC5 or ASP.NET vNext. However today we focused on just Visual Studio and what is in it for Web Developers. The Visual Studio XAML team has been hard at work and they have their fair share of enhancements. Some of which we have already seen in one of our previous articles What’s new in XAML for Windows 8.1

In future we will focus on framework changes and enhancements that are upcoming.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Joe on Wednesday, July 17, 2013 10:24 AM
That Browser Link feature sure does look interesting!
Comment posted by Suprotim Agarwal on Wednesday, July 17, 2013 12:02 PM
@Joe Yes exciting times ahead!
Comment posted by Mahesh Sabnis on Monday, July 22, 2013 2:00 AM
Excellent Article
Comment posted by Timbo on Monday, July 22, 2013 4:45 AM
Good article, don't suppose you have any detail/examples for integrating an existing database with the new identity/claims system?

Existing articles are pretty basic and dont cover this case
Comment posted by Sini on Wednesday, July 31, 2013 10:50 PM
One place where we get to learn easily and quickly and get yourself updated to trends :)
Comment posted by Suprotim Agarwal on Friday, August 2, 2013 12:23 PM
@Mahesh: Thanks :)

@Timbo: This was a quick overview of the new features. We will explore specific features in upcoming articles

@Sini: thanks for the kind words :)
Comment posted by vijayakumar on Saturday, August 3, 2013 12:33 AM
Excellent Article !!!