Pure-Essence.Net

Why I prefer jQuery over YUI

October 11th, 2008

While at work, I was trying to find a way to easily do server side pagination without writing all the lovely logic myself. Due to some constraints, I am unable to use more high end framework such as JSF and struts. Which in a way I believe is a good thing. I would have more control over just writing servlets. However, having written pagination logic before, I really did not want to write that again. Somehow I thought of jQuery. Just for amusement, I looked for jQuery pagination plugin and guess what I found it! By using this plugin, I can pass in some simple parameters such as total records, records per page, number of pages shown etc. to have jQuery generate a paginator for me. That’s beyond cool so I put it into action.

Upload Report Mock uses the jQuery pagination plugin but handles the pagination on the server side via php.

Ultimately what I also want to handle is the following scenario:

• I have a table of data, one of the column is editable.
• If the user clicks on the column of a particular table row, a modal window will pop up asking for additional information.
• The user fills out the information and submits.
• The window updates the info for that table via AJAX and updates the results screen

While I was eager for figure out how to accomplish that in jQuery, I found out that it is not one of the previously used javascript framework at work so they asked if I could look into YUI.

Digging into YUI, first I tried to accomplish the same thing using the YUI paginator widget. I spent two hours but it really does not seem like I can generate some href tags with this component like I could with the jQuery plugin. With jQuery, I could produce:
<div id="pagination"> <a class="prev" href="/work/eAdjusterActivityReport/uploadReport.php?page=1">Prev</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=1">1</a> <span class="current">2</span> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=3">3</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=4">4</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=5">5</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=6">6</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=7">7</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=8">8</a> <span>...</span> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=10">10</a> <a href="/work/eAdjusterActivityReport/uploadReport.php?page=11">11</a> <a class="next" href="/work/eAdjusterActivityReport/uploadReport.php?page=3">Next</a> </div>
With YUI, I have to hook up the paginator with another javascript or YUI widget. So to make things easier, I looked into YUI’s datatable component and found an example to use it with server side pagination and sorting. That seems to accomplish the overall need of pagination. Although that’s a bit of overkill but I thought it’s worth a shot. I spent 8 hours implementing it via server side JSON. Here’s what I produced:
Upload Report Mock with YUI

Instead of 10 lines of javascript code like the previous, this one has 68 lines. But it does provide AJAX pagination so I thought that’s mostly fair.

Next I looked for a simple date picker calendar in YUI like the jQuery date picker plugin. The date picker is a necessary functionality of the application. With jQuery, it’s extremely easy to use. You add the plugin js & css links, and then you give your input css class or unique IDs and with jQuery selector, just call the plugin via:$("#startDate").datepicker()

Click on the start and end dates in Upload Report Mock to see it in action.

Using YUI, I looked into its calendar component. The closest thing I could find is this example.

Not only would it need all these extra js includes
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
It also requires another 76 lines of javascript code for just adding one date picker.

Despite the complication, I tried to make it work with my Upload Report Mock with YUI but I failed pretty miserably. Sure if I put in enough hours, I will eventually make it work but WHY? Why would you stop yourself from using something else that takes 2 seconds?

At this point, I presented my findings to my co-workers. I really hope they will accept jQuery. Yea sure it’s yet another new javascript framework but it will save coding time.

Here’s another comparison. I found a very YUI datatable like jQuery plugin flexigrid. Take a look at example 3. Lines of code to use server side pagination and sorting: 33. In my Upload Report Mock with YUI, I used 68 lines. Also let’s do a comparison to see which one makes more sense and is less verbose.

jQuery:
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} ], buttons : [ {name: 'Add', bclass: 'add', onpress : test}, {name: 'Delete', bclass: 'delete', onpress : test}, {separator: true} ], searchitems : [ {display: 'ISO', name : 'iso'}, {display: 'Name', name : 'name', isdefault: true} ], sortname: "iso", sortorder: "asc", usepager: true, title: 'Countries', useRp: true, rp: 15, showTableToggleBtn: true, width: 700, height: 200 } );

YUI: click for source.