Simpli5, an HTML5 Javascript Framework

Posted by Jacob Wright in HTML5, JavascriptMay 7th, 2010 | 8 responses

I've started putting together a new HTML5 Javascript framework that is only compatible with HTML5 browsers. I'm able to have a much smaller library that way, and I'm able to do stuff I couldn't otherwise. Like...

Optimization

Because I'm using built-in Javascript methods (written in C) for many things I do, I am taking advantage of the speed of modern HTML5 browsers, without the bloat of code that makes up for missing features. Array.prototype.slice is used to convert NodeLists and Argument objects into arrays with $.toArray(); querySelector and querySelectorAll are used to quickly find the first or all matches for a given selector string. The built-in Array.prototype.forEach is used for iterating over arrays.

HTMLElement.prototype

I can add methods to the prototype of Node and HTMLElement, giving all elements in my document functionality that I feel are common enough to be needed.

element.on('click', callback, false) // same as element.addEventListener(...) but shorter
element.addClass('my-class-name'); // hasClass, removeClass, toggleClass
element.findFirst('div .red'); element.find('li');
element.html(); element.html('<b>Hi!</b>');

And much much more.

simpl5 Element Wrapper

I've also create a jQuery-like class (called simpli5) which is basically an Array (uses all the native Array methods like concat, splice, forEach, map, etc.) and forwards all my calls I specify onto the elements in the array.

simpli5('#my-div').toggleClass('blue');
$('a').on('click', function(event) {
    event.preventDefault(); // real event object, don't need to fake it with a compatible browser
});

Class Model and EventDispatcher

I like the class model a lot. It is actually compatible with earlier browsers as well. And I do use getters/setters now that I can. I also created an EventDispatcher class that provides the addEventListener/removeEventListener/dispatchEvent, and the shortcut methods on/un.

var Foo = new Class({
    extend: EventDispatcher,
   
    init: function(name) {
        this._name = name;
    },
   
    get name() {
        return this._name;
    },
    set name(value) {
        if (this._name == value) return;
        var oldName = this._name;
        this._name = value;
        this.dispatchEvent(new PropertyChangeEvent('name', oldName, value));
    }
});

var Bar = new Class({
    extend: Foo,
    init: function() {
        // I've found this to be the simplest most optimized (least hacky) way for overrides
        // even though the syntax with a string isn't ideal. And I've looked around.
        this.callSuper('init', 'Bar');
    },
    // override only the getter to make it read-only
    get name() {
        return this._name;
    }
});

Component Model

The part I'm most excited about is my component model. It allows you to make DOM elements become new classes. I can take a common <button id="myButton"></button> (HTMLButtonElement) element and make it become my ToggleButton component. You will even get a "true" when doing: document.getElementById('myButton') instanceof ToggleButton. The following is a simple Button component.

var Button = new Component({
    extend: HTMLButtonElement, // be sure to extend the type you are becoming
    // the default template, true == cached (thanks ExtJS)
    // this component will become the top-level element in the template
    template: new Template('<button></button>', true),
    init: function(label) {
        if (label) this.label = label;
    },
    get label() {
        return this.text();
    },
    set label(value) {
        this.text(value);
    }
});

// create a new button and add it into the document
var button = new Button();
button.label = "Hello World";
document.body.prepend(button);

// turn all existing <button></button> elements into Button components
document.find('button').make(Button);

Just the Beginning

This is just the start. I've been borrowing ideas and code from libraries such as jQuery, mootools, prototype, and Extjs. The library is still only partial with many missing features, but it will mature, and the beginning I've got has been quite exciting.



8 Responses to “Simpli5, an HTML5 Javascript Framework”

  1. okela says:
    May 8, 2010 at 6:52 am

    “HTML5 browsers”, you better start using browser names, cause, like every other web “standard”, HTML5 is not cross-browsers consistent.

  2. Jacob Wright says:
    May 8, 2010 at 7:25 am

    Right now I’m testing against Chrome, Safari, and Firefox. And yes, there are some few differences, but there is a LOT less to deal with. Maybe it’s a little early for many to really be interested in HTML5-only.

  3. Simpli5, an HTML5 Javascript Framework | Dev Art Of War says:
    May 8, 2010 at 12:19 pm

    [...] Source http://jacwright.com/blog/428/simpli5-an-html5-javascript-framework/ [...]

  4. Javascript Data Binding - Jacob Wright – Flex, AIR, PHP, etc. says:
    May 25, 2010 at 12:21 pm

    [...] Simpli5 has been coming along nicely as I've been able to put time into it. I'm very excited to announce data-binding. [...]

  5. longhairedsi says:
    June 14, 2010 at 4:29 pm

    This is top stuff, I was just researching writing my own HTML 5 Javascript library with inheritance, property change events and binding for targeting mobile webkit. Looks like I don’t need to as I found this! good work.

    Cheers
    Simon

  6. Jacob Wright says:
    June 14, 2010 at 4:46 pm

    Would love to have help.

  7. longhairedsi says:
    June 15, 2010 at 6:02 am

    I’ve forked the repo. I’ll have a play and get to know the guts of it then i’d be happy to help.

    Cheers
    Simon

  8. Matthew Painter says:
    August 14, 2010 at 5:06 pm

    This is a brilliant library, innovative, and well architected – well done :D

    When I have some free resources, this is top of my list for UX projects to support.

    Would you be interested in consulting work at all? Whereabouts are you based? Maybe we can have a chat over email? :)

    Keep up the good work!

    Matthew Painter
    CTO Kusiri

Leave a Reply