{ Frameless }

Sparking the reactive template revolution

Thank you for signing up for the beta!

November 19th 2013 — Today we launch the beta release of our new template and query engine: Frameless.

Try out Frameless now and experience the power and possibilities new versions of XSLT and XPath bring.

But there's more

Real-time two-way data bindings for HTML, using data-attributes and the simplicity of XPath queries.

And that's just the beginning, real-time templates are next up!

Help us succeed

Your your feedback is of great help to us, please don't hesitate sharing your feedback and experiences on Twitter (we're @frameless_io), in a mail or in a post on our forum.

Use XPath 2 in JavaScript today!

Frameless is an XSLT 2 processor running in the browser, directly written in JavaScript. It includes an XPath 2 query engine for simple, powerful querying. It works cross-browser, we have even reached compatibility with IE6 and Firefox 1.

With Frameless you'll be able to do things the browsers won't let you, such as using $variables and adding custom functions to XPath. What's more, XPath 2 introduces if/else and for-loops. We'll even let you use some XPath 3 functionality! Combine data into a string using the brand new string concatenation operator.

Use way overdue math functions such as sin() and cos(), essential when generating data-powered SVG graphics. And use Frameless.select() to overcome the boundaries between XSLT and JavaScript.

Fast, small and powerful

With over a decade of experience developing cross-browser JavaScript frameworks, Frameless was developed to be agnostic to the feature sets of both ancient and bleeding edge browsers.

Our frameless.js is minified beyond recognition using Closure Compiler and zopfli compression. It even comes in two flavours: one file that is smaller and faster, and a second build with helpful error messages and sanity checks that help during development.

Switch now, and automatically enjoy performance improvements such as templates run in Web Workers in future releases without even touching your own code.

Start using HTML5 in your templates

Frameless is clever about HTML5 and makes sure your pages using new elements like <section> and <article> work in older browsers too. We'll even add CSS prefixes for properties like opacity and transform in templated style attributes to keep your templates clutter-free!

Use SVG and MathML in browsers that support it, we'll handle the namespaces.

No browser left behind

Creating web applications always boils down to creating an HTML tree that represents your data. With Frameless you don't write JavaScript to create HTML, you write HTML with some extra tags and attributes and in Javascript just the code that connects your data to templates. Frameless will handle all the browser magic that is needed to render your web page.

Frameless will automatically detect the features of each browser and accordingly choose the fastest methods to make the browser do what we want. That's why mostly everthing will work spiffy even in dusty browsers such as Firefox 1, Internet Explorer 6 and Opera 9.

Frameless is clever about HTML5 and makes sure your pages using new elements like <section> and <article> work in older browsers too.

Easily debug templates using the console

For your convenience error messages in your developer console link directly to our on-line documentation with an explanation of why the error might have occurred and how to fix it. Check it out: http://frameless.io/e/XTDE1260

Also great: the trace() function works in XPath and XSLT like the console.log() function we all know and love. Better still, it actually returns the first argument so you can wrap any part of your query in a trace() without affecting the working. When you name a trace you can even explore situation using XPath from your console using traceName.select('*'). See how!

Data visualisation with SVG templates

Don't spend another minute doing data-vis on the web without using a powerful query language such as XPath. Find, filter, sort and group your data easily and realize your ideas in a whim.

Combine the power of XPath queries with templates for SVG to create the data visualisation you need, without writing more code than strictly necessary.

Real time form bindings &
Automatic dependency tracking

Two-way bindings are the future of web programming, Frameless brings you bindings that will eliminate allmost all of your boilerplates. Start writing code that describes what your application does, rather than what which browser needs to do.

Frameless will know when to update a part of the document. You describe the flow, and we'll update the connecting UI when something changes.

Templates & Reactiveness

So Frameless is a combination of an XSLT 2 processor, reactive data-bindings and for-each in your HTML.

The XSLT 2 processor in the browser, enables you to create an input XML or XHTML document and write a template in XSLT which Frameless will parse to the browser.

The Two-way data-bindings can be added to your page by the template, to use all the functionality Frameless provides.

Use them separately

You can also use the processor or the reactive data-bindings separately. Both use our XPath 2 selector engine (with some XPath 3) .

When to use Frameless?

Frameless is created to simplify application development and is, due to its API, great for writing readable code.

It will make application development a lot easier and it's a good fit for all CRUD applications and applications with tricky DOM manipulation.

Who will benefit by using it?

  • Designers and managers will be able to read the code and even fix some bugs.
  • Junior developers will get up to speed in no time and write code with a high level of abstraction, and they will be able to create prototypes that'll be shippable.
  • Senior developers will be able to create complicated webapplications for all browsers and write them declaratively

What it's not

Frameless doesn't intend to fully replace functional DOM manipulation libraries like jQuery. If you like you can use such libraries and Frameless at the same time.

Frameless doesn't provide a solution for cross-browser differences in external CSS stylesheets. We add prefixes to some inline style attributes, but you should not write your styles inline only for this purpose. We do not intend to replace any CSS extension language, such as for example Sass.

Interactive XSLT extensions

Those who have already had a taste of XSLT 2 on the web can use the Saxon-CE extension elements and functions using ixslt.js.

Getting started

XSLT transformations

Use the <script> element to include an XML document in your HTML page:

<script src="xslt2.js" defer></script>
<script src="stylesheet.xsl" type="text/xsl" data-input="document.xml"></script>

You can also use importStylesheetURI() and transform documents like you are used to with the native XSLTProcessor API.

Two-way form bindings

In the HTML:

<p>
  <input data-ref="$message">
  <input data-ref="$message">
  <span data-text="{string-length($message)} characters">?</span>
</p>

First create a variable where you store your data model.

Frameless.variable('message', document.createTextNode('Cheers! 🍻'))

Then call autodiscover():

Frameless.autodiscover()

Result:

?

Inline HTML templates

Don't feel like writing more code than strictly necessary? Then don't:

<nav>
  <for-each select="//span[@class='tags']/b" sort group-by=".">
    <button>{{.}}</button>
  </for-each>
</nav>

The above example lists all tags used in Mathias Bynens weblog. Check it out!


  

The future is bright!

Roadmap

  • HTML templates
  • Smaller browser targeted builds
  • Custom elements
  • JSON support
  • Frameless in Node.js
  • Web Workers & Shared Workers
  • Asynchronous XPath queries using Promises

Templates for Node.js

In due time we will release Frameless for Node.js, allowing you to render the same templates both in the browser and server-side. Generate a static weblog using powerful templates that allow you to group blog posts by date, or use Frameless just for some XPath queries to search trough your XML documents using XPath 2 for Node.js.

Licensing

You can use Frameless for free as long as the project is non-commercial, just fill out the download form and agree with the terms in our license and you're good to go.

If you'd like to use Frameless in work projects, you can buy either one or more developer licenses or a project license. Please contact us if you are interested!

Frameless is currently not an open source project, but if you want to take a peek at our code we can probably work something out.

Download the private beta
and give us your feedback!

We would like to hear back from you! Tweet or e-mail your thoughts, suggestions or questions.

Download Frameless now, read our documentation, get started today and share your projects with us!

Meet us in person

We will attend the following meetups and conferences, if you like we're always up for a beer... ;)

XML Prague 2014February 14th - 16th
XML London 2014June 7th - 8th