Code Optimized Web Development Profile (VS 2010 and .NET 4.0 Series)

This is the fifth in a series of blog posts I’m doing on the upcoming VS 2010 and .NET 4 release.

Today’s post covers a new “Web Development (Code Optimized)” profile option we are introducing with VS 2010 that allows you to optionally configure Visual Studio to run in an IDE layout mode that hides the WYSIWYG web designer and instead optimizes around a rich “source editing focused” tooling experience.

VS 2010 Web Profiles

When you first run VS 2010 it prompts you to select an IDE profile to use.  The profile you select will configure how tool windows are displayed/docked in the IDE by default and set the default keyboard shortcuts.  You can then customize any of these settings by using the Tools->Options menu within the IDE and then override/change them.  You can also later reset your profile and pick a different one by choosing the Tools->Import and Export Settings menu command.

One of the things you’ll notice when you run VS 2010 Beta2 for the first time is the inclusion of two “Web Development” profiles in the list of options:

0 Choose Default Environment Settings

The first “Web Development” profile option is an evolution of the existing web development profile option from VS 2008 (with some nice improvements that help improve screen real estate usage with VS 2010).  It also allows you to take advantage of all the great WYSIWYG HTML and ASP.NET Page designer improvements we’ve done with the VS 2010 release (I’ll cover these in more detail in later blog posts in this series).

The second “Web Development (Code Optimized)” profile option is a new profile we are introducing with VS 2010 that is optimized for web developers who do not want to use a WYSIWYG designer when doing their web development, and who prefer a “source only” editing experience when working on pages.  This IDE profile option hides the WYWISYG page designer tabs, and configures a default IDE layout that maximizes the amount of code that is displayed on the screen (with a minimum of toolbars and tool windows).  It still provides a full intellisense/debugging and source editor experience for pages.

Comparing the VS 2010 Web Development Profiles

You can get a sense of the difference between the two profiles by comparing screen-shots of the Visual Studio IDE layout immediately after the two different “Web Development” profiles are applied:

Screenshot of the “Web Development” Profile:

The layout below demonstrates the default IDE layout (at a 750x650 monitor resolution) when the standard “Web Development” profile is applied.  This profile is an evolution of the existing “Web Development” profile in VS 2008 and exposes design/split/source tabs within the document window of any HTML or ASP.NET page:

1 Old Profile Small IDE

Screenshot of the “Web Development (Code Optimized)” Profile:

The screen-shot below demonstrates the default IDE layout (at a 750x650 monitor resolution) when the new “Web Development (Code Optimized)” profile is applied.  As you can see, the profile optimizes the screen real estate around displaying and editing code on the screen, hides all toolbars by default, and disables and hides the designer tabs within the document windows of HTML and ASP.NET pages:

2 New Profile Small IDE

Below is a screen-shot of the “code optimized” profile at a larger monitor resolution:

2 New Profile Full IDE Single File

Mixing and Matching Features

All of the different features used in both the standard “Web Development” profile and the “Web Development (code optimized)” profile are exposed via Visual Studio’s Tools->Options configuration dialog.  This means that you can start with any of the VS profiles (including the General, VB and C# profiles) and turn on or off individual features to customize the IDE layout and editing experience however you want it to be.

For example: below you can see the Tools->Options dialog checkbox to enable or disable the HTML designer (which will configure whether the Design/Split/Source tabs are shown at the bottom of each page):

0 Tools Options HTML Designer

This gives you the flexibility to customize your development experience however you want and create a personalized tooling experience optimized for you and your preferred way of doing development.

The two web development profiles that ship in the box provide two good preconfigured starting points that we think offer a nice set of defaults for a large set of the web developers out there.  You can easily choose to start with whichever one feels best to you, and optionally configure them further however you want.

Summary

We are offering the new profile simply as an option for those who prefer a source-focused web development experience. The WYSIWYG HTML/ASP.NET designer continues to be enabled by default with all the other VS 2010 profiles (just like it does with VS 2008), and we have also made a lot of improvements to it with the VS 2010 release (I’ll blog more details about these in later posts).  So don’t worry – the WYSIWYG designer definitely isn’t going away, and will continue to be enhanced and improved with each release. 

We think the new “Web Development (Code Optimized)” profile, though, is a nice new option for developers who prefer a “source editing focused” web development experience, and who do not use the WYSIWYG designer.  The profile option provides an easy way for them to hide the designer (along with its associated tool windows and toolbars) from the IDE layout and instead use a source-focused web development experience.

Hope this helps,

Scott

P.S. In addition to blogging, I have been using Twitter more recently to-do quick posts and share links.  You can follow me on Twitter at: http://www.twitter.com/scottgu (@scottgu is my twitter name)

46 Comments

  • How does this differ from full-screen (ALT-SHIFT-ENTER)? Seems quite the same..

  • Fantastic!

    There's nothing i dislike more than design view to be honest, it's slow, clunky and when you open it in design by accident it takes about a week to load up.

    Thanks for making my life that little easier!

  • Love the article Scott.. Keep em coming :)

  • Great... disabling the Designer button is what I was looking for since... ever.
    I never used the designer view, and when I clicked the button by mistake it took ages for VS to become responsive again. So, no button, no more clicking on it by mistake and waiting 30secs before being able to use VS again.

    Tiny but very useful feature!!

  • Awesome news for those of work that work in code only mode. Which I'm pretty sure is 100% of developers anyway.

  • SWEET! The design view will not be missed.

  • Is there a way to change the profile after once you have selected it in the beginning. And No I do Not want to change them manually one by one for all option. I just want to select a different profile. This is a common requirement as I might work on a Windows application some time and On the same box after a few weeks/ months work on a web application. Is there a simple way to select and change the profile of VS then?

  • That's great - I am one the Code-optimized kind of developers. But I use the design view for one thing, and one thing only. I can never remember the exact method signature for the different server side events on controls, so when I need to create one of those I switch to design view (since the events arent accessible in the Properties pane when in source view), and double click the event I'm interested in, to have a method with the right signature inserted in the code-behind file.


    So what I'm now really interested in is: Does the Code optimized view sport som kind of feature that helps me wire up the different control events with methods with the correct signature?

  • Really like having the "text editing"-related toolbars off in the new profile. I'm always turning those flipping things off after a new install. Each different file type popped up a different one which led to an inconsistent user experience.

    Thanks for paying attention to those little niggling details that altogether make for a sub-standard experience. Looking forward to trying out Beta 2!

  • Nice feature. I always wanted this. Is the same thing is implemented for all design views? Mainly can we disable WPF design view ?

  • I seriously consider this is a very important feature as it also includes a mindset change. Many pro-developers like myself never touch a designer and hate it when we accidentally press the wrong key, goes into designer-mode and reformats all our code.

    I consider VS.NET the best IDE for both newbie's and pro developers, and there has been a lot of effort to make it as simple as possible to develop with a lot of point-and-click programming. Having a pro-user mode will be awesome as it will make the IDE better (and hopefully perform quicker) for pro-developers.

    What I would be interested in though, is what your relationship with ReSharper is like (VS.NET would not nearly be as good without it) but it still looks like its just an advanced plug-in that duplicates (imho greatly improves) a lot of VS.NET functionality.

    Having multiple ways to achieve the same thing complicates the UI (and probably slows it down too). I'm not sure what your efforts in this area is, but it would be nice if there was a 'optimized for ReSharper' option as well. As we could remove a lot of duplicated functionality we don't need.

  • I think 90% of developers don't even mind opening the Design View.
    Not even the people from our HTML/CSS department are using it.

    And I don't think the Design View will ever be useful for anyone but the newbies. Too many possibilities to reference CSS files (including dynamic loading of CSS files and Master Pages).

  • The real question is, when will Beta 2 be available? Beta 1 is not very stable and is extremely tough to use for more then a few hours without crashing. Working with a project that's already committed to .NET 4.0, we're dieing for a new beta release of Visual Studio. Since you are discussing a feature new to Beta 2, does that mean the release is imminent?

  • Thanks for your useful article

  • It seems like this is addressing the problem the wrong way. I very often want to work in the design on one page and without it on another. Changing a global option every single time I open a file isn't really very helpful. Isn't there a way to choose whether I want the designer when I open the file?

  • Will there be a similar option for XAML development? One of the first things I do on a fresh 2008 install is switch the XAML opening default to be "Source Code (Text) Editor" because the designer is so useless and slow. While I'm sure the designer has been improved in 2010, it'd still be nice to have a "code optimized XAML" option as well. (Though I guess I could just switch the default opening like I do in 2008.)

  • Hey Now Scott,

    Nice Post!

    Thx 4 the info,
    Catto

  • Screenestate:
    Love that you guys take this on this "mission" :D !
    (with profile solutions and multiple monitors)

    I like to "hack" vs 2008 to behave like I want it to :)
    I use Winsplit revolution, with this wonderful program I can do things with VS. (and other programs) that utilizes my screen estate to a fuller extent.

    Some examples:
    Like the feature "Web Development (Code Optimized)”" in vs2010 I can do practicly the same with Full screen mode in vs 2008 (or before)

    IN fullscreen mode I can with winsplit tile VS workspace with other windows so that it is in fullscreen-mode even though it's not fullscreen :) (tada => like the profile "code otpimized" )
    ; the wonderful thing with fullscreen mode is that I can quit fullscreen mode and have all sidebars in the same state I left them.

    The same winsplit-solution can be applied to the (in my opinion) much hated "wizards"-dialogs that are far to small and in my opinion none large screen or purpose optimized.

    With Winsplit I can change the size layout directly with my keyboard, without having to resort to mouse resize:ing of the window.
    For example "Add new item" - option triggers a wizard that look MUCH more nicer and more eye/information scan friendly if it's
    full screen height with 2 to 3 items in a row.
    CTRL + left arrow + left arrow gives me this more optimised view thanks to winsplit.

    // Hopes this feedback triggers other people and you guys to get new ideas to produce an even more user friendly, highly productive and more intuitive product. Thanx :)

  • hi Scott,
    I wonder where do you get these wonderful posts from. its such a pleasure to read you articles. keep posting.

  • re: Andrei Rinea -

    The difference is that the designer is not there at all. This is absolutely huge because that designer is quite the resource hog and as someone else mentioned, a large time sink if you hit it by accident.

  • I only use the designer for one purpose, generating the events for the server side control because i dont remember all the event signatures. Some times the events are shown in the property pane when i am in the code view mode, but it happens only rarely (think its a VS bug) so i have to go to the designer, which takes about months to load ( i can switch multiple jobs between that time).

    Is there any way to resolve the bug regarding showing of the events when we are in the codeview on the properties pane ?


  • did not see this coming, nice surprise, but a minor thing. How about a post about how (if) C# 4.0 can be used in web apps?

  • Nice feature!do you have any idea when will vs2010 beta 2 and rc be released

  • Nice! Thank God for Visual Studio! VS2010 is looking really good....hopefully XAML editing/ Silverlight development will be more stable and performant in Beta 2.

  • @vik2000in,

    >>>>>>> Is there a way to change the profile after once you have selected it in the beginning. And No I do Not want to change them manually one by one for all option. I just want to select a different profile. This is a common requirement as I might work on a Windows application some time and On the same box after a few weeks/ months work on a web application. Is there a simple way to select and change the profile of VS then?

    Yes - you can change your profile at any time by choosing the "Tools->Import and Export Settings" menu command. This allows you to choose any of the built-in profiles, and/or save/import a custom one you've created.

    Hope this helps,

    Scott

  • @Jesper,

    >>>>>> But I use the design view for one thing, and one thing only. I can never remember the exact method signature for the different server side events on controls, so when I need to create one of those I switch to design view (since the events arent accessible in the Properties pane when in source view),

    Unfortunately there isn't automatic support for wiring up server events in HTML source mode (unlike the XAML editor - which has a nifty way of doing this purely via source). I'm hoping we can enable this in a future update/refresh post the VS10 release though.

    Hope this helps,

    Scott

  • @Demis,

    >>>>>>> What I would be interested in though, is what your relationship with ReSharper is like (VS.NET would not nearly be as good without it) but it still looks like its just an advanced plug-in that duplicates (imho greatly improves) a lot of VS.NET functionality. Having multiple ways to achieve the same thing complicates the UI (and probably slows it down too). I'm not sure what your efforts in this area is, but it would be nice if there was a 'optimized for ReSharper' option as well. As we could remove a lot of duplicated functionality we don't need.

    We work pretty closely with vendors like Resharper (I believe they've been working with VS10 for over a year now).

    VS10 does have much richer code authoring features that I'll cover in later posts. Some of these features do provide capabilities that are only in plugins like Resharper today. We now have an even richer extensibility system in VS10, though, so there are plenty of good opportunities for Resharper and others to provide a lot of additional value.

    Hope this helps,

    Scott

  • @Ryan,

    >>>>>>> The real question is, when will Beta 2 be available? Beta 1 is not very stable and is extremely tough to use for more then a few hours without crashing. Working with a project that's already committed to .NET 4.0, we're dieing for a new beta release of Visual Studio. Since you are discussing a feature new to Beta 2, does that mean the release is imminent?

    We are getting closer to Beta2. There are so many new features I wanted to discuss - which is why I started this blog series early (I have a lot more posts to go ).

    Hope this helps,

    Scott

  • @David,

    >>>>>>> I very often want to work in the design on one page and without it on another. Changing a global option every single time I open a file isn't really very helpful. Isn't there a way to choose whether I want the designer when I open the file?

    You can't change the profile on a per-page basis. Instead it might just make sense to leave the HTML designer enabled and only click the design tab if you want/need it.

    Hope this helps,

    Scott

  • @Harshil,

    >>>>>>>I only use the designer for one purpose, generating the events for the server side control because i dont remember all the event signatures. Some times the events are shown in the property pane when i am in the code view mode, but it happens only rarely (think its a VS bug) so i have to go to the designer, which takes about months to load ( i can switch multiple jobs between that time).

    You do need to go to the designer once in order to enable the events tab within the property window. Once that is loaded, though, you should be able to work in source view and use the property window to add events.

    Hope this helps,

    Scott

  • @Mike,

    >>>>>>>> How about a post about how (if) C# 4.0 can be used in web apps?

    C# 4.0 can definitely be used for web apps with ASP.NET 4.0. I'll do several posts in the future that cover this.

    Hope this helps,

    Scott

  • Visual Studio VS2010 is looking really good.

  • Is anyone still using design view? I've totally forgotten there is such an option in VS :)

  • Why making this option at the VS option level.

    I can perfectly imagine some project (mvc for example) where code optimized mode is better and other project where WYSIWYG Html editor is still wanted. I can even imagine that both type of project live together in a single solution. It would be better to allow this option at the project (or even page) level.

    Frederic

  • If you disable the Designer, do you have access to the Control Designers when it comes to WebForms? That is the only reason I ever open design view, but for certain controls it sure is nice to be able to access their designers, think about the set validation expression on RegularExpressionValidator as one example, or "Convert to template column" in many of the 2.0 Databound controls.

  • My post #7190649 didn't get the changed title, don't know why, but otherwise the story doesn't make sense. Here it is again:

    "When do we see and IDE View or Perspective Manager, in VS2012 or before?"

    -- Abel --

  • >>>>We now have an even richer extensibility system in VS10, though, so there are plenty of good opportunities for Resharper and others to provide a lot of additional value.

    Will this ever include an option for others to offer a replacement for the build in wysiwig-editor?

    Mathias

  • Designer View is for newbie! Kill it please.

  • ----
    >>>>>>>I only use the designer for one purpose, generating the events for the server side control because i dont remember all the event signatures. Some times the events are shown in the property pane when i am in the code view mode, but it happens only rarely (think its a VS bug) so i have to go to the designer, which takes about months to load ( i can switch multiple jobs between that time).

    You do need to go to the designer once in order to enable the events tab within the property window. Once that is loaded, though, you should be able to work in source view and use the property window to add events.
    ----

    Following on from Harshil's comment above, will this be fixed in VS2010 so that you can add events from the property window without going to design view?

  • Great work on the new developments. Unfortunately, this won't be much of use to me for the same reason that Harshil mentioned. I also forget the event method signatures, and only use design view for that purpose. Here's to hoping those can be generated from source view, so I can finally be rid of the cumbersome design view. Thanks for your posts Scott.

  • This is awesome. Nice to not have "features" forced on you. I never use design view and accidently opening it is always a pain.

  • This is a helpful addition specially as many of us don't ever look at the design.
    Hope its possible to create auto wired events for you right from the code view as in the case of xaml.

  • Very useful feature. I do a lot of my work on laptops and page real estate is very important for me.

  • "VS 2010 Beta2" available where can get. Thanks.

  • Nice feature. Wouldn't it useful to have a dropdown instead of having three buttons; Design , Split, Source. In there if there the options are

    . Design
    . Source
    . Code Behind
    . Design/ Source split
    . Design/ Code behind Split
    . Source/ Code behind Split
    . Design/ Source/ Code behind Split (Good for very high resolution monitors, see all the code for a page at once)!

    Basically if there are also options to split the screen with code behind. Having these buttons takes more real estate, a combo may be in toolbar would be better which can be shown or hidden using customize toolbox options.

    Sometimes I just want to see Code Behind with Design or Source which is not available.

    Thanks for the great article as always by you. Keep 'em coming..

    Regards,
    Ali
    http://troublefinding.blogspot.com

  • Would have been nice if the description would have warned it was going to disable the html designer. I could have saved a bit of time trying to figure out why I could not get the designer to come up :)

Comments have been disabled for this content.