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.

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.

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.

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.

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.

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.

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.