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.