AJS 3.0: JavaScript taken to a new level

Normally, documentation sucks, but I am going to change that rule, please check out the API, all the important functions are documented, there are also lots of examples.

Why a new JavaScript library?

I started with MochiKit and I really liked it, but at that time I had to include 116 KB of JavaScript. Now, I really like the cleanness of MochiKit, support for functional programming, DOM shortcuts etc. so I forged some of MochiKit and started on AJS.

I then spent around 1 year to create a 27 KB (uncompressed) kick ass library. 27 KB is the maximum filesize - my GreyBox script uses an AJS file of only 9 KB. I.e. this library is polymorphic (more info about this later on)!

What can AJS do for you?

• Drag and drop made dead simple
• Tranverse lists by functional programming
• Create DOM elements using a really neat syntax
• AJAX with a bliss
• The first true polymorphic library = Save bandwidth!
• Works in all modern browsers
• ...!

Now I could continue naming things it can do for you, but I think it's better with some examples.

Sortable list implementation in 27 lines!

Ever wanted to create a drag and drop supported sortable list? Did you look in script.aculo.us implementation? Well, don't look... It's hundreds of lines long!

But, check out the sortable list example done with AJS. It works in Opera, IE 5.5, IE 6, Firefox, Safari etc. It's done with only 27 lines!

Understand me right: Creating a wrapper for sortable list and implementing sortable list isn't the same thing. script.aculo.us use hundred lines to implement it.

Functional programming

Standard way of doing it:

var sum = 0
var list = [1, 2, 3]
for(var i=0; i < list.length; i++)
   sum += list[i]
//sum equals 6

AJS.map way:

var sum = 0
var list = [1, 2, 3]
AJS.map(list, function(n) {
   sum += n
})
//sum equals 6

You decide what's more beautiful.

Creating content on the fly?

Creating content from JavaScript is getting more and more popular - that's why you need shortcuts.

Normal way to do it:

var span = document.createElement('span')
span.className = 'babu'
var p = document.createElement('p')
var img = document.createElement('img')
img.src = 'image.gif'
span.appendChild(p)
span.appendChild(img)

Using AJS DOM:

AJS.SPAN({'class': 'babu'}, AJS.P(), AJS.IMG({'src': 'image.gif'}))

AJAX made easy

Do an AJAX call to Google in 3 lines of code:

var d = AJS.getRequest("http://google.com/search", {q: "test"}, "GET")
d.addCallback( function(res_txt, req) { alert(res_txt) } )
d.sendReq()

That's it. You can find more AJAX'ed examples in distribution.

What browsers are supported?

• Firefox 1,0 and 1.5
• IE 5.5 and 6.0
• Netscape 7
• Safari
• Opera 8.5 and 9
• And others...

Download it today

• Download AJS 3.1 today

Be also sure to check the AJS API.

Polymorphic

A Python script (that is included with the distribution) can scan through your code and find out what AJS functions you use... This is then used to build a minified AJS just for your code! The Python script will also analyze AJS dependencies.

My results of using AJS_minify.py:

• For version 3.95 of GoogieSpell I saved around 16 KB
• For version 3.45 of GreyBox I saved around 18 KB

E.g. for GreyBox the filesize of AJS went from 27 KB to only 9 KB!