{ Frameless }

Releasing the beta,

thank you for making it such a great experience!

We finally did it, we released the beta version of Frameless. Some of you waited for over a year to see the CSS 3D graph from the XML Prague Demojam in action and to try our XSLT 2 processor.

We attempted to release for weeks, every morning we discussed the readiness of the project: can we ship it yet? What's the amount of work to be done before the release and how about releasing today? I even made a list of things that would make the “minimal viable product”, and told Robbert not to do anything that wasn’t on the list… it didn’t work of course — we suffered a severe case of the “one more thing” syndrome. But hey, at least we tried!

On Tuesday November 19th we were convinced: today is the day! We were done creating a new website that would allow people to understand the range of possibilities with Frameless and that would convey our vision. We had some basic documentation in place. The only thing left was the a couple of actual demo's and a system for unique invites that would keep the Private Beta private.

I created an e-mail campaign, and at 10pm we were as ready as we would ever be so we irreversable clicked send, opened a bottle of champagne and stared blankly at the screen... not expecting any response just yet.

Suddenly Carmina Burana started playing (we didn’t know it was in the playlist), and on a world map in the campaign program, we saw people opening the e-mail, clicking links all over the world!

Just a few minutes later we got e-mails from people all over the world congratulating us, Frameless was discussed on Twitter and Frameless was actually being downloaded!

The next morning I felt strangely different… working on Frameless didn’t feel like working for a real company before and now it suddenly did! I opened up my mail, to see people actually trying it out, asking questions and giving us feedback on our (lack of) documentation.

We are working really hard on more documentation and code samples!

Thank you all for your support, it is much appreciated! Please continue to give us more feedback and help us make your web development easier!


Why we started Frameless,

the tale of a guy who refused to write tedious code

Once upon a time, when the web was still young and pristine, a boy spending the better part of his childhood behind a computer was looking for a technique for writing readable and reusable scripts.

The concept of separation of concerns, was emerging. People started to separate their code into HTML and PHP files and CSS made the separation of concerns complete.

Originally their scripts were written with some SQL on the first line, followed by a for-each that would create some HTML for the output. This mixing of different languages and the dependencies created, made it very hard to write code that would stand the test of time.

One rainy day he read about XHTML, and more importantly XSLT a template language that was able to take XML or XHTML files and output wellformed HTML. He was so happy he could piss rainbows, this was what he had been looking for! XSLT templates would also make it possible to serialise the HTML at the end and create a DOM first.

Unfortunately XSLT1.0 soon proved to be insufficient for web applications and he could’t solve the shortcomings with some PHP or JavaScript. He wanted to group elements in the sidebar, but XSLT1.0 lacked an implementation of grouping. The endless need for prefixes was also working on his nerves and his goal of writing readable and reusable code vanished into thin air.

Meanwhile more and more people discovered the internet, and more and more browser vendors and browser versions came in circulation.…

Years went by till, one day in need of money, the guy got himself a job at http://xopus.com and rediscovered the possibilities of XSLT. The idea of templates written in such a powerful language appealed again, especially the part where you could add one element in your document, feed it to the template engine and end up with multiple elements in your output document. Blogposts would appear in the sidebar as well as the content part of the page, and all would be good.

In 2010, the guy needed a new challenge so he quit Xopus, looking for another company that would fit his needs. Then, one night he had a dream: Create a reactive template engine with a powerful query language and some kind of smart reactiveness, he would never ever write tedious code for cross-browser compatibility again…


XSLT for hipsters,

or how to win the demojam

Every year at XML Prague the people from MarkLogic organize a contest where contestants have 300 seconds to impress and entertain the audience during the conference dinner. For this year's demojam I rendered a chart from the Ajax.org website using Frameless, my XSLT 2.0 engine for the web. I won.

It is a tech demo: technologies used are novel and currently it only runs well on Safari. Although my XSLT processor runs on all browsers, Safari is the only browser that supports both MathML and fast CSS 3D transforms.

The demo was scheduled to put be on-line right after I had returned from Prague, but lingering problems with Closure Compiler have held back publication of the demo. Because Mohamed Zergaoui is so anxious to scrutinize the code I've already put the XSLT files on GitHub.

My best guess is that refactoring the XPath engine will allow Closure Compiler to 'grasp' the code, but that will take at least until the end of this week to finish. I'll put word out on Twitter when it's done.

How is it done?

The rendering of the whole page is done in XSLT, the squares are generated using two xsl:for-each loops. The rotation around the Y-axis is implemented in a simple CSS transition loop. Apart from the animation and interactivity, this demo should work with any XSLT 2.0 processor. (Try it!)

For solving the formula several thousand times each second the formula is implemented in JavaScript, to minimize the CPU-load and to obtain a decent frame rate. I provided a xsl:function implementation of the formula in graph-fallback.xsl, which perhaps in some future can be used when I have implemented compiling of hotspots to native JavaScript code.

Rendering new animation frames is done using the ixsl:schedule-action extension instruction, which draws a new frame right after the last frame.

<xsl:template name="animate">
  <xsl:call-template name="animation-frame"/>
  <ixsl:schedule-action wait="0">
    <xsl:call-template name="animate"/>
  </ixsl:schedule-action>
</xsl:template>

The full code of the demo can be found on GitHub, I'm releasing it under LGPL. Distribution of the XSLT processor will not be until the first private beta release in a couple of months. Please sign up for beta invites on XSLT2.org.

The gory details

When you look at the page source, you'll see the XML source and no HTML... Right after returning from XML Prague, I implemented support for stylesheets referenced by a <?xml-stylesheet> processing instruction, making the demojam.html file obsolete. So now the demo consists of just three files!

The MathML is embedded in the stylesheet. Clicking on one of the squares focuses that element (because of tabindex="0"), the click event will be checked against ixsl: mode templates. The processor looks for templates matching template the event target, applying only templates that are in the ixsl:onEventType mode, ixsl:onclick in this particular example.

<xsl:template match="span" mode="ixsl:onclick">
    ...
</xsl:template>

That templates stores some state info in attributes, and finds the MathML element after the equals operator to render the current Y value of that square.

Setting hundreds of CSS style properties cost precious milliseconds, so I propose removing unsupported instructions at compile-time using feature detection in the XSLT 2.0 use-when attribute. When the property isn't supported, the instruction is simply ignored and won't affect performance.

<ixsl:set-attribute
    name="style:-ms-transform"
    select="..."
    use-when="x:css-property-available('-ms-transform')"/>

While in the current stylesheet this optimization is done explicitly, I will make sure that Frameless will run this check for ixsl:set-attribute instructions out of the box so you don't need to clutter your stylesheets.

Feature detection in use-when is the next big thing, believe me!

There's all kinds of workarounds for the processor being under heavy development. For example, XPath 2 syntax mostly isn't supported yet because that tokenizer is still under development. That's why you'll see op:to($a, $b) instead of $a to $b, and same goes for the choose function.

Thanks

It's been great showing you my latest project, thanks for your cheers and to those who came up to me to congratulate. Of course thanks to MarkLogic for organizing the demojam and awarding me and Gerrit Imsieke an iPad.

See you all next time in Prague!

Update

The demo with the Frameless processor is now online.