baseJS logo This past fall I was tasked with creating a few iPhone-specific web applications. After doing a lot of research, I found a few issues with the popular JavaScript libraries. The availability of -webkit-transform and -webkit-animation removed any need for an animation library. Second, since the Query Selectors API was available, the need for a complex javascript selectors engine was basically pointless1. And last, every library that I came across, even after minifying, was far too large for the iPhone to cache (24KB limit).

So looking at these first two issues, I tend to feel like those, as well as cross-platform issues, are some of the biggest reasons we use JavaScript frameworks in the first place. But here I was, developing for a single platform. So, what did I do?

I wrote baseJS. I just needed a simple, lightweight framework that could take care of some common and bulky tasks and allow me to write cleaner, more organized code.

Features

  • Lightweight: less than 8KB when minified
  • Fully-compatible with Mobile Safari
  • Falls back on Sizzle selector library for iPhone 1.x (when query selector support is unavailable)
  • Encourages use of CSS Transitions and Animations
  • Object-oriented
  • Easy to extend

Quick Examples

Organization Syntax of Classes

var AppClass = function() {};
base.extend(AppClass.prototype, {
    method1: function() { return true; },
    method2: function() { return false; }
});

Is equivalent to:

var AppClass = function() {};
AppClass.prototype.method1 = function() { return true; };
AppClass.prototype.method2 = function() { return false; };

Element Selectors

baseJS uses the Selectors API if available, or falls back on the Sizzle selector library if query selectors are not available.

var header = $('#header')[0]; // Selects the first object on the page with ID 'header'
var awesome = $('div.awesome', header); // Selects every instance of <div class="awesome"></div> in #header

Ajax Shortcuts

Face it: writing AJAX is tedious and requires a lot of steps. baseJS’s io() class simplifies the process.

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Element Creation Shortcuts

var newLink = new Element('a', { class: 'topLink', href: '#top' }, 'Back to Top');
$('#foo').appendChild(newLink);

Appends the following to <div id="foo"></div>:

<a class="topLink" href="#top">Back to Top</a>

There’s More

Be sure to check out the baseJS API and Documentation to see a full list of included methods and get help using them.

Get baseJS 1.0rc1

baseJS is nearing 1.0-complete status. You can currently nab the first release candidate and read the documentation to get you started.

Download baseJS 1.0rc1

API & Documentation

Get Involved with baseJS

baseJS relies on your help to make it as awesome as possible. Feel free to fork it at GitHub and report bugs via Lighthouse

License

baseJS is licensed under the GNU General Public License v3.0. More information is available in the download.

Footnotes

1That is, unless you need iPhone 1.0 compatibility, but don’t worry: Sizzle has been included as an optional fallback.