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.
Skip to the 
You can subscribe to an individual
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.
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.
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.
Thanks Andres. Very useful. You're right about the documentation. I think the author decided to skip that part.
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
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.
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}
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.
[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
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).
And don't forget script.aculo.us which is also build upon prototype {Link}
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.
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.
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....
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?
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."
It is not working in my IE7.
Please advice