If you haven’t seen the modified help system in Visual Studio 11 then prepare to be impressed. Now when you go to the Help menu, you can choose Add and Remove Local Help Content. Upon doing so, you’ll be presented with a very helpful dialog box.

From here it is very easy to figure out how to choose which categories of help content you want to be installed locally and where it will be installed from.

I just installed all of the WinRT and JavaScript help content so now I can read it disconnected. Woohoo.

At the heart of Windows 8 development is WinRT. This is NOT Win32 and it’s not .NET. It’s a brand new set of APIs that’s designed for modern software development and designed for user experience with an asynchronous model that allows your app to remain fast and fluid.

The real joy is that you get to write code against this API in your language of choice. You can choose JavaScript, C#, Visual Basic, or C++. The code you author in your language of choice is projected into WinRT code and runs native on Windows. Additionally, you get all of the inherent benefits of your language. So for JavaScript, you still get to call all of the existing browser APIs. For the .NET languages, you get a tailored .NET profile with namespaces and classes that work much like you’ve come to expect. And with C++ you get to call C components and C/C++ libraries (again within a tailored subset of Win32).

All of this new functionality is available in addition to the ways you’ve always done things. It does not eliminate it. So you can still write web apps, .NET apps, and native apps against Win32 like you always have. That’s excellent.

In case it’s news to you, here’s an API overview of the Windows 8 Platform. You can find more information at buildwindows.com and dev.windows.com.

I had a conversation with an attendee at the recent Windows 8 developers event at LA Live on Monday that I want to put into words and share in case it is of benefit. The question was this:

I’m new to development and I’m jumping in to Windows 8 development. Which language stack should I choose – HTML/JavaScript or XAML/C#?

It’s a good question because there are a lot of contributing factors.

I’ll leave the other languages (Visual Basic, C++) out of the discussion for the most part since they were not part of the question.

Here are the factors I’d like to compare on:

• viability of employment
• scale
• interoperability
• developer joy

Finally, a direct comparison is difficult because the nature of each of these language stacks tends to push developers into application architectures. XAML/C# applications tend to enable a developer to create a lot of custom business logic inside the application itself, whereas HTML/JS applications tend to encourage a developer to push the business logic up to a separate service to be consumed in a JSON feed for instance.

Let’s go.

Viability of employment

First of all, I have to say this. Don’t jump into application development with high hopes of being employable but without any passion for the trade. It won’t work. I would love to play guitar, but I can’t. Why? Because I don’t love it enough. If I loved it enough I’d practice it every day and then I’d become really good. I guess my analogy breaks down there, because I wouldn’t necessarily be employable :) You really need to love software development and you need to do it every day. You need to read programming books in bed and you need to experience genuine, heart-felt aggravation when things aren’t working.

But it’s good to be employed, right?! Still, I don’t think viability of employment (now and in the future) is too much of a concern. Given the current developer and consumer investments in HTML and JavaScript as well as XAML and C#, none of these languages are going to leave their developers on the street any day soon.

If, however, you want to be a very portable employee, you should choose HTML and JavaScript. I’m not talking geographically portable but technically portable – as in, you want to work in a variety of roles at a variety of companies doing a variety of things. The HTML and JavaScript languages are everywhere. We don’t just have browsers on our computers anymore. There are browsers in cars and kitchens and phones. So, every role in every company in every industry needs to know something of these technologies.

Still speaking technically, the employment options for a XAML/C# developer are going to be more narrowly defined.

Scale and maintainability

When I say scale, I’m talking about the ability for an application’s code base to go from small to huge. You might consider this dynamic if you suspect your application will be growing a lot - say going from 3 features to 30. In this case, your codebase needs to grow and your architecture needs to evolve.

On the UI side, I can’t see any advantages of either XAML or HTML in this area. Behind the scenes, however, C# has some huge advantages over JavaScript. I’ve seen C# codebases that are mind boggling and yet still quite easy for the developer to traverse and debug. Handling a huge JavaScript applications on the other hand is about like handling Jell-O - both are a little too dynamic. That’s not to say it can’t be done; I’d never make that claim.

Interoperability

How good are these language stacks at cross communicating with other applications? Both are very good. You might want to jump in here and tell me how much better JavaScript is because of it’s lightweight JSON objects, integration with the web applications, and the like. But C# can do all of that too. Any of the C# objects are one small serialization step away from becoming the same JSON object that a JavaScript app uses and likewise in the other direction. Just because your C# application is fat with business logic, doesn’t mean it can’t communicate lightly with the outside world.

Developer Joy

This is an important category in my opinion. You don’t technically have to enjoy writing software to write a lot of good software, but it most certainly helps.

I find a lot of joy writing both C# and JavaScript. In C#, I enjoy the traversal of types, type hierarchy, and type conversion. I enjoy lambda statements a lot, and I really geek out on LINQ. In JavaScript, I enjoy JSON and dynamically creating, extending, and manipulating objects. I enjoy anonymous functions and passing them around willie nillie.

I think you have to run through some tutorials for each language and determine for yourself which one you might enjoy using more. The problem is that so much of my language enjoyment has come later when I’ve used a language for hundreds of hours and I’m starting to feel like I get it.

See if you can browse a bunch of JavaScript code and C# code and see if either feels more right to you. See if one of them comes more quickly to your intuition.

Conclusion

Overall, whatever language you choose for developing Windows 8 apps, you’re going to end up with the ability to create some awesome apps, you’re going to be employable, you’re going have fun doing it, and with the amazing opportunity you have to reach hundreds of millions of potential users, you are even likely to make some money!

Happy app development!

Just in case you didn’t know, you don’t need to use the #region designator any more to collapse code. When you use the #region indicator, you create a region for everyone you share your code with, and some people hate having regions in their files. I’m one of them.

If I’m looking at a code file that’s long enough to require regions, I’d rather not look at it at all. Even “in the real world” files should contain a single class, classes should follow the single responsibility principle, and methods should be short. If your code doesn’t look like that and you use regions to attempt to make your code remotely readable, that’s sinful enough, but to force those regions onto your fellow developers is just downright morbid.

How do you get away from them you ask? Simple. You just highlight code that you want to group and hit CTRL + M, CTRL + H (or the alternative mouse longcut of going to Edit | Outlining | Hide Selection). The code collapses just like a regions, but here’s the kicker – it’s only hidden for you! The change is saved in your .suo solution file which is for you only (never check this into source control), and now you can go ahead and collapse what you will and leave your fellows free to work how they will.

There you have it.

If you are in the Los Angeles area Monday event or if you can get there, you should stop by the Nokia Theater Live next to the LA Convention Center and get a whirlwind tour of Windows 8 from a developers perspective!

Everything from breakfast to dinner will be information straight from Microsoft to you. Then, after dinner, you’ll be joining us for Coding with the Experts where you walk through an excellent series of tutorials to create a full-fledged Windows 8 app. You’re guaranteed to walk away with skills.

I personally will be presenting on the tooling you’ll use to create Windows 8 applications: Visual Studio 11 and Blend. I’ll also do a presentation on designing Windows 8 applications including a complete design scenario, so it will be theory and practice in one presentation.

Come introduce yourself to me when I’m not on stage. I’d love to meet you. See you there.

Go to http://bit.ly/Jjd9dato to get all the details. See you there!

This is likely apparent to anyone that has already ventured into Windows 8 development using Blend for Visual Studio 11, but if you haven’t ventured in yet for some reason… like say you’re busy actually getting work done! I know how that goes. I was recently in industry trying to meet deadlines and didn’t have much opportunity to look at new technology.

So allow me to quickly highlight an incredible feature in Windows 8 development – specifically in Blend for Visual Studio 11.

Why Use Blend?

First of all, why and when should you open Blend? For a long time, Blend was downright offensive to me as a developer. I was and still am a Visual Studio guy. I don’t want another IDE offering in parallel to confuse and divide me! But now I’ve accepted the two tools as very different and each very powerful in their own role.

Some people will almost always use Visual Studio. Remember that the Express version is completely free. How do you know if you’re one of these people? Simple. Look down. Are you wearing one of these t-shirts right now?

If so then chances are you’re a geek and Visual Studio may be your primary if not your exclusive tool.

Are you wearing something more like this?

If so then you may call Blend your home and ask a geekier friend to write the actual code for you. If you’re like me, you might wear many hats (and shirts) and be able to geek out in the code and the design tools.

Design, Execute, Interact

But right now I want to show you something that is exclusive to Blend. That is its ability to execute your application live as you design it and its ability to even give you interaction with the application and why you need that.

The figure above is what it looks like when you’re designing an application in Blend. The interesting tidbit of note is that those recipes you see in the design pallet are not declared in the HTML. They exist as JavaScript arrays in the data.js file and as images of food (yum) stored in the images folder.

Blend here is executing the application, running the JavaScript, and rendering the recipes accordingly on the screen. So just this is pretty awesome. Remember in Expression Blend days of old when we loaded sample data so we (designer role) could get an idea of what things looked like. Those are bygone days, my friend.

In this mode, we can actually grab one of the images (even though they’re being rendered live!) and resize it (see next figure) - effectively modifying the size of the image element in the item template utilized by the ListView control that forms this list.

But what about when you want to do some design on a different page. Say we want to resize the recipe image on its detail page as well. If we were actually executing this application, we would touch on the recipe to get to this page. But remember that we are actually executing this application. We just have to tell Blend that we want to interact with it. And to do that you hit the Interactive Mode icon…

…on the right side of the tab well. This hides all of Blend’s panes and puts you in a mode where input is passed on to the application (see next figure).

Now a click on a recipe takes you to the item’s detail page…

You can now click on the Interactive Mode icon again to turn it off…

…and now you’re ready to do some design on this page.

That’s all for now. Let the power and potential that is Blend sink deep. Now use it to create an awesome app.

Happy Blending!

Last night I did a presentation at a very active and exciting Seattle user group called vNext. The topic, of course, was Windows 8. If you read my blog, you know that that’s most of what I’m talking about these days. Instead of creating tangential content, I relied on the excellent documentation that you can browse any time in the Windows Dev Center at dev.windows.com.

The Dev Center is an enormous place, but it’s well organized and I think you’ll find it’s not too difficult to find what you’re looking for. Still, I’m including my compiled outline below in case it helps you navigate the sea of information.

The hierarchy of this outline exactly reflects that of the Dev Center, so hopefully mapping the sections will be easy and intuitive.

Getting started

Making great apps

Visual Studio 11 Beta

Blend for Visual Studio 11 Beta

Download samples

JavaScript tutorial

JavaScript doc roadmap

Visual Studio templates

Designing UX for apps

Design Principles

UX Patterns

Navigation design

Commanding design

Touch interaction design

Downloading design assets

Case studies

Website to Metro style app

Developing apps

Writing code for Metro style apps (JavaScript)

Coding basic apps

HTML, CSS, and JavaScript features and differences

HTML and DOM API changes list

Features and restrictions by context

Asynchronous programming

Asynchronous programming in JavaScript

Chaining promises in JavaScript

Creating a UI

Defining layout, navigation, and commands

Supporting navigation

Quickstart: Using single-page navigation

How to reference content

How to link to external web pages

How to create a mashup

Adding controls and content

Controls list

Animating your UI

Responding to user interaction

Touch input

Gestures, manipulations, and interactions

Quickstart: Identifying input devices

Working with data and files

Data binding

Quickstart: Binding data and styles to HTML elements

How to bind to a complex object

Managing app data

Accessing data and files

Transferring a file from a network resource

Sharing and exchanging data

Living in the JavaScript world for a while will help you to appreciate the offerings of C# for sure. Many concepts like classes, inheritance, observable collections, list extensions (LINQ) are simply absent and so a creative alternative has been created either in WinJS or just in recommended practice.

One of these is in the area of data binding.

First of all, I recommend Stephen Walther’s excellent article on Metro: Declarative Data Binding. He’s much more thorough than I intend to be here. I only want to relay my experience with following the instructions on dev.windows.com – specifically the article entitled How to bind a complex object, and following the sample project entitled Programmatic binding sample. If you want to learn a lot more about Windows 8 development using HTML and JavaScript, you can check out Stephen’s book Windows 8.1 Apps with HTML5 and JavaScript.

Here are the steps I took to get a very simple object to bind well.

• Write a simple class
• Add an _initObservable method
• Mix it
• Instantiate it
• Bind the properties
• Change a property to test

That’s it. I’ll elaborate a bit on each point.

Write a simple class

Here’s the rocket science class I wrote. It has a single property – name.

var Widget = WinJS.Class.define(
    function (name) {
        this.name = name;
    }
);

Add an _initObservable method

var Widget = WinJS.Class.define(
    function (name) {
        this._initObservable();
        this.name = name;
    }
);

This is necessary so that “the observablility implementation is completed properly”.

Mix it

WinJS.Class.mix(Widget,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties(Widget)
);

This adds the necessary bindability to your custom class. If you only want a select few of your properties, you can specify a subset of properties in the parameter for the expandProperties method call. See the Programmatic binding sample to see what I mean.

Instantiate it

Now you’re ready to instantiate your object.

var widget = new Widget("Widget1");

Bind the properties

What you’re doing in the binding is specifying a function that you want to run whenever a property is changed.

widget.bind("name", function (newValue, oldValue) {
    var foo = document.querySelector("#foo");
    foo.innerText = newValue;
});

Change a property to test

Now, somewhere in your code, change value of that property like this…

widget.setProperty("name", "Hi, Mom!");

And there you have it. The simplest possible example I could come up with for data binding a complex object by turning it into the JavaScript version of an observable object.

Happy binding!

It has never been a good idea to jump right into development without putting time into the design of your project. It’s tempting to attribute your progress to the time when you’re actually typing the code into the computer, but application design like never before is more than fluff. It scopes and directs your efforts and saves you from real hours spent on divergent, throw-away work.

This is still true in Windows 8 development, but a lot of work has already been done to support application developers in creating Metro style applications. There’s a lot of design philosophy in the platform. The effort of which is to create an application ecosystem that has some consistency and thus some predictability and thus user joy.

Here’s a video I recorded that will walk you through the design philosophy – the 8 traits of Metro style design. Enjoy. Happy designing.

Design Before You Develop.wmv

Do you occasionally write a one-off project in Visual Studio that you know is not going to go anywhere?

I used to have a console application that I called Sandbox that I had a shortcut to. I could open it, write some code, and then close without caring what it’s state was when it closed. The bummer was when I opened it, sometimes I had to do a little cleanup to get it ready for fresh code. It wasn’t ideal and I abandoned the practice a long time ago.

There’s a better way though. It seems there always is.

If you go to Tools | Options | Projects and Solutions in Visual Studio…

…and uncheck the Save new projects when created, Visual Studio makes the above scenario very nice.

The New Project dialog quits asking for a file path. What it actually does behind the scenes is create the project in your temporary files. Only when you try to close or save the project does it actually decide you need to specify a name and path for the project. The dialog actually gives you the option to either Save your project or Discard it.

Discarding eliminates it without a trace and leaves you about your merry way. I like this feature a lot.