Introducing Flow

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.

del.icio.us:Introducing Flowdigg:Introducing Flow

3 Comments

  1. Robert Nyman
    May 19, 2008
    3:09 pm
     

    Congratulations Richard! If I have in any way inspired you, I’m very glad to hear it!

    And yes, Dean Edwards and his work is freaking genius. :-)

    Good luck!

  2. Artyom Shalkhakov
    July 10, 2008
    4:08 am
     

    This is what I was looking for ever since I started working with JS. :)

  3. Artyom Shalkhakov
    July 10, 2008
    4:24 am
     

    It looks like you think in the same lines as me.

    I have some ideas regarding further development of Flow. (I would like to contribute.)

    I couldn’t find your mail anywhere, so if you’re interested, drop me a line at artyom dot shalkhakov NOSPAM at gmail dot com.

    Thanks.

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*