When Written: Oct 2012
Obviously if you are developing for Windows then Visual Studio has always been your development tool of choice, but what about web development? I don’t intend to attempt a full review of Visual Studio here, that is for other parts of the magazine. What I would like to do is highlight the areas that will either be of interest to web developers or some of the new ways of designing apps. If you want a full list of the new features then take a look at (http://msdn.microsoft.com/en-us/library/bb386063.aspx ).
With the launch of Windows 8 there is also the launch of a service called ‘Windows Store’ which is like the popular iTunes store and is a marketplace for developers to submit their apps, then if they are approved by Microsoft they can be sold or given to users. In fact it looks like the only way to install WindowsRT (previously called ‘Metro’ ) apps on many devices will be through this store. In Visual Studio, to develop a Windows Store you first have to register for a developers account; it does all start to smack of ‘Big brother’ doesn’t it? Obviously there are considerable benefits to the developer who can now easily reach millions of Windows users, but how does a developer make sure that their app appears high enough on the list?
Already via the web a developer can reach all the users out there, do we really need this extra policing of apps and control of sales by yet another large cooperation? Let’s hope that this method of selling doesn’t lead to a ‘race to the bottom’ as apps get cheaper and cheaper, like iOS, where users complain about paying more than a fiver for an app no matter how good or useful it may be and with the reduced revenue for all but the lucky few who hit the big time, we end up with a lot of poorly supported, limited functionality apps which are often no more than a five minute wonder. Windows Store is not the only way of developing apps but it is the only way of producing WindowsRT apps which appear on the first desktop.
Normal Windows applications can be installed in the traditional manner via the desktop and of course web applications have no restriction. But for tablet devices and the Windows Phone the apps for these will have to be delivered through the Windows Store.
I, like many in the industry, use a variety of tools to achieve what we want as each tool has its own strengths. I find Dreamweaver great for maintaining traditional HTML and ASP web sites, Expressions Web is useful for the design of style sheets with its more comprehensive support of CSS styles and better preview capabilities, Visual Studio for me is great when coding and also developing ASP .NET sites, I also use Notepad++ and Firebug for Javascript plus many others that come and go on my development box depending on the job in hand.
Whilst Visual Studio was useful for ASP .NET developing it was always weak on the design side. JavaScript coding was possible but it always felt like this was added just to please us, support being not much more than syntax checking with intellisense. But this is about to change. With JavaScript, HTML5 and CSS being one of the major ways of creating Windows 8 store applications then it was obvious that any new version of Visual Studio also had to be improved in this area, and it has. So if you develop in web technologies and have not used Visual Studio before now may be the time to give it a try; the Express version is free and totally useable, all the other versions are available for free for 90days for you to try.
Blend has been finally incorporated into Visual Studio but not everywhere.
If you develop in Silverlight then you would probably use Microsoft’s Expressions Blend tool to do your design and perhaps the basic coding. Now Blend has been built into Visual Studio 2012 which is a great boon, not just for Silverlight developers but it can also be used as a design tool for WindowsRT when designing Windows Store apps, but be aware that this is currently only possible on a Windows 8 box. If you are looking for any help when designing a Windows Store app that uses HTML and JavaScript then Visual Studio 2012 is a huge disappointment, there is no design view! This is different to writing web apps in Visual Studio where there has always been a design view, albeit not a very accurate view, but still useful. As before, one does get the impression that the rapid development of the underlying technologies is such that there is no time for a maturity to develop, and the design tools which always have to try and play catch-up suffer greatly in their usability and functionality. This is a shame as a really good HTML design tool with drag and drop positioning of elements and correct preview could make Visual Studio the ultimate HTML design tool. Until this happens it is still very much a coder’s tool with the testing of style sheet changes having to be done by previewing in a browser. We will still have to wait for our holy grail of a web application development tool that has a design view as good as Visual Studio 6 was for non-web based applications. I guess this is what they call progress!
Once your hand-crafted carefully honed killer app is finished, Visual Studio fully integrates with the Microsoft Store to enable you to sell it to the millions of Windows users around the world. For teams of developers there is a full versioning and testing system built into the more expensive versions of Visual Studio. Visual Studio 2012 will co-exist on a machine with previous versions, this being a very important consideration to make sure that your previous code is still editable and will not become broken because of the new version of the .NET framework.
The install is interesting because for the first time it allows you to select which hard drives it will install onto. Previous versions of Visual Studio, like a number of Microsoft core products install large parts of themselves on drive ‘c’ without any option to change this. In these days of the boot drive often being a smaller solid state drive for performance, space on the boot drive has once again become a critical issue. That is not to say that nothing will install on the boot drive, far from it, but the bulk of Visual Studio can at least now be moved to an alternative drive. On my machine the install occupied just over 2M on drive ‘c:’ with nearly 3G being deposited on my much larger drive ‘d:’. The install went very quickly as I had selected the ‘web install’ option that only downloads the files that are needed for your particular machine and choice of installation, however on the first running of Visual Studio 2012 it asks you to select what content you want and this customises your install to the types of development that you do. As I am greedy by nature and also I like to be able to write about several areas I selected almost all of these and the install then went off to add these parts. It took most of the rest of the day to install the other 242 modules that were required!
Once this was done I was ready to have a proper play and to see what I or Visual Studio could break. If you want to use jQuery you will need to add support for this using the NGet Manager which only appears with a web site type of project. NGet is an Open Source method for handling the getting of collections of files sometimes from different servers and it also handles disconnected downloads seamlessly. NGet has been used for a long time by the Open Source community but it is only relatively recently that Microsoft has been using it within their development tools. Normally NGet is command line driven and whilst Visual Studio 2012 does give you an NGet console should you wish or need to use this route, there is also a pretty UI for using it to access the various modules to add functionality to Visual Studio, like in this case jQuery. When programming in JavaScript or one of its many libraries like jQuery, debugging can be an issue. Many of us use the excellent Firebug add-in to Firefox, but there has been full debugging for JavaScript in Visual Studio for some time although, judging by the forums, getting it to work confuses many. In real terms it is very easy to enable JavaScript debugging in Visual Studio but you have first to go to your browser, I use IE for this but others should also work. In the ‘internet options | advanced ‘tab make sure that the line ‘disable client side debugging’ is not checked, and that is all there is to it. I don’t recommend setting this on all your browsers as you will then often get debugging messages appearing if there is a broken script on someone else’s website that you are browsing. For my current setup I use Chrome as my default browser, IE for the default browser when in Visual Studio and Firefox for other JavaScript Debugging, this configuration seems to work for me, and obviously all these and others are used when testing web sites, but to be honest with correctly written CSS these days the differences between browsers is often small and what differences there are have minimal if any effect on the user’s experience of your site. In fact with a modern responsive web design ( see Web Applications issue 218 ) your web site will probably change between user agents ( browsers ) anyway.
One great feature that I find very useful that has been enhanced to include HTML5 code is what I call the ‘Double Tabbing’ method of programming code in Visual Studio. To give you an example of what this is and how it can be useful, just image you are wanting to use the new ‘video’ tag in HTML5 Now, as you may already know, this tag is still a complete mess in that you have to provide three different versions of your video for the major browsers and your code needs to reflect this, hence the syntax is laborious and easy to forget. However now in Visual Studio 2012 you just need to type:
<vid
A drop down appears with ‘video’ highlighted, now if you hit the ‘Tab’ key twice the following code is inserted into your web page:
<video controls="controls">
<source src="file.mp4" type="video/mp4" />
<source src="file.webm" type="video/webm" />
<source src="file.ogv" type="video/ogg" />
</video>
‘Simples’ isn’t it ? This feature is also of great use when designing responsive style sheets as it helps you build the code for doing media queries in the CSS If you type @media in the style sheet and hit ‘tab’ twice you get:
@media only screen and (max-width: 1024px) and (max-height: 768px) { }
This enhancement to the intellisense engine works for almost all coding, but its addition to HTML in particular is a great help. Reading through the ‘what’s new’ notes for Visual Studio 2012 I noticed that is says that there is more support in the CSS editor for some of the new, but yet to be fully confirmed style standards like ‘border-radius’ which, as you would imagine, gives those nice rounded corners that used to cause us so much trouble to create before. Well like a lot of promises it’s not as truthful as you might think. Sure the intellisense engine now recognises the term as you type, but if you select ‘modify style’ to alter or create a style you will not find borders showing in the ‘box’ tab. It is interesting to note here that Microsoft’s Expressions Web has had this support for over a year now.
Expressions Web has a much more extensive support for some of the newer CSS styles
Whereas even the newest Visual Studio CSS dialogs have not changed
When checking your work, Visual Studio 2012 design view does not show these curved borders either, you will only see them if you preview in a browser, very much like Dreamweaver, but what a shame that Microsoft has done so little work in providing some real help to the HTML designer.
Whilst CSS pseudo elements are now supporting by intellisense, which again is a great help for the HTML coder, a more useful feature is Visual Studio’s ability to change the matching tag automatically. How often have you changed an <h2> tag to <h3> say, and forgot to change the corresponding </h2> tag? Now this happens automatically, very neat and a so useful.
One really useful addition that helps when working on a design is the new colour picker which comes up as soon as you type ‘color:#’ into the style sheet, not only does a pallet pop up of colours but if you expand this out there is an eye-dropper control that will select a colour from anywhere on the computer screen and not just within Visual Studio, this is again a real help to the designer, so why not a proper preview in the design mode of the UI ?
The Page Inspector mode is going to be a very useful tool for trouble seeking
A new view that helps a little when designing static web pages and a lot when working on dynamic web pages with server-side code is the new ‘Page Inspector’ view. In this view you get a rather cluttered desktop but at least you get a proper preview of your HTML and you can then highlight objects with the ‘inspect’ tool and see both the server-side code as well as the client-side code that was generated. I have yet to use this feature in anger but can see that it will be very useful when diagnosing what bit of code is affecting what area of the screen.
Article by: Mark Newton
Published in: Mark Newton