Saturday, 19 May 2007

XAML or F#?

XAML is an XML-based scene description language for Windows Presentation Foundation that allows designers to generate graphics and implement GUIs without having to write any code.

Although XAML is a domain specific language, the fact that it is based upon XML makes it quite verbose.

For example, Charles Petzold, author of the book Applications = Code + Markup, recently wrote several blog articles on the use of WPF and XAML, including the following XAML example that rotates four colored squares:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Rotating Geometry"
Title="Rotating Geometry">
<Page.Resources>
<RectangleGeometry x:Key="rect" Rect="0 0 100 100">
<RectangleGeometry.Transform>
<RotateTransform x:Name="rotate" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Page.Resources>

<Canvas>
<Path Canvas.Left="150" Canvas.Top="150"
Data="{StaticResource rect}" Fill="Red" />

<Path Canvas.Left="300" Canvas.Top="150"
Data="{StaticResource rect}" Fill="Blue" />

<Path Canvas.Left="150" Canvas.Top="300"
Data="{StaticResource rect}" Fill="Green" />

<Path Canvas.Left="300" Canvas.Top="300"
Data="{StaticResource rect}" Fill="Yellow" />
</Canvas>

<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:2"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
</Page>


This XAML example can be run directly from his web page.

We thought it would be interesting to translate this example into the F# programming language to see how it compares in terms of functionality and verbosity. Here is the resulting program using the F# for Visualization graphics library:

let square =
[vec3 0. 0. 0., vec3 0. 1. 0., vec3 1. 0. 0.;
vec3 1. 0. 0., vec3 0. 1. 0., vec3 1. 1. 0.] >
triangles

let at(c, x, y) =
let aux() = rot_z(time()) * translate(vec3 x y 0.)
dynamic_transform aux square >
color c

let scene =
[Color.Red, -0.75, -0.75;
Color.Blue, 0.75, -0.75;
Color.Green, -0.75, 0.75;
Color.Yellow, 0.75, 0.75] >
List.map at > group

Graphics3D(scene).Show


In the case of this simple example, the F# programming language can clearly represent the same content more concisely. Moreover, the graphics library provides an interactive 3D interface to the scene with the ability to export to JPEG.

For those designers wanting to generate real-time interactive 2D and 3D graphics who are daring enough to try functional programming, the F# language is a tempting tool. To learn more about the F# programming language, subscribe to the F#.NET Journal today.

10 comments:

Dan McKinley said...

Really nice comparison. I've long wondered wonder who thought writing a GUI in XML was a good idea.

Anonymous said...

Indeed, its important to always remember that XML is good for data exchange, but its not for human consumption. ;)

rektide said...

McKinley: people desperately trying to look like a web/rest company after having failed totally completely and abysmally with WS-deathstar.

XHTML is a gui that uses XML and it works fine, although it is of a limited featureset. SVG+javascript is a GUI that uses XML and it works wonderfully and includes all the delights like animation, curves, and transforms.

As they say, always room for thirty four more vendor-specific locking-in knock-offs, all treading the same territories.

Andrey said...

Well, essentially, it's not fair comparison, because XAML offers its power for free, but you have to buy and install additional F# library to leverage the same functionality.

Colm Smyth said...

Just because something (like XAML) is in XML does not mean it is not a programming language! XAML just happens to be generated by some tools aimed at designers.

There are plenty of other GUI designers for other languages, e.g Netbeans Matisse and Intellij IDEA for Java, Visual Studio's support for VB.NET and C#, or more unusually the MIT Scratch tool for kids, that don't require coding in the traditional sense.

The only value in using XML to build a GUI is if you want to use tools that process it (e.g. filtering, styling or extending) *at runtime* using a pipeline or DOM-like process.

Anonymous said...

Apples vs. Oranges really. Declarative (XAML) vs. hard coded (F#) guis. XAML's sole purpose is to describe guis and it leaves presentation of those guis to programming languages such as, well, F# :) I suspect XAML is an MS response to XUL

Jon Harrop said...

I agree with Andrey: you get what you pay for!

Auxon said...

XAML was under development before XUL, but took a lot longer to get out the door.

Keith said...

Kind of a bad comparison

the point of XAML was for tool support. In fact its explicitly stated that the first design criteria is for tool support then secondary to that is the ability for humans to read. Hence why its a bit more verbose and a lil more clunky for humans.

As someone said, XML is good for data exchange... and thats the point, tools will be able to work with XAML. I can use 3d modelling tools, vector based drawing tools, Animation tools, etc etc to create designs and media content.

How many tools are going to spit out F#?

Anonymous said...

Mobiform Software, Inc. has just released a new XAML designer, Aurora for Architects. You can take the created XAML (.xaml) file and import it right into Visual Studio 2005/8.

Also, there is an embeddable solution by way of the Aurora XAML Designer.

(Note: I work for Mobiform Software)