December 27, 2006...3:06 am

Prototype.js != $()

Jump to Comments

I generally prefer not to use javascript libraries but during my latest project, I thought I would try using prototype.js since the whole wide world says it makes Javascript less painful. But after learning to use prototype.js, I got frustrated very quickly. Let me explain why.

Some issues that I have noticed with prototype.js is that it alters the for in loop and as a result, when I include prototype.js, my older files not built using this library throw errors. The $F() function in prototype which is basically document.getElementById().value cannot be used for assignment. It can only be used to retrieve the values. I personally do not like any library that extends javascript objects (primary libraries). I would rather use a secondary library (a collection of useful functions).

A lot of javascript tutorials written today are based on the prototype framework. So, I thought it would be nice to see how other people use prototype.js . What I found is that the majority of people use it only because they think it is easier when in fact, they use only a couple of prototype functions ($() and the AJAX functions primarily).

There are some pretty ridiculous examples out there but take a look at this one. The tutorial includes 2 .js files one of which is prototype.js (48.3kb) and the other is paging.js (3.3 kb). Paging.js has only 142 lines of code and if the entire program was rewritten without using prototype.js, it would only be 195 lines. So, the total size of the javascript is 4.2 kb compared to 51.6 kb when using prototype.js. Isn’t this totally absurd? And the only prototype functions they use are AJAX , $ and the Event.Observe functions.

Prototype.js is now 63 kb which is more than most of my javascript files. 63 kilobytes take a relatively long time to load. Even Digg loads slider.js though I don’t think they use it anywhere.

Many people started using prototype.js because of its AJAX functions. But the point here is that prototype.js is not an AJAX library. It is too big for using only AJAX functions. It is time people started writing their own funcitons or using a few of these pure AJAX libraries. The cross-browser AJAX functions are not tough. You need to write one function to initiate the XMLHttpRequest object across different browsers and another function to manage the request.

The only reason I have left to use prototype.js is when I use the script.aculo.us library for graphical effects. I wish someone would rewrite this library without prototype.js. 60kb is no joke. Besides the couple of issues that I pointed out with prototype.js, it is in fact probably the best javascript library but people have to learn to use it well. Use it only when you really need to or better still, write your libraries. That way, you can learn more and solve your problems by yourself.

Prototype.js also lacks in documentation (though now, it is much better than a year ago). Debugging using prototype.js is also hell because if you use prototype.js functions and debug it using Firebug, many times you will get the error in prototype.js. So, anyway, you will have to read the javascript code in the prototype library. Familiarity with code is sometimes more neccesary than ease of coding and speed. Other issues with prototype.js is that people who use it too much forget the real javascript functions. That’s another reason why I think everyone should either write their own javascript libraries or take only certain functions that they use. Lastly, I don’t understand what people who use prototype.js for small operations(like the example before) are thinking. For heaven’s sake, if you are only going to use $() function, then copy and paste only that code!!!!

By the way, James Mc Parlane also has a very good post about why he doesn’t use prototype.js.

60 Comments

  • I completely agree. I’m amazed by how many people think prototype and all the plug ins for it are helping in any way. They are so convoluted that trying to modify the scripts is a joke.

  • Prototype does not alter the for loop, the for loop was broken long before prototype came along. It’s because in javascript the code

    object['a'] = ‘foo’;
    and
    object.a = ‘foo’;

    are literally one and the same, so as soon as you go adding functions to the object, it breaks.
    Yes prototype is “bad” for doing this, but it’s most definitely not the first or only js code to ever do it, and IMHO the benefits of adding methods onto the objects where they should have been all along is worth it.

    Luckily prototype provides the $H(object).each(…) syntax as a nicer (and safe) alternative, so you don’t need to bother with for loops anymore anyway.

    As for the 63k file – sure it’s big, but apart from the very first time you hit the site, it’s loaded from the browser cache, so is a non-issue. If you discover from your site’s users that this is actually a problem then as you say, just pull the code you want out of prototype and leave the rest, but I’d say 99 times out of 100, it’s not a big enough problem to warrant the effort.

  • “Prototype does not alter the for loop, the for loop was broken long before prototype came along.”

    The for loop never was broken, it was this way by design. First class functions (and objects) don’t come for free. The same is for prototype base object orientation, it’s just the way the language does things.

    “I’m amazed by how many people think prototype and all the plug ins for it are helping in any way.”

    The thing prototype.js does is “emulate” class based object orientation in Javascript. And it does it fairly well. It’s created to make Javascript act ‘normal’.

  • jQuery is a nice alternative. It has most of the same features (many of which through user-made addons), a -much- smaller file size, and tons of documentation.

    http://www.jquery.com

  • http://dev.rubyonrails.org/browser/spinoffs/prototype/src?order=size

    just to be that guy that does this, but i only see your 63kb argument valid if you pull all of the different ‘modules’ together. you don’t need them all in most cases. at most, even for the ajax.js and its requirements (i think) is only 27kb… 1/2 your original estimate. and if you are that worried about the size, run it through packer or something of the type.

    i think these libraries are great.
    1. it allows for less coding with far better and quicker results.
    2. it grants functions that aren’t always the easiest to write and be x-browser
    3. they are maintained by some imho really talented programmers. they make javascript fun and yes, sometimes cool
    4. if all else, i think they are well written and you should at least try to emulate the same syntax and design patterns. they are easy to read and really do work

    -Nick

  • Prototype’s choice of modifying base system objects (inspired by Ruby / Rails, where this is a common practice) is indeed very problematic.

    I have been using MochiKit for many projects and I find it much nicer to work with.

    1. It has excellent documentation – much better than any other library JS library.

    2. Even though it supplies tons of helpful utilities for making the JavaScript environment more powerful and flexible, it does not modify the base namespace – MochiKit is as non-intrusive as a library can be.

    3. MochiKit is divided into sub-modules, so you don’t have the load the entire library if you only use a subset of the functionality (though I understand that Prototype is in the process of going the same way).

    Go and check out MochiKit, it’s a really great library!

  • I didn’t expect so much response to this article but I appreciate it.

    Nick:I agree that many of these libraries are great including prototype.js. But the problem is that many people think they should use a library for every small thing. Check out http://www.ajaxlessons.com, every tutorial of theirs uses prototype.js. This is really absurd and bad. Firstly, the first time you learn something new like AJAX, you should learn it properly without using libraries, from a source like the IBM developer series. Secondly, you shouldn’t use prototype.js for only one or two functions. http://www.ajaxlessons.com really pisses me off because they say prototype.js = javascript.So, my point here is that if you are using prototype, use it fully not just for one or two functions. Learn how to use it well.

    Derek & Tom: I will try out jQuery and MochiKit. Though in general, I prefer writing plain javascript. Some of my formal projects must run on IE as well, so I would rather use a library instead of worrying about cross-brower compatibility. As you said, MochiKit is non-intrusive. I think that is one of the most important things in a library. If a library fundamentally changes the syntax of a language, then you are not learning to write Javascript at all. Also, I think a lot of people do not respect javascript as a language and that is one of the reason we have so many helpers and libraries.Lol, I guess it shocked them when suddenly in 2004, javascript became so important.

  • chimney, I definitely agree with you re: people learning prototypeified javascript rather than core javascript and then moving up.

    The same problem has been plaguing every programming language forever – I originally got taught C++ with MFC, and for a time I believed CString and CArray was literally how C++ worked and that they were fundamental to it… Yes I was young and didn’t know much, and I shudder now, but countless are the programmers doing the exact same thing with javascript and C# and whatever else right now.

    I guess the end result is though, the ones who are half decent and care to investigate, will read things like reddit and learn core Javascript or whatever on their own.
    The ones who aren’t capable of doing this are unfortunately probably not capable of learning the core JS language or core C++ for that matter anyway… suffice to say, the posts on thedailywtf.com have to come from somewhere, just don’t hire them :-)

  • create x view x

  • As others have started to note, you greatly underestimate the browser cache. Even if you don’t make much use of it now, or on every page, having it cached already gives you a greater degree of freedom.

    Should people try and learn the concepts and code behind the libraries? Sure. Is it the end of the world if they don’t? Nope.

    As for Prototype extending Javascript base objects. I’ve struggled back and forth on this quite a bit. Like most people I expected Javascript to behave more like an OO language. Well it isn’t, and I’ve started to come to terms with that. With that said, there are some amazingly cool things that you can do with prototype (not the JS library) based mechanisms that Javascript provides.

    Check out some of Douglas Crockford’s Javascript videos. He gives some great information on how to deal with Javascript.

    In the end people use libraries in an effort to make things easier. Being able to write one yourself is nice, but shouldn’t be the final judgment call on their project. That whole standing on the shoulders of giants thing and all.

    Disclaimer, yes I have a project that uses Prototype.js. It still needs plenty of work and I’ve even considered a re-write without using Prototype.js :-)

  • I agree with you that prototype is large.

    However, one of the things that I like about prototype is the ability to get the src. Which means that you can piece together the parts of the prototype library that you need.

    if you look here:
    http://dev.rubyonrails.org/browser/spinoffs/prototype/src

    you can see the subversion repository that has the individual pieces.

  • [...] Design, Programming, Site Update, Interesting, WordPress, Plug-in | no comments yet | permalink Written byPatrick Havens Prototype.js != $(). I’ve been thinking about other JS librarieslately, like Moo, jQuery, and Dojo. (jQuery and Dojo both use WordPress for their blogs.) We need to make a final final decision about what JS framework we’re going to stick to for a year or more before we release WP 2.1. [...]

  • [...] Another day, another article bashing the Javascript toolkit everyone loves to hate – Prototype. The complaints can be narrowed down to a few points: [...]

  • man its great when such a cool convo is started. Good read!

  • I junked Prototype in favor of jQuery ages ago!

  • I like prototype.js and the ideas in it. But I also agree with that it has a lot of useless functions, and it size. So I was very glad when I found mootools(http://mootools.net/).

  • I think Prototype is good if you are building a JS heavy rich internet application, where you are going to be using a significant amount of its functionality. For page enhancement, where you are likely only using one or two functions then it becomes overkill.

    What we need is a lightweight version of Prototype, or a similar framework aimed at page enhancement, rather than application building. For example, remove all the hashmap stuff and keep the $() function! Look at what functionality 80% of Prototype users leverage, and ditch the other 20%, whilst taking care to ensure that things like the Scriptaculous effects still work (as they are often used for page enhancement).

    Another thought would be for an IDE to perform JS optimizaton of a given framework, so you build your page, and when you are publishing, it will look at the JS code you have and dynamically build a framework.js based on the functionality/methods used by your code. Hence automagically creating this framework-lite version.

  • In response to Ajaxian’s post,

    “As I wrote on my post, I don’t think that prototype.js sucks. The primary point when writing my post was that many people abuse (under-utilize) prototype.js. They use the entire library just for a few functions and hence, the title “prototype.js != $()”. I believe that there are many tutorials such as this one that show people how to use AJAX and they do it using the prototype library. Hence, a lot of people think that prototype.js is an AJAX library and use it for XMLHttpRequests when AJAX is only a small part of the library. Even Digg, one of the best social sites today, includes slider.js and I don’t think it uses a slider control . Am I missing something here?

    So, the problem here is with people abusing prototype.js and of course, that does not mean prototype.js does not have problems. But I am a bit baised against using javascript libraries in general. If everyone did not use libraries, debugging would be much easier and they would learn much more in the process. After all, Javascript is a simple language except for browser discrepancies.

    Chris’s idea of Optimising JS is really cool.”

  • [...] Articolo che vede come fare alcune delle cose previste dagli attuali framework in modo semplice, senza appesantire inutilmente la pagina. Basarsi anche sull’articolo http://abcdefu.wordpress.com/2006/12/27/prototypejs/

  • Take a look at my site… http://nico.berlee.nl it has a javascript of 4.2KB and is totally Ajaxified including preloading instant search and commenting…

    This article relates to my findings here http://nico.berlee.nl/ajax-javascript-libraries/

  • Nice posting. I enjoyed it.

  • [...] Prototype.js != $() « Chimney (tags: javascript prototype library ajax) [...]

  • [...] day, another article bashing the Javascript toolkit everyone loves to hate – Prototype. The complaints can be narrowed [...]

  • About the size, if you are using a decent web server you cam compress js files untouched to the browser, I’m using lighttpd and mod_compress, the default prototype is compressed to 17k. but whem I put my code in production I run a javascript “compressor” that remvoes comments and formatation, it gets down to 14k

  • “The tutorial includes 2 .js files one of which is prototype.js (48.3kb) and the other is paging.js (3.3 kb). Paging.js has only 142 lines of code and if the entire program was rewritten without using prototype.js, it would only be 195 lines.”

    This article is completely bogus. Let’s do some math here:

    ((195-142)/195) = 27%

    Thats right, in the example the author posted,
    there is a 27% increase in efficiency. At this rate if
    you were to write 2000 lines of code, you would have saved
    540 lines of code, which could easily equate to 2 days of work
    for the average programmer.

    This article is BS.

  • Most images on a page are larger than 60K. A little over a second at ordinary DSL speeds. I think you will begin to see some javascript libraries much larger than 60K as desktop applications move to the web.

  • chimneydials said: “Firstly, the first time you learn something new like AJAX, you should learn it properly without using libraries, from a source like the IBM developer series.”

    While I am such a fan of prototype.js (and yes, I only use ’small parts’ of it… which is all I want and the 50-60kb is _still_ well worth it imo),
    I absolutely agree with the sentiment above. The AJAX “cheatsheet” I put up here:

    http://www.neotitans.com/resources/ajax-cheatsheet.html

    is a one-page tutorial, which is all you really need to understand what AJAX – or more correctly, XmlHTTPRequest() – is about.

    I discovered “AJAX”-style techniques long long before Jesse James Garett coined this inaccurate, misleading term and well before XMLHttpRequest was available cross-browser and in fact thought about patenting it. (I didn’t because around a year or two after I thought of it, Netscape Devedge described essentially the same technique… but in a far more complicated manner… anyway good thing I didn’t, because with the ready availability of XHR, that more cumbersome technique is now worthless).

    What I realized back then was that in order to make refresh-free pages, the CRITICAL functionality needed was to be able to take content from an arbitrary URL and load them into a javascript string. I was amazed that DHTML circa 2001 didn’t have this basic ability and I figure out a complex hack to enable such apparent behaviour. Here’s how it works:

    Load your URL into a ‘dummy’ iframe (can be easily made invisible with display:none), then have a callback (e.g. onload()) in that iframe fill a DIV (or whatever) in the parent document. (Of course, you need a dynamic server page to serve the data you need under that URL, a static page will always serve the same data and would be useless.)

    Presto, “AJAX” (ugh i hate that term) without XHR…

  • Is there a stripped version of prototype.js for Ajax only?

  • i was going to start in making a .js file, which fulfill my need and same time i found prototype.js and discussion on this site. so, i m very thankful of all u for ur valuable discssion. so, i start from new end….
    Not to use prototype.js, it is very big file, many extra things are included in it.

  • I have written a couple of scripts on top of prototype.js and used even more libraries using that framework.
    And there is one very imprtant difference between writing your own scripts – using prototype.js is faster because:
    1. I do not have to take much care of compatibility with different web browsers.
    2. Libraries built on top of prototype.js usually provide enough functionality (script.aculo.us, lightbox, rico)
    3. The amount of libraries using prototype.js is groving.

  • [...] This is great PR: WordPress 2.2 migrated to jQuery due to Matt reading criticism such as this. [...]

  • [...] was really thrilled to learn that JQuery can work nicely with Rails and then went on to read criticism of using Prototype in web projects. It makes a lot of sense as it brings quite an overhead and when [...]

  • [...] Prototype.js != $() The only reason I have left to use prototype.js is when I use the script.aculo.us library for graphical effects. I wish someone would rewrite this library without prototype.js. (tags: Protoype Scriptaculous JavaScript) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

  • [...] Prototype.js != $() « Chimney — Prototype.js sucks for a few reasons. Use jQuery! [...]

  • Hi there,

    Nice article. You know, I’m also one of those using prototype for only very few functions. After reading this I’m definitely going to reconsider using prototype. Or at least the complete library.

    Thanks!
    Pepe

  • I would like to weigh in from the perspective of a self-confessed javascript newbie…. my first foray into ajax today, and prototype was the first decent thing I came across. I also happened upon this article while trying to find a lightweight version of prototype.

    I was amazed at how easy stuff was but also hesitant about the 100kb file size.

    I would also like to make the point that I don’t have the time to dedicate to learning javascript extensively, and as such a library like prototype is a dream come true.

    But I am looking for a smaller ajax-only library that will be small enough for me to make sense of. Just another 100 firefox tabs to trawl through, might even get some sleep tonight!

  • I’m not sure if your beef with prototype’s size is 1) how much it bogs down the browser by having to parse that Javascript or 2) download bandwidth.

    If it’s the latter, it’s a totally unwarranted and misguided concern. To put things in perspective, that image you use at the top of your blog is already > 60KB. If bandwidth was an issue, you could probably shrink your header picture down by half with little perceptual loss of quality just by tweaking a slider in Photoshop. Cutting down a Javascript library’s size may not be so easy.

    Using libraries should be not be discouraged. Between cutting server load by a couple of KB per user and saving the web developer a few days or weeks of his time rewriting and debugging boilerplate code, I’d rather the latter.

    Check out the “Not Invented Here” syndrome.

    Of course there are smart(er) ways of going about it like proper modularization and not blindly including unused libraries. As you noted, one doesn’t need the entire prototype.js library just for AJAX.

  • I didn’t agree with this article…

    because if are developing larger Sites then the size is no matter like 47kb or something nowadays broadband’s and dsl connections are more faster than theese sizes :) so if the developer really feel ease to ue this type of libraries then Go Ahead ….. make more and more of it…
    it’s Save your time And
    TIme is Money
    it’s mean you are saving your money

  • Just a note. You mentioned in your post that “The $F() function in prototype which is basically document.getElementById().value cannot be used for assignment.”. I recently solved this seemingly frustrating issue with the following:

    $F(’element’).value = ‘Your Value’;

    Hope that helps. jQuery is another alternative but since I use prototype.js and scriptaculous I just compressed my version.

  • What’s the problem with using some functions only from the library?

  • Why are people so afraid in using AJAX httpxmlRequest object? It only has a few properties and methods to remember and then you are done.

  • I would like to see a continuation of the topic

  • old post i know but i’ve been using Prototype for months now and it’s great…..the css3 stuff is amazing….i don’t think jquery does that…and i also love the fact thats it’s so easy to use along with scriptaculous….which is an amzing library (originally part of prototype aooarently).Chris’s comment about a lightweight version of Prototype is valid but is 130k that much of an overhead?

  • One of the problems with prototype IS the $() function – I find many people aren’t aware of the significant performance cost when using it, because it’s so easy to write. For example:

    $(’someDiv’).style.display = ‘block’;
    $(’someDiv’).style.top = ‘10px’;
    $(’someDiv’).style.left = ‘10px’;

    actually invokes 3 calls to document.getElementById()

    There are other problems that I see fairly often (not testing for an object before doing operations on it, etc), as well. I suspect that’s the result of using a library to do things in a language you don’t really understand instead of taking the time to learn the language right.

    I suppose that if you’re just putting something up quickly, or want to do really common types of functions on your site, prototype is OK. But if you’re building something with heavy javascript, you should probably learn javascript proper instead of leaning on prototype to ‘make it easier’. In the long run, it won’t.

  • [...] Prototype.js != $() « Chimney (tags: prototype.js js AJAX analysis article Framework criticism JavaScript learning library opinion links people performance review productivity reviews technology trends web2.0 webdev wordpress work prototype Programming internet web) [...]

  • “One of the problems with prototype IS the $() function – I find many people aren’t aware of the significant performance cost when using it, because it’s so easy to write. For example:

    $(’someDiv’).style.display = ‘block’;
    $(’someDiv’).style.top = ‘10px’;
    $(’someDiv’).style.left = ‘10px’;

    actually invokes 3 calls to document.getElementById()”

    You could still do:
    var somediv = $(’somediv’);
    somediv.style.display = ‘block’; etc…

  • Very informative post. Thanks for sharing.

  • Haha, just saw this post, and I found that you’re absolutely correct.

    I found Prototype.js few days ago and amazed by its $() syntax. Thought it will be good for me to develop website, but later found that 120k of prototype.js just too huge for me. I am using broadband, but with maximum download speed around 50k. That mean I need about 5 seconds to fully load a page, which, gross.

    So when I removed Prototype.js, my site can now load with speed about 1 second. Cool.

    So the moral behind this is, try to code yourself before using Prototype.js. Don’t rely on $() syntax. I’m a typical javascript beginner, haha.

    For AJAX stuff, I would suggest to write your own Ajax functions.

    ———–

    Hey I have a question: If I use CakePHP $ajax, how, not to use Prototype.js? Just curious, whether we can use our own Ajax functions to replace that.

  • @sjarkie I must admit I make that mistake often, too. So, thanks for pointing it out. :)

    @cwmao, When I wrote this post, I was a beginner in JS. Now, I have gotten a little bit better and I am not so “anti-library” anymore. :D I use jQuery now and its much better than prototype in my opinion. But still, I believe that when you start learning JS, its best to code everything yourself and then, once you know enough, you’ll see the point in moving to a library. So, you are spot on in that regard.

    And regarding your question – Yes, in CakePHP, you can include your own javascript and then, use the AJAX functions from that file. It’s pretty straightforward. Check out http://r4.sharedcopy.com/62nomtbn to see how to do it. And remember to include the javascript helper first before you use $javascript in your code. Btw, I mostly use CakePHP with jQuery now.

  • Thank you for the reply.
    Btw I have a question. If I want to use script.aculo.us? Prototype is a must right? Sob..

  • Yep. script.aculo.us uses Prototype.

    But you can also check out jQuery & jQuery UI (which was just released a couple of days back). It’s really nice because jQuery is only 16kb and it’s also much more fun to use.

    Some really neat effects here – http://ui.jquery.com/repository/real-world/effects/ & http://ui.jquery.com/functional_demos/

  • Yep, thanks :)
    I just tried jQuery and it works great too, although not as fancy as script.aculo.us, it’s enough for simple animation.

    It will be nice if jQuery can compile their API (or docs) into PDF or any offline format, coz I can only online for a period of time. Still looking for it. If anyone has any idea where can I get it, do reply, thanks!

  • Thanks! But… I have already save down all the API pages to my laptop, lol, one by one!

  • Have you considered the benefits of browser-abstraction? In your example, how many more lines of code would it take to be completely cross-browser compatible?

    If the answer is ‘none’, then that is an over-simplified example for which prototype is not intended.

    How about giving an example on the scale of, say, Facebook.

  • @sjarkie

    you example is flawed:
    $(’someDiv’).style.display = ‘block’;
    $(’someDiv’).style.top = ‘10px’;
    $(’someDiv’).style.left = ‘10px’;

    this can be written as:
    $(’someDiv’).setStyle({display: ‘block’, top: ‘10px’, left: ‘10px’});

    which is much more elegant.

    see http://prototypejs.org/api/element/setStyle

  • for only an ajax pourpose, i found it http://code.google.com/p/microajax/ ;)


Leave a Reply