This is a post I’ve been wanting to write for months now. For the past several months I’ve been spending my free time toiling over a personal project of mine.
It started with Dean Edwards and his release of the Base2 library. It scratched an itch that I’ve had for years: I wanted the ability to use the DOM API (Level 3) in all modern browsers. Base2 has since seen a second revision and is even more powerful than before. (Aside: Dean Edwards’ is a freaking genius.)
But I wanted more. I wanted a hybrid API that would allow me to use the standard API, but would also contain helper functions, shorthand notation, chainability, etc. So I got to work.
After eight months of development, trials, tears and tribulations I am pleased to announce the initial release of The Flow Framework.
Flow aims to fix and enhance the DOM Level 3 API. Flow extends API functionality to browsers that currently don’t support it. Additionaly, it adds powerful functionality on top for the best bang for your JavaScript buck.
A sample of the functions it implements cross-browser:
- getElementsByClassName / getElementsByAttribute
- addEventListener / removeEventListener (with DOMContentLoaded support)
- preventDefault / stopPropagation
- addClass / removeClass / replaceClass
- querySelector / querySelectorAll
- shorthand notation (getById, getByTag, getByClass, etc)
Here’s a snippet of what can be accomplished with Flow:
Find all: ul.checked li
With Flow Core
var uls = document.getElementsByClassName("checked").filter(function(e) {
return e.nodeName.toLowerCase() == "ul";
});
var lis = [];
uls.forEach(function(ul) {
ul.getElementsByTagName("li").forEach(function(li) {
lis.push(li);
});
});
With Flow Extend
var lis = document.getByClass("checked").filter(function(e) {
return e.elementName() == "ul";
}).getByTag("li");
With Flow Query
var lis = document.querySelectorAll("ul.checked li");
Want to open external links in new windows via JavaScript?
document.getByAttr("rel", "external").setAttribute("target", "_blank");
Want to return false on those pesky blank-anchor links?
document.getByAttr("href", "#").addEventListener("click", function(e) {
e.preventDefault();
}, false);
There are more code samples, documentation, unit tests on the official site. Be sure to download a customized Flow build and try it out!
For those that want to take a gander at the code, you can check out the source on Google Code: http://code.google.com/p/flowjs/.
There’s already a website using Flow in the wild. South Park Studios was unveiled a couple of months ago, and it’s been chugging along since. Unfortunately I was under gag order at the time while the final details were being hammered down. Now I can officially state that it’s using Flow and lovin’ it.
Many, many thanks to Schematic for supporting the release of this library, and to the many Schematicans who freely contributed to the library.
Thanks are also in order to the great JavaScript programmers who’ve turned us all on our heads: John Resig, Dean Edwards, Robert Nyman, Tino Zijdel, Sergey Ilinsky and countless others.
