Tobias Oetiker's LISA 2009 Training: Bringing Your Web Pages to Life with jQuery

Tobias Oetiker: Bringing Your Web Pages to Life with jQuery
http://www.usenix.org/event/lisa09/training/tutonefile.html#t8

Tobias Oetiker is delivering training on jQuery this year. Oetiker has been creating Web pages since the first versions of Netscape came out in 1994. Oetiker did not initially have an interest in early JavaScript, but when he discovered that you could write fully functionally applications entirely in JavaScript running entirely in the browser with the Qooxdoo project, it caught his interest. Oetiker was further empowered in using Javascript to bring life to his Web pages using the popular and powerful jQuery Javascript framework, which started as a simple solution to a small problem of embedding Picasa images into Web pages, and has grown into a full-scale training course on learning jQuery.

Q: Can you give a general background about the jQuery training you are going to give at LISA?

Tobias Oetiker: Over time the use of JavaScript in Web pages has been growing and some companies seemed to have found ways of coding complete applications in it. This fascinated me greatly, since the resulting Web pages did look amazing and were highly interactive. Trying to figure how it was done, I was of the impression that it normally involved a bulky Java backend on the server side or an insufferable jumble of php files working their magic on the browser.

It was when I stumbled upon Qooxdoo (www.qooxdoo.org), two years  ago  that I found out that one could really write complete and highly functional applications in JavaScript, running entirely in the browser, calling out to the back-end only when new data was required. And that the backend could be written in any number of languages. Qooxdoo is very good to the programmer, since it lays down all the groundwork for writing large and complex applications with considerable ease. In the process of working intensively with Qooxdoo I got more and more comfortable with JavaScript. Qooxdoo JavaScript applications weigh in with 500 kBytes of code at least. As such they are not well suited for casual addition to a normal webpage.

Being an avid spare time photographer I have been looking for good ways to integrate a photo gallery into my web page. I have written scripts for generating my galleries and also used some open source tools like jAlbum. But it all seemed a bit too tedious for today’s easy going “webbish” ways. As I have been using Picasaweb for some time now, I came to the conclusion that the ideal solution to my problem would be to embed the pictures from Picasaweb directly into my webpage. Having become JavaScript aware, I decided to try my hand at writing some code to do this embedding dynamically. In this project I used jQuery for the first time. Since then I have used it in several other projects and even published several plugins for it: http://plugins.jquery.com/user/21324/track

Q: Why did you decide to give training on jQuery?

Tobias Oetiker: Pretty much as soon as my jQuery gallery was done I found that there must be many people like me at LISA, who have been creating Web pages for ages and know some scripting but have not yet made the jump to applying their programming abilities directly in the browser. With this class this is all going to change. Tons of fun ahead.

Q: In your experience, how has jQuery improved the functionality of Web sites?

Tobias Oetiker: I see both usability as well as maintainability improvements. My initial motivation for the gallery was to make it simple for me to show my latest work on my webpage without having to spend time integrating the pictures, so this is more on the maintenance side. But then again, they way the application works now, only the pictures get loaded as the user navigates the gallery, this makes the site operate faster, so it is also a usability improvement.

Q: In your experience, how has jQuery improved the user experience of Web sites?

Tobias Oetiker: I think apart from the eye candy, it is mainly about latency. While classic cgi based applications have to reload the whole webpage on every turn, jQuery  (and its siblings) allow me to do some processing in the browser without ever bothering the server and in some instances call upon the server for a very specific task and integrate the result right back into the webpage without ever reloading.

Q: What are some examples of how jQuery improved end user experience?

Tobias Oetiker: In my company we have this cgi-based time tracking application we use to log the hours we spend working on our projects. The Web pages it generates are very simple and load quickly, so working with it is quite pleasant, except for the part where I have to select the contract I am working on. It is a huge select box with hundreds of entries. Imagine one of this boxes where you have to select your country when ordering on the web. I have been wondering about this for ages: why does this selectbox widget not support incremental search. I guess non of the browser developers ever has to pick out his country from one of these lits, or maybe they all live in Afghanistan and not in Taiwan. So a few weeks back I write this jQuery plugin, which turns an ordinary selectbox into a selectbox with incremental search. It makes selecting from long selectboxes a pure joy. Try it here:   http://oss.oetiker.ch/jquery/jquery.AddIncSearch.html

I have much more fun logging my hours now.

Q: Will users write a jQuery application in your course?

Tobias Oetiker: I sure hope so. I have included the source code of everything I am going to talk about on the USB stick with the course materials. Since everyone has a browser on their computer, they should be all set to try out the example code and start hacking away at it directly. The cool thing about jQuery is, that quite startling things can be achieved with a single line of code. So application is maybe too daunting a word here.

Q: You mention there will be lots of code examples in the course, can you give a preview into some of the examples and what they do?

Tobias Oetiker: First I will be doing many little and un-attractive JavaScript and jQuery things, which in their unattractiveness have the advantage of being very easy to understand. Once everyone is up to speed I will code walk one or both of the plugins I mentioned above. Discussing the code of a real plugin will get down to the nitty-gritty details, which should make it much easier for you when you start, writing your own stuff.

The jQuery class is spanking new and I am very enthusiastic about teaching it at LISA this year.

Qooxdoo Project: http://qooxdoo.org/

Tobias Oetiker on Qooxdoo: http://lisa.usenix.org/?p=97

Tobias Oetiker LISA Profile: http://www.usenix.org/event/lisa09/training/tutinstructors.html#oetiker

Register for LISA 2009: http://www.usenix.org/event/lisa09/registration/