logo

Prototype.js and Ajax

Two things got me excited this weekend. Both of them related in a sense. First was Ruby on Rails. Second was Prototype JavaScript Framework. Related because Rails ships with the Prototype library. More on Rails tomorrow. For now, let's talk about Prototype. Here's what they say about it:

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Which sums it up nicely I thought. I've heard of it in the past and always been a bit dubious, as I am with most code libraries of this kind. Sometimes they tend to be all-encompassing, bloated files. Prototype however is fairly slender at forty-something KBs and not too much of a burden on the page load.

Anyway, last week I had cause to use Ajax again and this time I wanted to make sure I was doing it the right/best way. Prototype.js seemed to be the way to go. If it's good enough for Rails it's good enough for me.

At first I thought I'd use the library just for making Ajax calls. However, I soon found myself using other parts of it to make the rest of my coding a lot simpler and slicker. I then went on to update the Ajax @DBLookup database to use Prototype.js. Take a look at the source code for that Form. Lots of weird and wonderful code, like this:

var server = $F('Server')

Which is a shortcut to this:

var server = document.forms[0].Server.value

And it works for dropdowns too, where it would be a shortcut for:

document.forms[0].Server.options[document.forms[0].Server.selectedIndex].value

You can read all about how it works on this help page.

As I said it also makes Ajax a doddle too. Download the new updated DBLookup db to see how it in use and some Ajax tricks to boot.

What are the downsides? Well, the most obvious is the 40kb over-head. This though I think can be cut down by using only certain modules. What's 40k nowadays though? Not something I'd lose sleep over. The only other downside I can think of is how well the code will be adopted by future developers. To them it won't make any sense at all and comments in the code would probably have to alert them to the use of the library. Apart from that though it's a great way to make coding less hassle.

Comments

    • avatar
    • Scot
    • Tue 21 Feb 2006 07:43 AM

    Prototype.js is a great library. Not only is it very useful for development (as you have shown), there are also other JS libraries that are built on this framework that are very nice. For instance, Rico. It has a very easy to use Ajax interface that allows for multiple calls without each stepping on each other. I am like you and dubious of libraries but some other these out there are very slick.

    Good article.

  1. I started using prototype a little while back as a permanent part of my [grossly mutated] version of DomBlog (cheers, Jake) and really like the speed it has added to coding changes and demos. Ain't that ajax support sweet?

    Yeah, 40 kb? not really an issue these days. But, if it were, you could always try a script packer, or gzip if your server supports it. Probably get it down to 18 kb or so.

    @ Scot

    I also have a site we're working on that uses Rico and while it does a nice job, I wouldn't put it in the same class as prototype. It lacks the same level of polish. Just check out the rico home page in IE and FF and you'll spot some issues. Like Prototype, it also lacks documentation but proved much more sensitive to implement. It is cool enough, though, that we're going to go ahead and put it on a customers site for some visual effects.

  2. Found this very nice resource/documentation for protoType just now... thought you might appreciate it. (Documentation of the js file has always been sketchy, I think)

    {Link}

    Basically, it is a properties/method map. Enjoy.

    • avatar
    • Jake
    • Tue 21 Feb 2006 09:35 AM

    Thanks Andres. Very useful. You're right about the documentation. I think the author decided to skip that part.

    • avatar
    • Spug
    • Tue 21 Feb 2006 09:49 AM

    Ruby on Rails is the new black. I'd imagine it was right up your street.

    Groovey enough to do things quick in, without being as light weight as PHP ... but not as over blown and slow as Java.

    People are going potty for it at the mo and if they get more hosters interested they I am sure it will fly.

    Spug

    • avatar
    • Andy
    • Tue 21 Feb 2006 10:00 AM

    Ruby on Rails is looking pretty sexy. I haven't been able to dig in as deep as I'd like just yet, but I've been impressed thus far.

    • avatar
    • Michael
    • Tue 21 Feb 2006 10:20 AM

    I follow the news with Prototype and other AJAX related posts at {Link}

    They had a post yesterday that included the graphical map of Prototype.js Here is the direct link to source... {Link}

    • avatar
    • Michael
    • Tue 21 Feb 2006 10:22 AM

    I just reread the blog and Andrew beat me to it. I still value the Ajaxian website as the 'goto' place for AJAX related material as there are several article per day on that blog.

    • avatar
    • Axel
    • Tue 21 Feb 2006 12:32 PM

    [quote]At first I thought I'd use the library just for making Ajax calls. However, I soon found myself using other parts of it to make the rest of my coding a lot simpler and slicker.[/quote]

    Thats an interesting sentence.

    thx.

    Axel

  3. I'll use this opportunity to whore out my Rails related website - {Link}

    It's pretty much just me writing various "beginner" bits and pieces as I add more stuff to my website which I have been rewriting in Rails (which is {Link} and probably NSFW).

    • avatar
    • Patrick Broeknellis
    • Wed 22 Feb 2006 12:38 AM

    And don't forget script.aculo.us which is also build upon prototype {Link}

    • avatar
    • Jake
    • Wed 22 Feb 2006 04:37 AM

    Patrick. I've been playing with script.aculo.us a bit recently. Very nice. Also moo.fx.js which is tiny in comparison. Another great library is the Yahoo! UI Library.

    • avatar
    • Axel
    • Wed 22 Feb 2006 06:25 AM

    currently there is a bookpromo by Christian Gross (published an Ajax book on apress) on javaranchs dhtml/javascript forum: {Link}

    Pretty interesting to read (at least for me). Outspoken guy.

  4. Jake,

    Yes, moo.fx is very nice...It now has it's very lightweight moo.ajax library ({Link}

    Besides protype the dojo ({Link} javascript toolkit is used a lot. Dojo has it's own AJAX library as well.

    I have been using AJAX a lot lately. Especially with Lotus Domino, AJAX can also return HTML as a response instead of XML (or JSON, please read: {Link}.

    We as domino developers can return html-snippets using different forms for same data....

    • avatar
    • zaphod
    • Wed 26 Jul 2006 05:53 AM

    the example database doesn't work fine for me... i always get "error" on dblookups results. i made no change to db. Should i set up something?

    • avatar
    • Steve
    • Mon 11 Feb 2008 01:44 PM

    Hello!

    This is all well and good, but I'd advise against using it for existing applications, unless you built them and know them inside and out.

    I'm in the process of "webifying" an existing complex Notes based application, built with Lotus Workflow. I set up "prototype.js" to use some of it's functions, but now some of the Workflow functions don't work.

    I also took part of one of your menus, and it won't work with prototype, either.

    When I get more time, I'll look more into it, but as this point, I still think it would be easier if we had our own library with just the functions we need, instead of trusting an unknown 3rd party to do it.

    My 2ยข

    Steve in NYC

    "Indecision is the key to flexibility."

    • avatar
    • peter
    • Sun 28 Jun 2009 11:12 PM

    It is not working in my IE7.

    Please advice

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Tue 21 Feb 2006

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content