xPages and Javascript Libraries/Toolkits
Monday, March 1, 2010 1:53 PM
When it comes to developing web applications in xPages I've heard a number of discussions around which JavaScript library or toolkit you should be using. There are many excellent JavaScript toolkits the most common being MooTools, JQuery, YUI, EXT etc etc. There are tons of them and they all have their own benefits and community of users around them which will tell you that their particular toolkit is better then all the rest.
When it comes to xPages there is already a JavaScript toolkit pre-installed on the domino server called Dojo. If you have looked at Dojo in any way you are probably thinking that IBM selected Dojo because it has no documentation and would therefore be a perfect fit in the xPages world because the documentation for xPages is also practically nonexistent, but you would be wrong.
JQuery and MooTools on their own are very lightweight libraries, the powerful features only start to appear when you add in plugins that the developer communities around both libraries have created, however this can pose a problem, when jQuery or MooTools gets updated there are no guarantees that the plugins your using will still work and lets not forget about licensing, are those plugins your using licensed for use in corporate applications.
Dojo on the otherhand comes with Dijits and DojoX as part of the package. These optional libraries that are easily added to your page by using a dojo.require statement are the equivilent of plugins in the other libraries but because they are part of the package you know that when dojo gets updated all these extras will also get updated. That is an incredible bonus for the dojo user community.
Now you may have seen some really cool MooTools or JQuery examples and want to use them in your website, you could add the Jquery or MooTools layer on top of the Dojo layer in xPages but why stuff loads of unnecessary files down the pipe to your users when you could do it all in Dojo. There is very little you can do in JQuery or MooTools that can't be done in dojo. At the end of the day the logic is the same its really just a case of a slightly different syntax.
As an example of what I mean I found a really cool 'sliding login' written by Jeremie Tisseau of [web-kreation.com]. He has a version written for MooTools ( [demo] - [tutorial] ) and a version writen for JQuery ( [demo] - [tutorial] ). I would love to use this in a xPages application but it is not written in dojo. I could just add JQuery to my page or I could rewrite it in dojo.
Rewriting the sliding login in dojo was a lot easier then I imagined. I was able to take the tutorial from [web-kreation.com] and look at the logic behind how the sliding panel was created and then take that logic and apply it to dojo. Then once I had the scripts working in dojo I was able to break it down and apply it to an xPages application using tricks like #{id:controlname} to get the xPages renderd ID names at runtime and by adding the onClick events directly to the xPage controls in Domino Designer rather then link them during a dojo.ready event.
Want to see the xPages version in action? Here's a [demo]* of how it stands right now. While I have yet to implement the registration component the login part is working perfectly and it does all it's work via an AJAX call to the domino server to determine if the person logging in has rights to the database or not.
So now when your wondering about which JavaScript library to use stand back a bit and ask if you can write the function in dojo so that your not pushing extra files down to the client that are not really needed.
* The Sliding Login panel will be released on OpenNTF under the Apache Public License V2 when it is finished. The original version by Jeremie Tisseau was released under the Creative Commons License V3.0 which allows it to be included in an APL2 code release.