I gave an AJAX course last week here at INPE, for around 25 people. I started with an overview of Javascript’s syntax, moving to the DOM, a little bit of CSS, and finally showing different AJAX techniques — using iframes, the XML HTTP Request, the pros of JSON vs. XML, etc. I also wanted to talk about jQuery and some other libraries, but we ended runing out of time.
These are a few mental notes I made during the course.
S5 and pytextile
First, S5 is great. I’ve been using it exclusively for my last talks, and I’m already spoiled. For this course I put the presentation, with all supporting material, on my website. Students could follow the presentation on their computers, copy & paste code and download scripts. When a bug was found in one of the little servers used in the course I just fixed it on my laptop, ran rsync and told everybody to download it again. And now the course material has a permanent location if they want to redo some of the exercises, or recall any of the topics covered.
Of course this could be done easily with any other presentation software with HTML export; but S5 makes it ridiculously easy. It was even easier after I wrote a simple script to build the presentation from a Textile formatted file, based on pytextile and Cheetah. Slides are simply separated by a ^L, and I added syntax coloring by hacking pytextile to call enscript for code blocks.
If S5 rules, pytextile sucks. It does. Unicode was simply bolted in, and it’s full of little annoying bugs. I know because I wrote it. In my defense I can say that I’m an oceanographer, and that it was the first software I wrote which is used by more than 2 people; but it really need to be rewritten from scratch. I’m thinking of writing some kind of “mini Textile”, based on ElementTree and only with the features I really use.
Python and Paste
For the course I used a simple Textile to HTML converter as an example of an AJAX application. I wrote five versions of the converter, one for each of the different techniques I showed [iframe, script injection, AHAH (Asynchronous HTML and HTTP), AJAJ (Asynchronous Javascript and JSON), AJAX]. After showing each implementation, I would ask the students to download and run the code on their computers. Each implementation was followed by an exercise, in which the students needed to write a simple application based on the technique presented.
Each of these exercises had a little Python server that needed to be run. I would describe the general behavior of the server and how to communicate with it. For example, in a given exercise /server/ returned a list of band names and ratings as a JSON response. /server/?band=1 would return information only for the second band. To rate a band it was necessary to access, eg, /server/?band=1&rate=7; this would return a JSON object describing the band and the new (averaged) rating. Armed with this information, students had to write Javascript and HTML to create a “band rating” application.
The nice thing is that each server was just a small script that had to be downloaded and double-clicked. Using Paste each script consisted of no more than 20 or 30 lines of code. They were so simple that people with no Python experience started tinkering with the servers, instead of downloading the ones I provided. I also used pySQLite, so that all database functionality I needed for the exercises could be downloaded in a single file.
JSON vs. XML
JSON wins hands down. Even though lots of students had difficulty in understanding
eval("var someObject = " + JSONresponse)
it was easier than parsing XML. But in end I talked so much about how easy it is to create and consume JSON with Python that some students thought that JSON was limited to Python and Javascript. In my last slide I tried to make it clear that JSON can be used with almost any programming language.
Javascript vs. Java
Some concepts were alien for Java programmers but felt natural to me, being a Python programmer. Some people complained about using arbitrary objects as booleans, eg, if(node.innerHTML). They also found strange everything being a dictionary, and even nested dictionaries (in a JSON response from Yahoo!) felt awkward for some of them.
Exercises
Initially I underestimated the importance of exercises (probably because I’m used to give 15 minutes presentations). For the first day I had planned around 4.5 hours of slides (with the students following along using a Javascript interpreter) and 1.5 hours of exercises. This ratio turned to be 3/3. When I showed something it looked easy, but I felt that only when they had to solve problems they were really learning. I had to run and add more exercises to the presentation. In the end, most of the time was spent working on the exercises; I would tell them what application they had to build, give them the small Python servers, and walk around the class helping them.
Looking back, I think I managed to give a nice course, after shifting the focus towards building the little AJAX applications. At least for me I can tell that I learned a lot — about Javascript, AJAX and about teaching — and also that I had a great time.