Members Only Logo  

or Subscribe by Email by entering your address below:

Powered by FeedBlitz
Learn about Subscriptions Follow me on Twitter!

The topics discussed here grow out of the bread-and-butter issues that confront my consulting and software clients on a daily basis. We'll talk about prosaic stuff like Membership Management, Meetings and Events Management and Fundraising, broader ideas like security and software project management, and the social, cultural, and organizational issues that impact IT decision-making.

Thursday, August 03, 2006

J is for javascript....

Not a programmer? You might want to skip this posting. But as I've mentioned, I've been doing a good bit of coding these last couple weeks, updating an old web app we did for one of our clients. So it's what's on my mind.

If you do some web programming but you haven't tried the new Ajax techniques in your Web projects yet, you can find some great examples that demystify the whole thing in Ajax Hacks, by Bruce Perry. You'll find it's not rocket science, and after a brief learning curve you'll be creating web apps that are far more responsive than your old sites. But pretty soon find yourself lying in bed at night wondering about the best format to use to feed data to the web page.

Since XML puts the X in AJAX, and the J is for Javascript, the most obvious approach is getting the data as a textbook XML data file and using Javascript to display the data elements wherever you wish. But before long you'll get fed up with the tediousness of parsing individual data elements out of the raw XML feed.

XPATH promises a way out. Instead of using procedural code to travel down the XML tree, XPATH lets you address an element or list of elements with a string that looks like a directory path. For example, if you want to build a list all authors of all books with a publication date of 2000, you could reference them with a string like

But here you run into browser problems - the Mozilla family and IE implement Xpath in entirely different ways. Mozilla has the more powerful implementation, but it is pretty complicated to use. IE has a much more straightforward take on it. Charles Toepfer has posted a nice cross-browser library that implements this straightforward approach to xpath for the Mozilla browsers.

Still seems pretty complicated? You might want to try JSON (javascript object notation). This little trick lets you transfer data in the same way you might define it within your script - for example

book {
title: "War and Peace";
author: "Leon Tolstoy";

Besides being fewer characters to transfer since the "tags" are not closed, it's trivial to parse in Javascript - just use the javascript eval function to turn the string into a javascript object! And the file is very easy for a human to read.

But JSON hasn't helped us with the formatting issues. An approach which does is one Christine Herron blogged about not long ago: using microformat-style xml as a data transfer mechanism. This is a format that uses html div and span tags to identify the data elements.Like so -

<div class="book">
<span class="title">War And Peace</span>
<span class="author">Leon Tolstoy</span>

The semantic information, as you see, is indicated by the element's class. You can just assign the entire XML string to a div's innerHTML, and let your stylesheet handle the formatting. Microformats were originally developed as a way to make web pages that would be easily scraped by other applications, but turning the technique into a data transfer mechanism seems sensible in some cases.The Rico effects library uses this as one of its standard approaches to Ajax data exchange.
Tags: , ,

Labels: ,

Comments on "J is for javascript...."


Anonymous Anonymous said ... (August 9, 2006 at 9:23 AM) : 

I've used JSON and XML. I would prefer to use JSON over XML. It's easier to traverse nodes within the Javascript object you create when you use JSON. XML requires too much translation back and forth if you're programming primarily in Javascript for data presentation on a Web front end.

On the other hand, have you tried actually trying to put data into JSON format? Ugh. The format leaves a lot to be desired because much of the data requires quote escaping which is pretty much the programming equivalent of having to pick a stranger's teeth with a toothpick.


Blogger Michael Stein said ... (August 9, 2006 at 9:47 AM) : 

hey Alan - nice to hear from you!

The trick for any of these outputs is to create routines to package what you need, and then never look at the details again. XML is a big pain to output too: you've got to look for all the forbidden characters (like ampersands and line ends) and turn them into entities (& formats). So write a single function to do this (ours is called encodeforXML()) and use it in your backend. You can build higher order functions to, like tableToXML().

Another big help is to write as much as possible in a back-end written in a compiled language with serious debugging support. For us that means putting as much functionality as possible into the webservice. The serverside scripts are there basically to hand off the data from the webservice to the user's browser, so we do not need to give the service public access. And client-side scripts are just for formating incoming data (and validating outgoing.)

You toothpick analogy gives me the heebeejeebees :)


post a comment