Home
What follows is a cross between an introduction, a roadmap, and a brain dump. I’ll clean it up and split it into multiple pages soon.
Firelight aims to be something of a mix of both Silverlight and WPF features. Instead of using a plugin architecture like Silverlight (and Moonlight) do, Firelight is entirely written in JavaScript, and uses SVG for it’s “backend”. Firelight visual objects correspond to a tree of SVG elements, and Firelight attributes map to SVG (or in some cases CSS) attributes.
I’ve been wanting to continue work on Pyro for some time, but since the technical hurdle (actually compositing a linux desktop inside the browser) was overcome, the main area of interest for me was pushing the envelope of the user interface available. There’s only so much you can do at the moment with html+css, and while css transforms are possible, I wanted something more – I wanted cool pixel effects, I wanted vector graphics. Basically, I wanted SVG. Trouble is, I hate SVG. I hate the DSL transform syntax, I hate how animations are expressed. I wanted something more akin to the (imo) beautifully consistent structure of XAML. Firelight was born out of a desire to use XAML techniques (with as much declaratively specified behavior as possible) in the context of Pyro.
This page has a very, very rough demo of a few key pieces of the Firelight plumbing. At present the same page works in Firefox 3.x, and Safari 3.1.2 on my windows vm. It also loads and runs on my iPhone, something Silverlight will probably never do.
Basically, I’m not going to guarantee compatibility with either system. Firelight is its own entity. In so far as it’s possible, and easy, it will be compatible with Silverlight. Where Silverlight and WPF are at odds, Silverlight behavior will generally win out, but again, no promises (some of Silverlight’s behavior is very annoying, particularly surrounding the animation system). There are some WPF features already present in Firelight (such as <Setters> being allowed inside of Triggers), and more are being added (Property Triggers will be in at some point soon).
Firelight also makes heavy use of WPF’s dependency property metadata feature. Take for instance the following:
DependencyProperties.register (UIElement, "Opacity",
{ defaultValue: 1.0,
cssAttribute: "opacity" });
This specifies that the Opacity property in xaml maps to the CSS style attribute “opacity”. Any time you (or an animation, or a setter) change the firelight object’s OpacityProperty (by using either of the equivalent forms: foo.setValue(UIElement.OpacityProperty, opacity) or foo.opacity = opacity), the DependencyObject infrastructure will map it automatically to the the svg peer’s style.opacity attribute. Other metadata flags that will be familiar to WPF users are affectsRender, affectsArrange, and affectsMeasure.
In places where it makes sense to be flexible, SVG syntax for specifying things is also allowed. Colors can be specified using rgba(r,g,b,a) syntax, gradient stops can be specified using percentages. As much as is possible I’ll try to support this sort of thing everywhere.
It goes without saying that I also want filter effects in Firelight.
Firelight uses jQuery internally for very little at the moment, but I’d like to expand it into the syntax exposed to users. For instance, Storyboard.TargetName lets you target an animation (or an entire storyboard full of potentially many animations) at one object. I’ll extend Storyboard with another property, Storyboard.TargetSelector which will essentially do a jquery lookup to find the elements to apply the animation too. So you’ll be able to change the visual appearance of many (possibly distant) elements at various points in the hierarchy at once. Setter will get a similar treatment.
I don’t have a project page set up yet (other than this github wiki), I don’t have mailing lists, I’m completely disorganized. If you find the idea interesting (either as a potential user or contributor), let me know (toshok@gmail.com). I’d love help, and all it takes is a familiarity with JS + SVG + WPF + Silverlight – that’s not too tall an order, is it?