Metro Snack #1: Choosing XAML or HTML5 for Windows Developer Preview apps




Windows 8 Metro Style app development starts with choosing a user interface technology path. Developers will need to choose whether they will create their user interface using XAML or HTML5. Choosing XAML means that the business logic for the application can be implemented using C++, C#, or VB. HTML5 apps will mainly use JavaScript for this purpose (note: it is possible to call into C++/C#/VB code in an HTML5 app).

Which should you choose?

XAML and HTML5 applications in Windows 8 both use WinRT as a foundation and by virtue of this offer an almost identical set of features to the developer. However, if you are developing your Windows 8 user interface during the Developer Preview there are some important things to consider. Ultimately, the decision is yours and you should choose what you are comfortable with given the current limitations. The point of this post is to help you make an informed decision given what we have available to us now.

Language Familiarity

This one seems fairly obvious but there's going to be a learning curve if you currently do not know XAML or HTML5. This is mitigated somewhat by the fact that you are going to be learning a lot of new things (WinRT, Windows 8 Metro Style App flow, etc.). I would treat language familiarity as a starting point for your decision if your application is fairly simple in nature. However, if you are building a new app that does not leverage an existing codebase I would strongly consider basing this decision based on all of the factors described in this post.

Excellent Expression Blend Support for HTML5 Apps

The version of Expression Blend that is included with the Developer Preview has wonderful support for creating Metro apps using HTML5. As you build your user interface, the changes will be reflected immediately using a live DOM. There is also an interactive mode that will allow you to test your application without even running it. The CSS editing features in Blend are also top-notch. From a UI design perspective, this makes HTML5 Metro development very attractive.

No Expression Blend Support for XAML Apps

While the Expression Blend support for HTML5 apps is fantastic, it is nonexistent for XAML. The Blend team spent a lot of time making this version of Blend work with HTML5 but unfortunately it appears that did not leave enough time for XAML support. XAML developers/designers that want to use Blend to create animations, brushes, etc. will have to use Blend 4 until this support is added.

Visual Studio Designer for XAML has major bugs

For me, this has been the biggest reason to potentially avoid XAML during the developer preview. I am not sure exactly what causes it, but every project I have attempted to work on so far has gotten into a state where the Visual Studio Designer will no longer load my XAML files. This is a fairly significant problem since there is no Expression Blend support for Metro apps using XAML in the Developer Preview. This leaves designers and developers with very limited tooling support for the UI. For a platform with a strong focus on design, this is not an ideal situation to be in.

My personal conclusion

The conclusion I've reached at this point is that learning HTML5 and WinJS is probably a good investment. The tooling story for XAML Metro apps right now is somewhat frustrating and leads to more headaches than seem necessary at this point. I am much more familiar with XAML-based user interface coding than HTML-based so this is a difficult pill for me to swallow. I am hopeful that the beta in February will bridge a lot of these gaps but, just in case, I've decided that any applications I develop during the Developer Preview will be developed using HTML5.