www.webdeveloper.com
Results 1 to 11 of 11

Thread: JQuery or Prototype or YUI

  1. #1
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367

    JQuery or Prototype or YUI

    Hi all if I intend to use Open Source libraries to help me in Javascript especially for AJAX related coding, which libraries would you all recommend?

    1. JQuery
    2. Prototype
    3. YUI

    Please provide some pro and con for each libraries. Currently I am looking more at JQuery but I am not ruling out Prototype and YUI though.

    Thanks.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    if you are a DIY type, prototype takes care of your light work. it would be my favorite library if used those sort of things...
    if you are lazy, jQuery has a plugin for everything, though i tend to think poorly of the performance and accessibility of the majority of them.
    yui might provide a much smaller chuck of code just for ajax, but the whole thing has a reputation for being complicated.

  3. #3
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    Quote Originally Posted by sohguanh View Post
    Hi all if I intend to use Open Source libraries to help me in Javascript especially for AJAX related coding, which libraries would you all recommend?

    1. JQuery
    2. Prototype
    3. YUI

    Please provide some pro and con for each libraries. Currently I am looking more at JQuery but I am not ruling out Prototype and YUI though.

    Thanks.
    Personally I really like Mootools. It makes making vaguely OO Javascript quite simple. It does everything I like. Effects are a piece of cake etc. etc.. There's also a small MooTools foundry with lots of different scripts written by different people so you might find what you need there.

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    jQuery is usually easy and even fun to write. And it's become the first choice for many developers.

    YUI is more powerful but also more verbose and harder to learn.

    I think Prototype has fallen out of favor with most developers. Today, most consider it good practice to keep library code contained within a namespace, such as "jQuery" or "YAHOO". Prototype doesn't do that.

    I don't think performance is much of a consideration anymore. Each of these libraries have reached a point where they're fast enough. Plus JavaScript engines are becoming blazingly fast these days.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    I really liked Prototype because the syntax was easy to understand and there was quite a bit of documentation. These days I am using Dojo. The Dojo library is extensive. The initial learning curve is greater than that of Prototype or jQuery but it's usefulness far outweighs that. Also, Dojo uses it's own namespace which was mentioned above.

  6. #6
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    1. jQuery
    2. Prototype
    3. YUI
    4. Mootools
    5. Dojo

    Thanks for everyone reply but have anyone tried out all and decide which is the fastest and easiest to use ? I guess such questions are pretty subjective. I am a person after performance over ease of API use. In that case which will be recommended ?

    I notice jQuery is about 71KB which has quite a small footprint. Since javascript tend to run within the browser and consume memory, small footprint is welcome anytime. Not to mention the performance that come along with it.

    Thanks.

  7. #7
    Join Date
    Mar 2010
    Posts
    29
    Just thoughts: you are able to combine jQuery and Prototype. Usually, the definition of the $ variable is the largest point of contention and conflict when using other libs on the same page as jQuery. As we know, jQuery uses $ as an alias for the jQuery name, which is used for every feature that jQuery exhibits. But other libs, most notably Prototype, use the $ name as well.

    jQuery provides the $.noConflict() utility function to relinquish control of the $ name to whatever other lib might wish to use it.

    Once this function is executed, jQuery features will need to be invoked using the jQuery name rather than the $ name.

    So, why only use one if there's the possibility to use the strength of two? I'm using jQuery and like it (but learned "normal" AJAX (XHR, status, ...) first). It is easy to understand and handle - even size is just variable (you don't have to take the full package). Have also a look at "jQuery UI" ... we must not reinvent the wheel everytime.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It depends on what you want to do. JQuery could be the first choice for general needs. But if your needs are simple to average, most of the time you don't need any library at all. Nothing compares with a well coded native JavaScript code which suits exactly to your needs. No more, no less.

    Libraries are not substitutes of a language, they will only help you to finish really intricate aims.

  9. #9
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by sohguanh View Post
    Thanks for everyone reply but have anyone tried out all and decide which is the fastest and easiest to use ? I guess such questions are pretty subjective. I am a person after performance over ease of API use. In that case which will be recommended ?
    Performance in real applications is often more complex than comparison benchmarks can show. The tools you're provided can play a big factor. Here's a real life example.

    Not too long ago, I was building a JS app that needed to do three things to initialize: It needed to create a panel from markup in the page; it needed to load XML data using Ajax; and when the first two were ready, it needed to add a click event to a link that would show the panel.

    With jQuery, I had done something like this:

    PHP Code:
    /* pseudo-ish code */

    // Start loading the XML as soon as possible
    $.ajax({
      
    url"/path/data.xml",
      
    success: function (data) {
      
        
    // After XML is loaded, wait for the DOM
        
    $(document).ready(function(){
        
          
    // Create the dialog
          
    $("#dialog").dialog({ autoOpenfalse });
          
          
    // And open the dialog on link click event
          
    $("#start-app-link").click(function(){
            $(
    "#dialog").dialog("open");
          });
          
        });
      }
    }); 
    The problem was that there was a noticable "jump" in the page when the dialog was finally created. I had tried it the other way around -- make the dialog first and load the XML second. That reduced the "jump" to just a flicker. Though, now the XML didn't start loading until after the DOM was ready, which delayed the whole app from being ready to use.

    I found a solution with the YAHOO library and their custom events.

    PHP Code:
    /* pseudo-ish code */

    // Shortcuts
    var Event YAHOO.util.Event;
    var 
    CustomEvent YAHOO.util.CustomEvent;
    var 
    Connect YAHOO.util.Connect;
    var 
    Panel YAHOO.widget.Panel;

    // XML ready event
    var xmlReady = new CustomEvent();
    xmlReady.fireOnce true;

    // Panel ready event
    var panelReady = new CustomEvent();
    panelReady.fireOnce true;

    // App ready event
    var appReady = new CustomEvent();
    appReady.fireOnce true;

    // Load XML
    var xmlData;
    Connect.asyncRequest("GET""/path/data.xml", {
      
    success: function (response) {

        
    xmlData response.responseXML;

        
    // Notify XML is ready
        
    xmlReady.fire();
        
      }
    });

    // Create panel
    var panel;
    Event.onContentReady("panel", function(){

      
    panel = new Panel("panel", { visiblefalse });
      
    panel.render(document.body);
      
      
    // Notify panel is ready
      
    panelReady.fire();

    });

    // When XML and panel are ready, notify app is ready
    panelReady.subscribe(function(){
      
    xmlReady.subscribe(function(){
        
    appReady.fire();
      });
    });

    // When app is ready, add click event to show panel
    appReady.subscribe(function(){
      
    Event.onAvailable("start-app-link", function(){
        
    Event.on(this"click", function (e) {
          
    panel.show();
        });
      });
    }); 
    Obviously, this is a lot more code than the jQuery above. But here's what I got for it:

    The XML and the panel initialize independently. The XML doesn't wait for the panel, and the panel doesn't wait for the XML. This got the app ready sooner than jQuery could do.

    YAHOO's onContentReady method was also a factor. This event executes even sooner than the DOM ready event. It reduced the flicker when creating the panel to a completely imperceptible transition, and it helped get the app ready to use even sooner.

    Notice that none of this was about YAHOO's code executing faster than jQuery's. This was about utilities that let my code execute sooner.

    I've been a YUI fan since this experience. Though I don't have experience with Mootools or Dojo, so someone else will have to expound on their benefits.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  10. #10
    Join Date
    Mar 2010
    Posts
    29
    hehe ... your "killer" is "$(document).ready" in your jQuery function, because your wait for your link target ... your yahoo-solution doesn't have such a "pause". ^^

    I would bet: if you remove "$(document).ready" and set it to the end of your loaded site, handling the callback "data" (function()) directly ... no flicker or something else would happen.

    Oh, what happens in "xmlReady.fire()" - setting e. g. "xmlReady.fireOnce" to false or similar?? (pure curiosity)

  11. #11
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    hehe ... your "killer" is "$(document).ready" in your jQuery function, because your wait for your link target ... your yahoo-solution doesn't have such a "pause". ^^
    YAHOO provides the onContentReady and onAvailable methods. These methods do pause while the DOM is loading. The difference is the YAHOO methods don't need the entire DOM to be loaded, so they don't pause for as long.

    I would bet: if you remove "$(document).ready" and set it to the end of your loaded site...
    Those two alternatives are nearly identical.

    Oh, what happens in "xmlReady.fire()" - setting e. g. "xmlReady.fireOnce" to false or similar?? (pure curiosity)
    The fire method will execute any subscribed functions.

    The fireOnce option determines how functions that were subscribed after the event fired will be handled. Normally, if I add a subscriber after an event has fired, nothing will happen.

    Code:
    var e = new CustomEvent();
    
    e.fire();
    
    e.subscribe(function(){
      // This won't run
      // It subscribed *after* the event fired
      alert("Hello");
    });
    If I set the fireOnce option, then subscribers are executed even if they were added after the event fired.

    Code:
    var e = new CustomEvent();
    e.fireOnce = true;
    
    e.fire();
    
    e.subscribe(function(){
      alert("Hello");
    });
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles