Jerry Nixon @Work: Windows 8: Top 10 Reasons why I choose XAML over HTML5

Jerry Nixon on Windows

Tuesday, May 22, 2012

Windows 8: Top 10 Reasons why I choose XAML over HTML5

imageWindows 8 introduces Metro as a new a development paradigm on the Microsoft platform. I get asked which people should choose all the time. For me, I chose C#/XAML. Here I wanted to walk through some of the key reasons I did just that:

1. It’s a Nail

It turns out I am a hammer. After spending a career mastering XAML, I tend to see a XAML solution in everything. But good for me, Windows 8 provides no-compromise options to developers to choose JavaScript/HTML5, C#/XAML, and C++/XAML without giving up on features and support.

2. Bind to Anything

The power of XAML really starts at its native ability to data bind. Nothing data binds like XAML – one way, two way, one time, and to almost any property. Not only is it built-in, not only is it powerful, not only is it fast, but it’s simple. Check out this snippet:

image

In the code above, I am binding the Text property of of the TextBox to the Value property of the Slider. All of the event listening and value conversion is done for me. I just write it up with a syntax that is easy to understand (although you have to get it correct).

2. Resolution Independence

XAML has always had resolution independency. And, here’s what it means. Let’s say you have a 17 inch monitor with 1024x768 resolution. The XAML app looks perfect. You upgrade to the same size (17 inches) but higher pixel density (1680x1050). What happens to your app? Because of XAML’s resolution independency, it looks completely the same – just clearer, sharper.

Hh465362.ux_scaling(en-us,WIN.10).png

Resolution dependency would have caused the application to get smaller. But we don’t buy high resolution to get application thumbnails. We get high resolution so applications are crisp and clear. Size values in XAML are not pixels, they are device-independent units.

3. Dependency Properties

A XAML UI could have a hundred controls, easily – especially in the visual tree. XAML controls could have a hundred properties, easily – especially with attached properties. 100x100 is 10,000 properties. That’s a lot, huh? Fortunately, XAML solves this with Dependency Properties.

Dependency Properties can be inherited from parent controls. They can be attached by outside assemblies. They can be animated and automated. Plus they fire change events. But, even better is – they take up no memory until they are actually set. Brilliant.

MSDN: The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs. These other inputs might include system properties such as themes and user preference, just-in-time property determination mechanisms such as data binding and animations/storyboards, multiple-use templates such as resources and styles, or values known through parent-child relationships with other elements in the element tree. In addition, a dependency property can be implemented to provide self-contained validation, default values, callbacks that monitor changes to other properties, and a system that can coerce property values based on potentially runtime information. Derived classes can also change some specific characteristics of an existing property by overriding dependency property metadata, rather than overriding the actual implementation of existing properties or creating new properties.

4. Platform Adoption

Name a Microsoft platform. Xbox? Windows Phone? Windows Embedded? Windows Desktop? Windows Metro? Silverlight? Every one has something in common: XAML. Some platforms support other UI technologies, but XAML is the common denominator.

XAML has a strategic value to developers and enterprises alike because the developed skillset is reusable across the Microsoft stack. From WPF to Silverlight to Metro, XAML is pervasive. One reason XAML is great is because of its wide platform adoption.

5. Object Oriented Programming

HTML5 and JavaScript are powerful. Granted. But unit testing, inheritance, polymorphism, architectural reuse, and pervasive design patters are enabled by object oriented languages like C++, C#, and Visual Basic. If it is up to me, and it is, I want OOP so my projects are logical, testable, and scalable.

6. State

XAML applications are persistent (stateful). It means static methods and properties work. It means in memory references work. And, it means MVVM works. XAML applications maintain state which helps developers maintain sanity – and  prevents the many hacks like state stores. More.

Gg430869.C1C498204EFDB6E753EC8164CD18F023(en-us,PandP.40).png

8. Expression Blend

Since WPF, XAML designers and developers have enjoyed Expression Blend (part of the Expression Suite of tools). Expression Blend provides a visual and designer interface to accomplish complex actions and interactions in XAML UIs. Nothing compares.

Many developers have avoided Blend because of the initial learning curve. The reality is, whatever can be accomplished in Blend could also be accomplished in Visual Studio. Similarly, whatever could be accomplished in Visual Studio could be accomplished in Notepad. Blend is worth it.

9. Debugging

C# developers have long used the debugging features in Visual Studio. Just set a breakpoint a build. Now with Intellitrace, there’s even more ways developers can debug an application. But XAML developers (evident in Silverlight 5) have the option to debug bindings right in the XAML.

But it’s not just that. Only robust languages like C# give you full intellisense, symbolic refactoring, incredible code analysis, and complexity metrics. One of the reasons I choose XAML is because I choose C#. And I choose C# because it has everything.

10. Vectors, Vectors, Vectors

Vector and Bitmap DifferencesA key benefit of WPF (the first XAML) over WinForms was that WPF was a vector-based rendering engine. It could leverage GPU acceleration and scale indefinitely. All XAML is vector-based, can leverage GPU acceleration and scale indefinitely. Boom!

MSDN: WPF uses vector graphics as its rendering data format. Vector graphics—which include Scalable Vector Graphics (SVG), Windows metafiles (.wmf), and TrueType fonts—store rendering data and transmit it as a list of instructions that describe how to recreate an image using graphics primitives… One of the key benefits of vector graphics is the ability to scale to any size and resolution.

Conclusion

Let’s admit it, there are lots of things to love about XAML. And let’s admit it, lots of UI technologies (like HTML5) have benefits (especially in Metro). But I choose XAML. And if you ever wondered some of the thought process around my choice, well, here it is. Your choice may be different. If it is, just be sure that you have reasons for your choice. Not all choices are equal. Not at all.

Hey, don’t miss “15 More Reasons Why I Choose XAML over HTML5”!

Best of luck!